Stripe Client-Side Checkout

Instructions for Stripe Checkout (client-side)

Emmet Gibney avatar
Written by Emmet Gibney
Updated over a week ago

These instructions are for the client-side version of Stripe Checkout, which runs entirely in the web browser with JavaScript.

Please see these instructions if you're using the server-side version of Stripe Checkout.

Step 1: Connect to Stripe

First connect your Rewardful account to your Stripe account. This is a simple OAuth connection that allows us to receive events from your Stripe account associated with referred customers.

Rewardful integrates with Stripe Checkout by passing the unique click ID (i.e. referral ID) to Stripe as the clientReferenceId parameter when redirecting to checkout. It's important to note that Stripe Checkout will raise an error if clientReferenceId is set to a blank value. You may set this parameter to an arbitrary string if no referral is present. Our getClientReferenceId() function below will automatically do this for you.

Step 2: Install JavaScript Snippet

Paste the following JavaScript snippet into the <head> tag:

<script>(function(w,r){w._rwq=r;w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)}})(window,'rewardful');</script>
<script async src='https://app.rewardful.dev/rw.js' data-rewardful='YOUR_API_KEY'></script>

It must appear on every page of your application and marketing website.

Step 3: Pass referral ID to Stripe

When a visitor arrives on your website through an affiliate link, Rewardful creates a unique referral ID to represent that visitor. This value (a UUID string) must be passed to the stripe.redirectToCheckout() function call as the clientReferenceId parameter.

In the example below we add the clientReferenceId parameter to Rewardful.referral if it is set and call the stripe.redirectToCheckout() function.

var checkoutParams = { 
lineItems: [{ price: price, quantity: 1 }],
mode: mode,
successUrl: 'https://www.example.com/checkout?result=success',
cancelUrl: 'https://www.example.com/checkout/?result=cancel'
}

if (window.Rewardful && window.Rewardful.referral) { checkoutParams.clientReferenceId = window.Rewardful.referral;
}

stripe.redirectToCheckout(checkoutParams);


โ€‹

Did this answer your question?