healthchecks/static/js/billing.js

$(function () {
    var clientTokenRequested = false;
    function requestClientToken() {
        if (!clientTokenRequested) {
            clientTokenRequested = true;
            $.getJSON("/pricing/get_client_token/", setupDropin);
        }
    }

    function setupDropin(data) {
        braintree.dropin.create({
            authorization: data.client_token,
            container: "#dropin",
            paypal: { flow: 'vault' }
        }, function(createErr, instance) {
            $("#payment-form-submit").click(function() {
                instance.requestPaymentMethod(function (requestPaymentMethodErr, payload) {
                    $("#pmm-nonce").val(payload.nonce);
                    $("#payment-form").submit();
                });
            }).prop("disabled", false);
        });
    }

    $("#update-payment-method").hover(requestClientToken);

    $("#update-payment-method").click(function() {
        requestClientToken();
        $("#payment-form").attr("action", this.dataset.action);
        $("#payment-form-submit").text("Update Payment Method");
        $("#payment-method-modal").modal("show");
    });


    $("#billing-history").load( "/accounts/profile/billing/history/" );
    $("#billing-address").load( "/accounts/profile/billing/address/", function() {
        $("#billing-address input").each(function(idx, obj) {
            $("#" + obj.name).val(obj.value);
        });
    });

    $("#payment-method").load( "/accounts/profile/billing/payment_method/", function() {
        $("#next-billing-date").text($("#nbd").val());
    });

    $("#billing-periods input").click(updateChangePlanForm);

    $("#plan-hobbyist").click(function() {
        $(".plan").removeClass("selected");
        $("#plan-hobbyist").addClass("selected");
        updateChangePlanForm();
    });

    $("#plan-business").click(function() {
        $(".plan").removeClass("selected");
        $("#plan-business").addClass("selected");
        updateChangePlanForm();
    });

    $("#plan-business-plus").click(function() {
        $(".plan").removeClass("selected");
        $("#plan-business-plus").addClass("selected");
        updateChangePlanForm();
    });

    function updateChangePlanForm() {
        var planId = $("#old-plan-id").val();

        // "Monthly" is selected: dispplay monthly prices
        if ($("#billing-monthly").is(":checked")) {
            var period = "monthly";
            $("#business-price").text("$20");
            $("#business-plus-price").text("$80");
        }

        // "Annual" is selected: dispplay annual prices
        if ($("#billing-annual").is(":checked")) {
            var period = "annual";
            $("#business-price").text("$16");
            $("#business-plus-price").text("$64");
        }

        // "Hobbyist" is selected, set planId
        if ($("#plan-hobbyist").hasClass("selected")) {
            planId = "";
        }

        // "Business" is selected, set planId
        if ($("#plan-business").hasClass("selected")) {
            planId = period == "monthly" ? "P20" : "Y192";
        }

        // "Business Plus" is selected, set planId
        if ($("#plan-business-plus").hasClass("selected")) {
            planId = period == "monthly" ? "P80" : "Y768";
        }

        $("#plan-id").val(planId);

        if (planId == $("#old-plan-id").val()) {
            $("#change-plan-btn")
                .attr("disabled", "disabled")
                .text("Change Billing Plan");

        } else {
            var caption = "Change Billing Plan";
            if (planId) {
                caption += " And Pay $" + planId.substr(1) + " Now";
            }

            $("#change-plan-btn").removeAttr("disabled").text(caption);
        }
    }
    updateChangePlanForm();

});