Users can update payment method

hc/payments/models.py

@@ -1,3 +1,5 @@
+import braintree
+
 from django.contrib.auth.models import User
 from django.db import models
 
@@ -25,3 +27,29 @@ class Subscription(models.Model):
             return 20
 
         return 0
+
+    def _get_braintree_payment_method(self):
+        if not hasattr(self, "_pm"):
+            self._pm = braintree.PaymentMethod.find(self.payment_method_token)
+        return self._pm
+
+    def pm_is_credit_card(self):
+        print(self.payment_method_token, self._get_braintree_payment_method())
+        return isinstance(self._get_braintree_payment_method(),
+                          braintree.credit_card.CreditCard)
+
+    def pm_is_paypal(self):
+        return isinstance(self._get_braintree_payment_method(),
+                          braintree.paypal_account.PayPalAccount)
+
+    def card_type(self):
+        o = self._get_braintree_payment_method()
+        return o.card_type
+
+    def last_4(self):
+        o = self._get_braintree_payment_method()
+        return o.last_4
+
+    def paypal_email(self):
+        o = self._get_braintree_payment_method()
+        return o.email

hc/payments/urls.py

@@ -19,6 +19,10 @@ urlpatterns = [
         views.create_plan,
         name="hc-create-plan"),
 
+    url(r'^pricing/update_payment_method/$',
+        views.update_payment_method,
+        name="hc-update-payment-method"),
+
     url(r'^pricing/cancel_plan/$',
         views.cancel_plan,
         name="hc-cancel-plan"),

hc/payments/views.py

@@ -119,6 +119,39 @@ def create_plan(request):
     return redirect("hc-pricing")
 
 
+@login_required
+@require_POST
+def update_payment_method(request):
+    sub = Subscription.objects.for_user(request.user)
+
+    if not sub.customer_id or not sub.subscription_id:
+        return HttpResponseBadRequest()
+
+    if "payment_method_nonce" not in request.POST:
+        return HttpResponseBadRequest()
+
+    result = braintree.PaymentMethod.create({
+        "customer_id": sub.customer_id,
+        "payment_method_nonce": request.POST["payment_method_nonce"]
+    })
+
+    if not result.is_success:
+        return log_and_bail(request, result)
+
+    payment_method_token = result.payment_method.token
+    result = braintree.Subscription.update(sub.subscription_id, {
+        "payment_method_token": payment_method_token
+    })
+
+    if not result.is_success:
+        return log_and_bail(request, result)
+
+    sub.payment_method_token = payment_method_token
+    sub.save()
+
+    return redirect("hc-pricing")
+
+
 @login_required
 @require_POST
 def cancel_plan(request):

static/js/pricing.js

@@ -1,24 +1,7 @@
 $(function () {
-    var prices = [2, 5, 10, 15, 20, 25, 50, 100];
-    var initialPrice = parseInt($("#pricing-value").text());
-    var priceIdx = prices.indexOf(initialPrice);
-
-    function updateDisplayPrice(price) {
-        $("#pricing-value").text(price);
-        $("#pww-switch-btn").text("Switch to $" + price + " / mo");
-
-        if (price == initialPrice) {
-            $("#pww-selected-btn").show();
-            $("#pww-switch-btn").hide();
-        } else {
-            $("#pww-selected-btn").hide();
-            $("#pww-switch-btn").show();
-        }
-    }
 
     $(".btn-create-payment-method").click(function() {
         var planId = $(this).data("plan-id");
-        console.log(planId);
         $("#plan_id").val(planId);
         $.getJSON("/pricing/get_client_token/", function(data) {
             var $modal = $("#payment-method-modal");
@@ -29,8 +12,18 @@ $(function () {
         })
     });
 
-    $("#payment-method-cancel").click(function() {
+    $(".btn-update-payment-method").click(function() {
-        location.reload();
+        $.getJSON("/pricing/get_client_token/", function(data) {
+            var $modal = $("#update-payment-method-modal");
+            braintree.setup(data.client_token, "dropin", {
+                container: "update-payment-form"
+            });
+            $modal.modal("show");
+        })
     });
 
+    $(".pm-modal").on("hidden.bs.modal", function() {
+        location.reload();
+    })
+
 });

templates/payments/pricing.html

@@ -28,12 +28,29 @@
                         {% if first_charge %}
                         Success! You just paid ${{ sub.price }}.
                         {% else %}
-                        You are currently paying ${{ sub.price }}/month.
+                            You are currently paying ${{ sub.price }}/month
+
+                            {% if sub.pm_is_credit_card %}
+                            using {{ sub.card_type }} card
+                            ending with {{ sub.last_4 }}.
+                            {% endif %}
+
+                            {% if sub.pm_is_paypal %}
+                            using PayPal account
+                            {{ sub.paypal_email }}.
+                            {% endif %}
+
                         {% endif %}
-                        <a href="{% url 'hc-billing' %}">See Billing History</a>.
                     </p>
+                    <p>Thank you for supporting healthchecks.io!</p>
+
                     <p>
-                        Thank you for supporting healthchecks.io!
+                        <a class="btn btn-default" href="{% url 'hc-billing' %}">See Billing History</a>
+                        {% if not first_charge %}
+                        <button class="btn btn-default btn-update-payment-method">
+                            Change Payment Method
+                        </button>
+                        {% endif %}
                     </p>
                 </div>
             </div>
@@ -232,7 +249,7 @@
     </div>
 </section>
 
-<div id="payment-method-modal" class="modal" data-client-token="{{ client_token }}">
+<div id="payment-method-modal" class="modal pm-modal">
     <div class="modal-dialog">
         <form method="post" action="{% url 'hc-create-plan' %}">
             {% csrf_token %}
@@ -243,11 +260,11 @@
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                     <h4>Set Up Subscription</h4>
                 </div>
-                <div class="modal-body" id="payment-method-body">
+                <div class="modal-body">
                     <div id="payment-form"></div>
                 </div>
                 <div class="modal-footer">
-                    <button id="payment-method-cancel" type="button" class="btn btn-default">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">
                         Cancel
                     </button>
                     <button type="submit" class="btn btn-primary">
@@ -259,6 +276,31 @@
     </div>
 </div>
 
+<div id="update-payment-method-modal" class="modal pm-modal">
+    <div class="modal-dialog">
+        <form method="post" action="{% url 'hc-update-payment-method' %}">
+            {% csrf_token %}
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    <h4>Your Payment Method</h4>
+                </div>
+                <div class="modal-body">
+                    <div id="update-payment-form"></div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">
+                        Cancel
+                    </button>
+                    <button type="submit" class="btn btn-primary">
+                        Confirm Payment Method
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>
+
 {% endblock %}
 
 {% block scripts %}