Created custom “add order view” to admin panel, Added vm name and user email to orders list admin view , Started function to charge an user for his VM subscription from the admin panel, Created template for email after charge an user for his virtual machine plan, Handle errors creating an order in the admin panel, Now an email is sent to the user after charge him for his virtual machine plan

hosting/admin.py

@@ -1,7 +1,68 @@
 from django.contrib import admin
+from django.utils.html import format_html
+from django.core.urlresolvers import reverse
 
 from utils.mailer import BaseEmail
-from .models import VirtualMachineType, VirtualMachinePlan
+from utils.stripe_utils import StripeUtils
+
+from .forms import HostingOrderAdminForm
+from .models import VirtualMachineType, VirtualMachinePlan, HostingOrder
+
+
+class HostingOrderAdmin(admin.ModelAdmin):
+    # fields = ('slug', 'imdb_link', 'start', 'finish', 'added_by')
+    list_display = ('id', 'created_at', 'plan', 'user')
+    search_fields = ['vm_plan__id', 'customer__user__email']
+
+    def save_model(self, request, obj, form, change):
+        if not change:
+            customer = form.cleaned_data.get('customer')
+
+            # Get and set billing address from the lastest charged order
+            last_order = HostingOrder.objects.filter(customer=customer).latest('id')
+            billing_address = last_order.billing_address
+            obj.billing_address = billing_address
+
+            charge = form.cleaned_data.get('charge')
+            # Associate an order with a stripe payment
+            obj.set_stripe_charge(charge)
+
+            # If the Stripe payment was successed, set order status approved
+            obj.set_approved()
+
+            context = {
+                'order': obj,
+                'vm': obj.vm_plan
+            }
+            email_data = {
+                'subject': 'New VM request',
+                'to': obj.customer.user.email,
+                'context': context,
+                'template_name': 'vm_charged',
+                'template_path': 'emails/'
+            }
+            email = BaseEmail(**email_data)
+            email.send()
+
+        obj.save()
+        return obj
+
+    def get_form(self, request, obj=None, **kwargs):
+        if obj is None:
+            kwargs['form'] = HostingOrderAdminForm
+        return super(HostingOrderAdmin, self).get_form(request, obj, **kwargs)
+
+    def user(self, obj):
+        email = obj.customer.user.email
+        user_url = reverse("admin:membership_customuser_change", args=[obj.customer.user.id])
+        return format_html("<a href='{url}'>{email}</a>", url=user_url, email=email)
+
+    def plan(self, obj):
+        vm_name = obj.vm_plan.name
+        vm_url = reverse("admin:hosting_virtualmachineplan_change", args=[obj.vm_plan.id])
+        return format_html("<a href='{url}'>{vm_name}</a>", url=vm_url, vm_name=vm_name)
+
+    plan.short_description = "Virtual Machine Plan"
 
 
 class VirtualMachinePlanAdmin(admin.ModelAdmin):
@@ -28,5 +89,6 @@ class VirtualMachinePlanAdmin(admin.ModelAdmin):
         obj.save()
 
 
+admin.site.register(HostingOrder, HostingOrderAdmin)
 admin.site.register(VirtualMachineType)
 admin.site.register(VirtualMachinePlan, VirtualMachinePlanAdmin)

hosting/forms.py

@@ -2,6 +2,34 @@ from django import forms
 from membership.models import CustomUser
 from django.contrib.auth import authenticate
 
+from utils.stripe_utils import StripeUtils
+
+from .models import HostingOrder
+
+
+class HostingOrderAdminForm(forms.ModelForm):
+
+    class Meta:
+        model = HostingOrder
+        fields = ['vm_plan', 'customer']
+
+    def clean(self):
+        customer = self.cleaned_data.get('customer')
+        vm_plan = self.cleaned_data.get('vm_plan')
+
+        # Make a charge to the customer
+        stripe_utils = StripeUtils()
+        charge_response = stripe_utils.make_charge(customer=customer.stripe_id,
+                                                   amount=vm_plan.price)
+        charge = charge_response.get('response_object')
+        if not charge:
+            raise forms.ValidationError(charge_response.get('error'))
+
+        self.cleaned_data.update({
+            'charge': charge
+        })
+        return self.cleaned_data
+
 
 class HostingUserLoginForm(forms.Form):
 

hosting/models.py

@@ -104,7 +104,7 @@ class VirtualMachinePlan(models.Model):
     objects = VMPlansManager()
 
     def __str__(self):
-        return "%s" % (self.id)
+        return self.name
 
     @cached_property
     def hosting_company_name(self):

hosting/templates/emails/new_booked_vm.html

@@ -1,12 +1,139 @@
-
+<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
-<!DOCTYPE html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<html>
+<html xmlns="http://www.w3.org/1999/xhtml" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
 <head>
-	<title></title>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Oxygen Invoice</title>
 </head>
-<body>
+<body bgcolor="#f7f7f7" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; color: white; margin: 0;">
-
+<style type="text/css">
-NEW VM BOOKED
+@media only screen and (max-width: 480px) {
-
+  table[class*="container-for-gmail-android"] {
+    min-width: 290px !important; width: 100% !important;
+  }
+  img[class="force-width-gmail"] {
+    display: none !important; width: 0 !important; height: 0 !important;
+  }
+  table[class="w320"] {
+    width: 320px !important;
+  }
+  td[class*="mobile-header-padding-left"] {
+    width: 160px !important; padding-left: 0 !important;
+  }
+  td[class*="mobile-header-padding-right"] {
+    width: 160px !important; padding-right: 0 !important;
+  }
+  td[class="header-lg"] {
+    font-size: 24px !important; padding-bottom: 5px !important;
+  }
+  td[class="content-padding"] {
+    padding: 5px 0 5px !important;
+  }
+  td[class="button"] {
+    padding: 5px 5px 30px !important;
+  }
+  td[class*="free-text"] {
+    padding: 10px 18px 30px !important;
+  }
+  td[class~="mobile-hide-img"] {
+    display: none !important; height: 0 !important; width: 0 !important; line-height: 0 !important;
+  }
+  td[class~="item"] {
+    width: 140px !important; vertical-align: top !important;
+  }
+  td[class~="quantity"] {
+    width: 50px !important;
+  }
+  td[class~="price"] {
+    width: 90px !important;
+  }
+  td[class="item-table"] {
+    padding: 30px 20px !important;
+  }
+  td[class="mini-container-left"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+  td[class="mini-container-right"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+}
+</style>
+<table align="center" cellpadding="0" cellspacing="0" class="container-for-gmail-android" width="100%" style="border-collapse: collapse !important; min-width: 600px; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="left" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff url(http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg) repeat-x;" bgcolor="#ffffff">
+      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+      <img src="http://s3.amazonaws.com/swu-filepicker/SBb2fQPrQ5ezxmqUTgCr_transparent.png" class="force-width-gmail" style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; min-width: 600px; height: 0px !important; line-height: 1px !important; font-size: 1px !important;"><table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" background="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; background: transparent;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td width="100%" height="80" valign="top" style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px;" align="center">
+            <!--[if gte mso 9]>
+            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:80px; v-text-anchor:middle;">
+              <v:fill type="tile" src="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" color="#ffffff" />
+              <v:textbox inset="0,0,0,0">
+            <![endif]-->
+              <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+                <table cellpadding="0" cellspacing="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="pull-left mobile-header-padding-left" style="vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: left; line-height: 21px; width: 290px; padding-left: 10px;" align="left" valign="middle">
+                      <a href="" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; color: #676767; text-decoration: none !important;"><img width="137" height="47" src="https://dynamicweb.ungleich.ch/static/hosting/img/logo_black.svg" alt="logo" style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; border: none;"></a>
+                    </td>
+                    <td class="pull-right mobile-header-padding-right" style="color: #4d4d4d; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; text-align: right; line-height: 21px; width: 290px; padding-left: 10px;" align="right">
+                    </td>
+                  </tr></table>
+</center>
+              <!--[if gte mso 9]>
+              </v:textbox>
+            </v:rect>
+            <![endif]-->
+            </td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7; padding: 20px 0 5px;" class="content-padding" bgcolor="#f7f7f7">
+      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="header-lg" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 32px; color: #4d4d4d; text-align: center; line-height: normal; font-weight: 700; padding: 35px 0 0;" align="center">
+              You have booked a virtual machine!
+            </td>
+          </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="free-text" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; width: 100% !important; padding: 10px 60px 0px;" align="center">
+             Your virtual machine {{vm.name}} subscription has been charged, 
+             <br/>
+             we are going to contact you as soon your virtual machine has been activated.
+             <br/> 
+             You can view your invoice clicking on the button below. 
+            </td>
+          </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="button" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 30px 0;" align="center">
+              <div style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<!--[if mso]>
+                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:45px;v-text-anchor:middle;width:155px;" arcsize="15%" strokecolor="#ffffff" fillcolor="#ff6f6f">
+                  <w:anchorlock/>
+                  <center style="color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;">My Account</center>
+                </v:roundrect>
+              <![endif]--><a href="{% url 'hosting:orders' order.id %}" style="border-radius: 5px; color: #ffffff; display: inline-block; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; font-weight: regular; line-height: 45px; text-align: center; text-decoration: none !important; width: 155px; -webkit-text-size-adjust: none; mso-hide: all; background: #ff6f6f;">View Invoice</a>
+</div>
+            </td>
+          </tr>
+</table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="height: 100px; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7;" bgcolor="#f7f7f7">
+      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 25px 0;" align="center">
+              <strong style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">ungleich</strong><br style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+</td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+</table>
 </body>
 </html>
+

hosting/templates/emails/new_booked_vm.txt

@@ -1,12 +1,139 @@
-
+<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
-<!DOCTYPE html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<html>
+<html xmlns="http://www.w3.org/1999/xhtml" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
 <head>
-	<title></title>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Oxygen Invoice</title>
 </head>
-<body>
+<body bgcolor="#f7f7f7" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; color: white; margin: 0;">
-
+<style type="text/css">
-NEW VM BOOKED
+@media only screen and (max-width: 480px) {
-
+  table[class*="container-for-gmail-android"] {
+    min-width: 290px !important; width: 100% !important;
+  }
+  img[class="force-width-gmail"] {
+    display: none !important; width: 0 !important; height: 0 !important;
+  }
+  table[class="w320"] {
+    width: 320px !important;
+  }
+  td[class*="mobile-header-padding-left"] {
+    width: 160px !important; padding-left: 0 !important;
+  }
+  td[class*="mobile-header-padding-right"] {
+    width: 160px !important; padding-right: 0 !important;
+  }
+  td[class="header-lg"] {
+    font-size: 24px !important; padding-bottom: 5px !important;
+  }
+  td[class="content-padding"] {
+    padding: 5px 0 5px !important;
+  }
+  td[class="button"] {
+    padding: 5px 5px 30px !important;
+  }
+  td[class*="free-text"] {
+    padding: 10px 18px 30px !important;
+  }
+  td[class~="mobile-hide-img"] {
+    display: none !important; height: 0 !important; width: 0 !important; line-height: 0 !important;
+  }
+  td[class~="item"] {
+    width: 140px !important; vertical-align: top !important;
+  }
+  td[class~="quantity"] {
+    width: 50px !important;
+  }
+  td[class~="price"] {
+    width: 90px !important;
+  }
+  td[class="item-table"] {
+    padding: 30px 20px !important;
+  }
+  td[class="mini-container-left"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+  td[class="mini-container-right"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+}
+</style>
+<table align="center" cellpadding="0" cellspacing="0" class="container-for-gmail-android" width="100%" style="border-collapse: collapse !important; min-width: 600px; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="left" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff url(http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg) repeat-x;" bgcolor="#ffffff">
+      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+      <img src="http://s3.amazonaws.com/swu-filepicker/SBb2fQPrQ5ezxmqUTgCr_transparent.png" class="force-width-gmail" style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; min-width: 600px; height: 0px !important; line-height: 1px !important; font-size: 1px !important;"><table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" background="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; background: transparent;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td width="100%" height="80" valign="top" style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px;" align="center">
+            <!--[if gte mso 9]>
+            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:80px; v-text-anchor:middle;">
+              <v:fill type="tile" src="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" color="#ffffff" />
+              <v:textbox inset="0,0,0,0">
+            <![endif]-->
+              <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+                <table cellpadding="0" cellspacing="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="pull-left mobile-header-padding-left" style="vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: left; line-height: 21px; width: 290px; padding-left: 10px;" align="left" valign="middle">
+                      <a href="" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; color: #676767; text-decoration: none !important;"><img width="137" height="47" src="https://dynamicweb.ungleich.ch/static/hosting/img/logo_black.svg" alt="logo" style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; border: none;"></a>
+                    </td>
+                    <td class="pull-right mobile-header-padding-right" style="color: #4d4d4d; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; text-align: right; line-height: 21px; width: 290px; padding-left: 10px;" align="right">
+                    </td>
+                  </tr></table>
+</center>
+              <!--[if gte mso 9]>
+              </v:textbox>
+            </v:rect>
+            <![endif]-->
+            </td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7; padding: 20px 0 5px;" class="content-padding" bgcolor="#f7f7f7">
+      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="header-lg" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 32px; color: #4d4d4d; text-align: center; line-height: normal; font-weight: 700; padding: 35px 0 0;" align="center">
+              You have booked a virtual machine!
+            </td>
+          </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="free-text" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; width: 100% !important; padding: 10px 60px 0px;" align="center">
+             Your virtual machine {{vm.name}} subscription has been charged, 
+             <br/>
+             We are going to contact you as soon your virtual machine has been activated.
+             <br/> 
+             You can view your invoice clicking on the button below. 
+            </td>
+          </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="button" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 30px 0;" align="center">
+              <div style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<!--[if mso]>
+                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:45px;v-text-anchor:middle;width:155px;" arcsize="15%" strokecolor="#ffffff" fillcolor="#ff6f6f">
+                  <w:anchorlock/>
+                  <center style="color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;">My Account</center>
+                </v:roundrect>
+              <![endif]--><a href="{% url 'hosting:orders' order.id %}" style="border-radius: 5px; color: #ffffff; display: inline-block; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; font-weight: regular; line-height: 45px; text-align: center; text-decoration: none !important; width: 155px; -webkit-text-size-adjust: none; mso-hide: all; background: #ff6f6f;">View Invoice</a>
+</div>
+            </td>
+          </tr>
+</table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="height: 100px; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7;" bgcolor="#f7f7f7">
+      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 25px 0;" align="center">
+              <strong style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">ungleich</strong><br style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+</td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+</table>
 </body>
 </html>
+

hosting/templates/emails/vm_charged.html

@@ -0,0 +1,135 @@
+<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Oxygen Invoice</title>
+</head>
+<body bgcolor="#f7f7f7" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; color: white; margin: 0;">
+<style type="text/css">
+@media only screen and (max-width: 480px) {
+  table[class*="container-for-gmail-android"] {
+    min-width: 290px !important; width: 100% !important;
+  }
+  img[class="force-width-gmail"] {
+    display: none !important; width: 0 !important; height: 0 !important;
+  }
+  table[class="w320"] {
+    width: 320px !important;
+  }
+  td[class*="mobile-header-padding-left"] {
+    width: 160px !important; padding-left: 0 !important;
+  }
+  td[class*="mobile-header-padding-right"] {
+    width: 160px !important; padding-right: 0 !important;
+  }
+  td[class="header-lg"] {
+    font-size: 24px !important; padding-bottom: 5px !important;
+  }
+  td[class="content-padding"] {
+    padding: 5px 0 5px !important;
+  }
+  td[class="button"] {
+    padding: 5px 5px 30px !important;
+  }
+  td[class*="free-text"] {
+    padding: 10px 18px 30px !important;
+  }
+  td[class~="mobile-hide-img"] {
+    display: none !important; height: 0 !important; width: 0 !important; line-height: 0 !important;
+  }
+  td[class~="item"] {
+    width: 140px !important; vertical-align: top !important;
+  }
+  td[class~="quantity"] {
+    width: 50px !important;
+  }
+  td[class~="price"] {
+    width: 90px !important;
+  }
+  td[class="item-table"] {
+    padding: 30px 20px !important;
+  }
+  td[class="mini-container-left"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+  td[class="mini-container-right"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+}
+</style>
+<table align="center" cellpadding="0" cellspacing="0" class="container-for-gmail-android" width="100%" style="border-collapse: collapse !important; min-width: 600px; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="left" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff url(http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg) repeat-x;" bgcolor="#ffffff">
+      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+      <img src="http://s3.amazonaws.com/swu-filepicker/SBb2fQPrQ5ezxmqUTgCr_transparent.png" class="force-width-gmail" style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; min-width: 600px; height: 0px !important; line-height: 1px !important; font-size: 1px !important;"><table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" background="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; background: transparent;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td width="100%" height="80" valign="top" style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px;" align="center">
+            <!--[if gte mso 9]>
+            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:80px; v-text-anchor:middle;">
+              <v:fill type="tile" src="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" color="#ffffff" />
+              <v:textbox inset="0,0,0,0">
+            <![endif]-->
+              <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+                <table cellpadding="0" cellspacing="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="pull-left mobile-header-padding-left" style="vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: left; line-height: 21px; width: 290px; padding-left: 10px;" align="left" valign="middle">
+                      <a href="" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; color: #676767; text-decoration: none !important;"><img width="137" height="47" src="https://dynamicweb.ungleich.ch/static/hosting/img/logo_black.svg" alt="logo" style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; border: none;"></a>
+                    </td>
+                    <td class="pull-right mobile-header-padding-right" style="color: #4d4d4d; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; text-align: right; line-height: 21px; width: 290px; padding-left: 10px;" align="right">
+                    </td>
+                  </tr></table>
+</center>
+              <!--[if gte mso 9]>
+              </v:textbox>
+            </v:rect>
+            <![endif]-->
+            </td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7; padding: 20px 0 5px;" class="content-padding" bgcolor="#f7f7f7">
+      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="header-lg" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 32px; color: #4d4d4d; text-align: center; line-height: normal; font-weight: 700; padding: 35px 0 0;" align="center">
+              Your virtual machine plan has been charged!
+            </td>
+          </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="free-text" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; width: 100% !important; padding: 10px 60px 0px;" align="center">
+             Your virtual machine {{vm.name}} subscription has been charged, <br/> you can view your invoice clicking on the button below. 
+            </td>
+          </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="button" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 30px 0;" align="center">
+              <div style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<!--[if mso]>
+                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:45px;v-text-anchor:middle;width:155px;" arcsize="15%" strokecolor="#ffffff" fillcolor="#ff6f6f">
+                  <w:anchorlock/>
+                  <center style="color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;">My Account</center>
+                </v:roundrect>
+              <![endif]--><a href="{% url 'hosting:orders' order.id %}" style="border-radius: 5px; color: #ffffff; display: inline-block; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; font-weight: regular; line-height: 45px; text-align: center; text-decoration: none !important; width: 155px; -webkit-text-size-adjust: none; mso-hide: all; background: #ff6f6f;">View Invoice</a>
+</div>
+            </td>
+          </tr>
+</table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="height: 100px; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7;" bgcolor="#f7f7f7">
+      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 25px 0;" align="center">
+              <strong style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">ungleich</strong><br style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+</td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+</table>
+</body>
+</html>
+

hosting/templates/emails/vm_charged.txt

@@ -0,0 +1,135 @@
+<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Oxygen Invoice</title>
+</head>
+<body bgcolor="#f7f7f7" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; color: white; margin: 0;">
+<style type="text/css">
+@media only screen and (max-width: 480px) {
+  table[class*="container-for-gmail-android"] {
+    min-width: 290px !important; width: 100% !important;
+  }
+  img[class="force-width-gmail"] {
+    display: none !important; width: 0 !important; height: 0 !important;
+  }
+  table[class="w320"] {
+    width: 320px !important;
+  }
+  td[class*="mobile-header-padding-left"] {
+    width: 160px !important; padding-left: 0 !important;
+  }
+  td[class*="mobile-header-padding-right"] {
+    width: 160px !important; padding-right: 0 !important;
+  }
+  td[class="header-lg"] {
+    font-size: 24px !important; padding-bottom: 5px !important;
+  }
+  td[class="content-padding"] {
+    padding: 5px 0 5px !important;
+  }
+  td[class="button"] {
+    padding: 5px 5px 30px !important;
+  }
+  td[class*="free-text"] {
+    padding: 10px 18px 30px !important;
+  }
+  td[class~="mobile-hide-img"] {
+    display: none !important; height: 0 !important; width: 0 !important; line-height: 0 !important;
+  }
+  td[class~="item"] {
+    width: 140px !important; vertical-align: top !important;
+  }
+  td[class~="quantity"] {
+    width: 50px !important;
+  }
+  td[class~="price"] {
+    width: 90px !important;
+  }
+  td[class="item-table"] {
+    padding: 30px 20px !important;
+  }
+  td[class="mini-container-left"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+  td[class="mini-container-right"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+}
+</style>
+<table align="center" cellpadding="0" cellspacing="0" class="container-for-gmail-android" width="100%" style="border-collapse: collapse !important; min-width: 600px; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="left" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff url(http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg) repeat-x;" bgcolor="#ffffff">
+      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+      <img src="http://s3.amazonaws.com/swu-filepicker/SBb2fQPrQ5ezxmqUTgCr_transparent.png" class="force-width-gmail" style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; min-width: 600px; height: 0px !important; line-height: 1px !important; font-size: 1px !important;"><table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" background="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; background: transparent;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td width="100%" height="80" valign="top" style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px;" align="center">
+            <!--[if gte mso 9]>
+            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:80px; v-text-anchor:middle;">
+              <v:fill type="tile" src="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" color="#ffffff" />
+              <v:textbox inset="0,0,0,0">
+            <![endif]-->
+              <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+                <table cellpadding="0" cellspacing="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="pull-left mobile-header-padding-left" style="vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: left; line-height: 21px; width: 290px; padding-left: 10px;" align="left" valign="middle">
+                      <a href="" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; color: #676767; text-decoration: none !important;"><img width="137" height="47" src="https://dynamicweb.ungleich.ch/static/hosting/img/logo_black.svg" alt="logo" style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; border: none;"></a>
+                    </td>
+                    <td class="pull-right mobile-header-padding-right" style="color: #4d4d4d; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; text-align: right; line-height: 21px; width: 290px; padding-left: 10px;" align="right">
+                    </td>
+                  </tr></table>
+</center>
+              <!--[if gte mso 9]>
+              </v:textbox>
+            </v:rect>
+            <![endif]-->
+            </td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7; padding: 20px 0 5px;" class="content-padding" bgcolor="#f7f7f7">
+      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="header-lg" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 32px; color: #4d4d4d; text-align: center; line-height: normal; font-weight: 700; padding: 35px 0 0;" align="center">
+              Your virtual machine plan has been charged!
+            </td>
+          </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="free-text" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; width: 100% !important; padding: 10px 60px 0px;" align="center">
+             Your virtual machine {{vm.name}} subscription has been charged, <br/> you can view your invoice clicking on the button below. 
+            </td>
+          </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="button" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 30px 0;" align="center">
+              <div style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<!--[if mso]>
+                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:45px;v-text-anchor:middle;width:155px;" arcsize="15%" strokecolor="#ffffff" fillcolor="#ff6f6f">
+                  <w:anchorlock/>
+                  <center style="color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;">My Account</center>
+                </v:roundrect>
+              <![endif]--><a href="{% url 'hosting:orders' order.id %}" style="border-radius: 5px; color: #ffffff; display: inline-block; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; font-weight: regular; line-height: 45px; text-align: center; text-decoration: none !important; width: 155px; -webkit-text-size-adjust: none; mso-hide: all; background: #ff6f6f;">View Invoice</a>
+</div>
+            </td>
+          </tr>
+</table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="height: 100px; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7;" bgcolor="#f7f7f7">
+      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 25px 0;" align="center">
+              <strong style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">ungleich</strong><br style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+</td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+</table>
+</body>
+</html>
+

hosting/templates/hosting/virtual_machines.html

@@ -13,6 +13,7 @@
 					<th>ID</th>
 					<th>Location</th>
 					<th>Amount</th>
+					<th>Status</th>
 					<th></th>
 				</tr>
 				</thead>
@@ -22,6 +23,17 @@
 						<td scope="row">{{vm.name}}</td> 
 						<td>{{vm.location}}</td> 
 						<td>{{vm.price}} CHF</td> 
+						<td>
+
+							{% if vm.status == 'pending' %}
+								<span class="h3 label label-warning"><strong>{{vm.get_status_display}}</strong></span>
+							{% elif  vm.status == 'online' %}
+								<span class="h3 label label-success"><strong>{{vm.get_status_display}}</strong></span>
+							{% else %}
+								<span class="h3 label label-error"><strong>{{vm.get_status_display}}</strong></span>
+							{% endif %}  
+
+						</td> 
 						<td>
 							<button type="button" class="btn btn-default"><a href="{% url 'hosting:virtual_machines' vm.id %}">View Detail</a></button>
 						</td>

membership/models.py

@@ -124,6 +124,9 @@ class StripeCustomer(models.Model):
     user = models.OneToOneField(CustomUser)
     stripe_id = models.CharField(unique=True, max_length=100)
 
+    def __str__(self):
+        return "%s - %s" % (self.stripe_id, self.user.email)
+
     @classmethod
     def get_or_create(cls, email=None, token=None):
         """

utils/models.py

@@ -12,7 +12,6 @@ class BillingAddress(models.Model):
     country = CountryField()
 
 
-
 class ContactMessage(models.Model):
     name = models.CharField(max_length=200)
     email = models.EmailField()