More Tutorials

Stablecoin integration with Chargebee.js

Payment Method Helper
Chargebee.js
Payments

Stablecoins are cryptocurrencies whose value is pegged to a stable real-world asset, most commonly a fiat currency like USD or EUR. Because their price remains relatively stable (unlike typical cryptocurrencies), they reduce volatility and make digital value transfer more predictable.

This tutorial shows you how to integrate Chargebee.js with Stablecoin on your website and create a subscription after checkout.

Supported gateways

Stablecoin is supported by the following gateways in Chargebee:

Prerequisites

Before you begin, follow these steps:

  1. Complete the gateway configuration prerequisites.
  2. Configure Stripe configuration in Chargebee.
  3. Configure Smart routing to select Stablecoin for USD currency.

Set up Chargebee.js

Include the Chargebee.js script on your page and initialize a Chargebee instance before you start. For the script tag, the Chargebee.init options, and the tearDown() caveat, see Set up Chargebee.js.

Create a payment intent

Create the payment intent on your server using the Create a payment intent API, then return it to the client. The payment method handler uses the payment intent internally to perform authorization.

Call your backend to fetch the payment intent (client)

function createPaymentIntent() {
  return fetch('/payment-intents', {
    method: 'POST',
    headers: {
       "Content-Type": "application/json"
    },
    body: JSON.stringify({
      amount: 500,
      currency_code: 'USD',
      payment_method_type: 'stablecoin'
    })
  }).then(function(response) {
    return response.json();
  }).then(function(responseJson) {
    return responseJson.payment_intent;
  });
}

Call Chargebee API to create a payment intent (server)

Create a payment intent using the Create Payment Intent API:

curl https://{site}.chargebee.com/api/v2/payment_intents \
  -u {fullaccess_api_key}: \
  -d amount=500 \
  -d currency_code=USD \
  -d payment_method_type=stablecoin

Load the payment method and start the payment flow

Load Stablecoin payment method (client)

Load the Stablecoin integration using the load() method:

chargebee.load('stablecoin');

Start the payment flow (client)

Call chargebee.handlePayment() with stablecoin as the payment method type to handle Stablecoin payments.

The function opens a pop-up where users complete the payment. After successful authorization, the payment intent status changes to authorized, the pop-up closes automatically, and the promise resolves.

chargebee.load("stablecoin").then(() => {
	chargebee.handlePayment("stablecoin", {
		paymentIntent: () => {
			return createPaymentIntent();
		}
	}).then(intent => {
		// Payment intent is `authorized`.
		return createSubscription(intent.id);
	}).catch(err => {
		console.error('Payment failed:', err);
	});
});

Create a subscription

Call your backend to create a subscription (client)

After the payment intent is authorized, call your backend to create a subscription using the payment intent ID and subscription details:

function createSubscription(paymentIntentId) {
	return fetch('/subscriptions', {
		method: 'POST',
		headers: {
			"Content-Type": "application/json"
		},
		body: JSON.stringify({
			paymentIntentId: paymentIntentId,
			plan_id: 'pro_plan',
			plan_quantity: 1,
			billingAddress: {
				// Add billing address details.
			},
			customer: {
				// Add customer details if the subscription is to be created for an existing customer.
			}
		})
	}).then(response => response.json());
}

Create a subscription (server)

Pass the ID of the successfully authorized payment_intent to Chargebee’s Create a subscription API.

curl  https://{site}.chargebee.com/api/v2/customers/__test__8asz8Ru9WhHOJO/subscription_for_items \
     -X POST  \
     -u {site_api_key}:\
     -d payment_intent[id]="{payment_intent_id}" \
     -d subscription_items[item_price_id][0]="pro_plan" \
     -d subscription_items[quantity][0]=1
Was this tutorial helpful ?
Need more help?

We're always happy to help you with any questions you might have! Click here to reach out to us.