Tutorials

Embed Chargebee-hosted checkout directly in your web page with Chargebee.js. Create a checkout from a cart, Hosted Pages API URL, or payment link, mount it in an HTML container, and resize it as customers move through checkout.

Learn how Chargebee.js Payment Components work with Advanced Routing. This tutorial covers the routing variables, the client and server code that sets them, and how to handle each payment_intent status when a customer changes their order mid-checkout.

Build a checkout page that collects payments with Chargebee.js Payment Components. This quickstart walks through the sample app code, from loading Chargebee.js and creating a payment intent to mounting the component and creating the subscription.

Migrate an existing Pricify.js (Atomic Pricing) integration to Chargebee.js. Replace the script, container, data attributes, and API calls, then render the pricing table with init() or open().

Embed a Chargebee pricing table in your application or website with Chargebee.js. Add the container div, load and initialize the SDK, create the pricing table object, and render it.

Wire Chargebee Cancel Pages into your application with Chargebee.js. Load and initialize the SDK, create the cancel page object, and either attach a cancel handler or prefetch the page and redirect.

Display Chargebee-hosted in-app offers with Chargebee.js. Load and initialize the SDK, create the Personalized Offers object, and call init() with customer context so matching plays render automatically.

Integrate Apple Pay with Chargebee.js. Complete the gateway and domain prerequisites, mount the Apple Pay button, handle the payment, and create a subscription from the authorized payment intent.

Wire up Chargebee Billing prepaid credit APIs to show balances, grant breakdowns, and recent transactions in your product.

Org-mode billing cookbook: Scalekit organizations to Chargebee customers, hosted checkout, and webhook-backed subscription sync.

Integrate Bancontact with Chargebee.js. Create a payment intent, mount the Bancontact component, handle the redirect, and create a subscription from the authorized payment intent.

Integrate direct debit with Chargebee.js across SEPA, BACS, ACH, BECS, and PAD. Mount the bank account fields, collect the mandate, and create a subscription from the authorized payment intent.

Integrate Google Pay with Chargebee.js through Adyen, Braintree, Stripe, or BlueSnap. Mount the Google Pay button, handle the payment, and create a subscription from the authorized payment intent.

Integrate iDEAL with Chargebee.js. Create a payment intent, mount the iDEAL component, handle the bank redirect, and create a subscription from the authorized payment intent.

Integrate netbanking with Chargebee.js through Razorpay. Create a payment intent, mount the bank selector, handle the redirect, and create a subscription from the authorized payment intent.

Integrate UPI with Chargebee.js through Razorpay. Collect the VPA or show a QR code, poll the payment status, and create a subscription from the authorized payment intent.

Step-by-step guide to integrate Chargebee with Better Auth for customers, subscriptions, hosted checkout, and webhooks.

Configure Avalara ELR with Chargebee for e-invoicing compliance, including setup, routing rules, field mapping, and document workflows.

Get started with Chargebee Growth's Offers APIs as a decisioning and fulfillment layer for acquisition, expansion, and retention.

Show a personalized acquisition offer in-product and complete the upgrade through Chargebee Checkout, using the Offers APIs.

Send retention offers to inactive subscribers using the Offers APIs and your own email.

Show upgrade offers on entitlement-gated features and run your own fulfillment, using the Offers APIs.

Show a personalized upgrade offer when subscribers near usage limits, using Chargebee Growth's Offers APIs.

Migrate an existing Brightback.js (Retention) integration to Chargebee.js. Replace the script, cancel button id, and API calls, then trigger cancel pages with attachCancelHandler() or getPage().

Integrate Boleto with Chargebee.js through Stripe. Collect the customer's tax ID, generate the voucher, track the payment status, and create a subscription from the authorized payment intent.

Integrate Chargebee.js Card Components. Mount the card fields in default or fields mode, style and localize them, tokenize the card, and create a subscription or payment source with the token.

Let a trial customer upgrade to a paid plan through Chargebee-hosted checkout. Create a hosted page for the existing subscription on your server, then open it from the browser with openCheckout, in Ruby, Node.js, Java, Python, and PHP.

Sign up a new customer through Chargebee-hosted checkout. Collect account details on your signup page, create a hosted page on your server, then open it from the browser with openCheckout, in Ruby, Node.js, Java, Python, PHP, jQuery, Vue, Angular, and React.

Integrate Klarna Pay Now with Chargebee.js. Create a payment intent, mount the Klarna component, handle the redirect, and create a subscription from the authorized payment intent.

Integrate Payconiq by Bancontact with Chargebee.js through Adyen. Create a payment intent, render the QR code, handle the payment, and create a subscription from the authorized payment intent.

Integrate stablecoin payments with Chargebee.js through Stripe. Create a payment intent, mount the stablecoin component, handle the payment, and create a subscription from the authorized payment intent.

This tutorial shows you how to build reliable handlers for subscription, customer, and payment events. You create focused handlers for each event type and use event routing to separate concerns in your application

Integrate PayPal with Chargebee.js through Braintree, PayPal Express Checkout, or PayPal Commerce. Mount the PayPal button, handle the payment, and create a subscription from the authorized payment intent.

Integrate SOFORT with Chargebee.js. Create a payment intent, collect the customer's country, handle the bank redirect, and create a subscription from the authorized payment intent.

Integrate Venmo with Chargebee.js through Braintree. Mount the Venmo button, handle the payment, and create a subscription from the authorized payment intent.

Open Chargebee Checkout from a plain HTML link using the drop-in script. Add one script tag and a few data attributes, then prefill customer and shipping details or change the cart at runtime with the Chargebee.js cart and product objects.

Use the new chargebee-init CLI and generate the required App Router handlers in your existing Next.js app to quickly integrate various Chargebee services

Render server-driven pricing tables for existing customers using Chargebee Growth Plays and Chargebee.js.

Integrate online banking Poland (Dotpay) with Chargebee.js. Create a payment intent, mount the bank selector, handle the redirect, and create a subscription from the authorized payment intent.

Learn how to use Chargebee self-serve portal widgets to let your customers manage their subscriptions.

Grant feature access, verify user entitlement, and enable seamless access for your users.

Tailor the pricing table for new and returning users using Chargebee APIs.

Learn how to easily build a no-code pricing table in Wix.

Streamline your Django application payment process with ease by integrating In-app layout of Chargebee Hosted Checkout. Enhance user experience and boost conversions today.

Learn how to easily build a no-code pricing table in Webflow.

Learn how to set up Chargebee webhooks for real-time updates seamlessly. Discover step-by-step instructions to enhance your subscription management with automated notifications.

Learn how to easily build a no-code pricing table in Notion.

Learn how to monetize your APIs easily.

This tutorial guides you through the process of automating subscriptions using QR codes and Chargebee.

Subscription Enrollment in e-commerce allows customers to subscribe to products or services directly from a store’s product detail page (PDP) or promotional product landing page.

The Chargebee Notion Blog Starter Template is a comprehensive and user-friendly resource that empowers you to effortlessly create and manage your own professional blog using Notion.

In this tutorial, you will learn how to integrate iDEAL with Stripe Web Elements, and create a Chargebee subscription along with the payment information collected.

This tutorial aims to help Apple App developers implement a mobile web browser-based checkout in their apps.

Learn how to implement an in-app checkout flow that allows your customers to select addons and apply coupons. The Estimate API is used to dynamically change the order summary that’s shown to the customer.

Learn how to quickly create a test subscription using Chargebee API.

We will address the 3DS flow specifics of creating a subscription in Chargebee using Stripe’s Elements, integrated through Stripe.js and Chargebee APIs. We have also included the example code and Github links to it. This way, you can try out the tutorial with our mock checkout.

In this tutorial, you’ll learn how to create an in-app checkout leveraging Stripe.js tokenization feature. This ensures that sensitive credit card information does not pass through your server, thereby reducing your PCI compliance requirements.

In this tutorial, you’ll learn how to charge customers based on their usage, using Webhooks.

In this tutorial, we will address the specifics of implementing card payments with 3D Secure flow and creating a subscription in Chargebee, using Adyen’s Web Components, integrated through Chargebee.js and Chargebee APIs.

In this tutorial, we will address the flow specifics of processing your payment through 3DS using three-d-secure.js, integrated through hosted-fields.js and Chargebee APIs. We have also included the example code and Github links to it. This way, you can try out the tutorial with our mock checkout.

This tutorial covers how you can deploy an in-app checkout page using Braintree.js to create subscriptions in Chargebee and directly send card information to Braintree. This ensures that sensitive credit card information does not pass through your server, thereby reducing your PCI compliance requirements.

Check if a user of your system is entitled to a feature and provide them access to it.

We will address the 3DS flow specifics of creating a subscription in Chargebee using Checkout.com Frames, integrated through Frames JS and Chargebee APIs. We have also included the example code and Github links to it. This way, you can try out the tutorial with our mock checkout.

This tutorial explains how to pass values for the custom fields when creating a trial subscription.

Create a custom portal with Chargebee APIs, that allows your customers to edit their payment method, billing & shipping information, to access their invoices and subscriptions.

In this tutorial, we will address the specifics of implementing Custom checkout for wallet payments and creating a subscription in Chargebee, using PayPal's BAID (Billing Agreement ID), integrated through Chargebee APIs.

Card and UPI supported Razorpay.js Integration with Chargebee APIs