Embedded Capture Forms (In-App)

Don't have a billing page in your app?

No problem. Adding an embeddable Churn Buster "Capture" form allows users 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, generate a signature on your server.

The Capture modal opens only when the page carries a valid signature for the customer.

• The signature is a hex encoded HMAC-SHA256 of <source>:<customer ID>, keyed with your Churn Buster API key. That's the same key you use for our REST API. For example, the message for a Stripe customer is stripe:cus_123.
• Compute it for each page view and render it into the page. Never put your API key in the browser.
• If source is "braintree", sign braintree:<customer ID> instead.

Ruby

signature = OpenSSL::HMAC.hexdigest("SHA256", ENV["CHURN_BUSTER_API_KEY"], "stripe:#{stripe_customer_id}")

Node

const crypto = require("crypto");
const signature = crypto.createHmac("sha256", process.env.CHURN_BUSTER_API_KEY).update(`stripe:${stripeCustomerId}`).digest("hex");

PHP

$signature = hash_hmac("sha256", "stripe:" . $stripeCustomerId, getenv("CHURN_BUSTER_API_KEY"));

Python

import hashlib, hmac, os
signature = hmac.new(os.environ["CHURN_BUSTER_API_KEY"].encode(), f"stripe:{stripe_customer_id}".encode(), hashlib.sha256).hexdigest()

Next, 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",
      signature: "SIGNATURE_FROM_YOUR_SERVER"
    };
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.async = true;
    script.src = "https://proxy-assets.churnbuster.io/v4/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, available from your API source settings.
• You'll also need to make sure the Stripe/Braintree customer ID is dynamically loaded on the page.
• Replace SIGNATURE_FROM_YOUR_SERVER with the signature your server computed.

Then, 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 three steps are completed, you should be able to click the element to see the Capture modal. You can also self-host a capture page instead.

Troubleshooting

If the modal doesn't open and the browser console shows "Customer is unknown", check that:

• The signature uses the same source and customer ID as ChurnBuster.captureAttributes.
• You're using your live API key in live mode and your test API key in test mode.
• You haven't rotated your API key since you deployed.

FAQ

Q: Is there a way to control the form/iframe placement?

There isn't a supported way to render the Capture form inline.

Q: Are there any patterns or scripts that don't require the click?

Yes! We provide additional ways to control the display of the Capture form. You can use ChurnBuster.showCapture() to programmatically show the modal without a click. We also provide ChurnBuster.hideCapture() to hide the modal.