Getting started with the Recharge Checkout on BigCommerce integration

The Recharge integration with BigCommerce lets you offer subscriptions and recurring billing products on your store. Leverage the robust functionality of the BigCommerce platform and offer customers new ways to purchase their favorite items.

The Recharge integration with BigCommerce lets you offer subscriptions and recurring billing products on your store. Leverage the robust functionality of the BigCommerce platform and offer customers new ways to purchase their favorite items. This guide covers how the Recharge Checkout on BigCommerce integration works.

πŸ“˜

Platform:

  • Recharge Checkout on BigCommerce

Overview

The BigCommerce integration with Recharge works in the following way:

  1. Upon install, the Recharge integration inserts two scripts, the Product Data Script and the Recharge app script into your store's Script Manager (Storefront > Script Manager in the Control Panel).
  2. When you load the storefront, the Recharge app script inserts CSS Classes into the theme, and knows to render certain content in these key places.
  3. Redirects customers to the correct checkout, either Recharge-hosted checkout or BigCommerce checkout depending on items in cart.

Developing on BigCommerce

Take a look at Customizing the Recharge integration for in-depth guides on customizing the subscription widget and other aspects of the app.

🚧

Note:

Customizations contained in these guides are outside of the scope of Recharge Support. It is recommended that you work with a developer to implement any advanced functionality.


Products

Recharge syncs product information from your BigCommerce store in real-time. Your BigCommerce catalog is the source of truth for Recharge. That means when you make changes to an item in BigCommerce, those changes will be reflected in the Recharge merchant portal (found under Apps > Recharge).


Scripts

The BigCommerce integration a script to pull Recharge functionality into your store. This script makes product subscription information available, and then let customers purchase the recurring product.

Recharge automatically installs the script in Storefront > Script Manager.

Product Data script

The product data script contains information about all the products in a BigCommerce store and subscription information (if present) for each item. This JSON data also includes:

  • product ID
  • weight
  • discount information

The data in this script lets Recharge then present customers with recurring purchase options for products.

This script is labeled BC-ReCharge-Data-Script.

Recharge App script

The Recharge app script pulls Recharge functionality into the BigCommerce front-end to add subscription products to cart and let customers purchase the items.

One of its main purposes is making the RCAInterface available on the front end. This JSON object contains functions that do many things including checking whether a subscription item is in the cart and moving a customer to checkout.

This script is labeled BC-Recharge-Script.

For more information about accessing the data made available by these scripts on the front end, see Available front-end objects.

Localization

Additionally, you can add a localization script to your BigCommerce store to translate the front end to other languages or simply change the wording relating to Recharge subscription features. For more information, see Localize subscription widget text.


Front end

The Recharge integration with BigCommerce works by injecting HTML elements onto BigCommerce pages, and populating Recharge content. The main component users interact with is the Recharge subscription widget. The below example shows the widget populated on a product page. This is the out-of-the-box functionality on supported themes.


Additional Resources

Before you begin developing on BigCommerce, we recommend you review the following resources to complete setup and familiarize yourself with the integration:


Need Help? Contact Us