Don't have a billing page in your app? 

No problem. Adding an embeddable Churn Buster "Capture" form to collect payment info is easy. 

With this embed, users will be able to click a button to pop up a form, enter payment information, and send it securely through to your payment processor (Stripe or Braintree).

Instructions

First, add the embed script to your page. We recommend adding this right before the closing body  tag.

Example:

<script type="text/javascript">
  (function(account, customer) {
    ChurnBuster = window.churnBuster || {};
    ChurnBuster.captureAttributes = {
      account: "ACCOUNT_ID", // Contact us if you don't have this.
      customer: "STRIPE_CUSTOMER_ID",
      source: "stripe"
    };
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.async = true;
    script.src = "https://proxy-assets.churnbuster.io/v3/scripts.js";
    var insert = document.getElementsByTagName("script")[0];
    insert.parentNode.insertBefore(script, insert);
  })();
</script>

Note: you will need to provide your Churn Buster account ID (from your dashboard, paste “/live/sources/api” after your company account slug), and customer information for the payment processor.

Next, to open the modal, add a data-capture  attribute to any clickable element on the page.

Example:

<button data-capture>Update your payment information</button>

When these two steps are completed, you'll be able to click the element to see the Capture modal. 

Let us know if you have any questions along the way!

Did this answer your question?