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_UUID",
      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. You can see that here

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?