Using the Recharge Checkout with BigCommerce
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:
- 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).
- 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.
- 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 Tools & 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.
Locations
The following articles will explain the following for each area of the integration for BigCommerce:
- CSS classes needed to pull in Recharge content to the front end
- Data generated through these CSS elements
- Functionality these elements provide
Recharge injects content into the following two key places in a BigCommerce theme listed below. If you want to add functionality, or are missing functionality in a custom theme, see the following articles to learn how to create this functionality with CSS classes:
Note:
Recharge pushes updates to the front end component of the BigCommerce integration often. These updates may be incompatible with your custom theme code. Any breaking changes that we make are likely to mainly affect styling only.
Backing up your theme regularly as you develop is one way to insure you can always revert your theme to a prior state. For best practices on doing this, see Backing Up Your Store.
Additional Resources
Before you begin developing on BigCommerce, we recommend you review the following resources to complete setup and familiarize yourself with the integration:
Updated 17 days ago