The BigCommerce Checkout Integration (BCI), allows customers to purchase subscription products directly from the native BigCommerce checkout page instead of going through the Recharge checkout. This allows merchants to streamline their stores’ checkout processes and provide customers with a seamless subscription checkout experience.

This article provides guidance for installation and store configuration.

Install Recharge

To start using the BigCommerce Checkout Integration, please connect with a Recharge rep by filling out the form on the Recharge subscriptions on BigCommerce page. 

Add a subscription product

Subscriptions are the heart of Recharge, and subscription rules direct how your store’s subscriptions will work. Subscription products require parameters to determine the length of the subscription, how frequently the product is delivered, reduced pricing, and more.

• Determine the type of subscription you will offer.
• Setup your product subscription by selecting your products, setting the subscription type, adding an incentive discount, and more.
• Customize your subscription plan by setting a charge day or a cut-off date.

Set up your payment processor

You must use Braintree, Stripe, or Authorize.net as your payment processor on the BigCommerce Checkout Integration. Recharge and BigCommerce must use the same payment processor as your BigCommerce store and you must enable your payment processor in both Recharge and BigCommerce.

Set up Braintree

Use the following steps to set up Braintree:

1. To set up Braintree on BigCommerce, see BigCommerce’s Braintree guide.
2. In the Recharge merchant portal, click Settings and select Payment. Choose Braintree/PayPal from the dropdown menu.
   
3. Enter your Braintree Merchant ID, Public Key, and Private Key into their respective fields. If you need help finding your keys, see Braintree's guide on Important gateway credentials. 

Optional - CVV Verification

The CVV field on the checkout payment form is displayed or hidden based on the CVV Rules configuration in your Braintree settings. CVV Rules add enhanced fraud protection by requiring customers to enter a CVV with their payment method. 

We recommend configuring CVV Verification. If the CVV Not Provided option is selected, the payment form will render the CVV field and reject transactions if a CVV is not provided. If no CVV Rules are configured, the field will be hidden and all transactions will process without a CVV.

Use the following steps to configure your CVV Rules to require CVVs: 

1. From your Braintree account, open Settings and click Fraud Management.
2. Configure your CVV Rules and click Save.

Set up Stripe

Use the following steps to set up Stripe:

1. To set up Stripe on BigCommerce, see BigCommerce’s Stripe guide.
2. In the Recharge merchant portal, click Settings and select Payment. Choose Stripe from the dropdown menu.
3. Click Connect with Stripe and complete the prompted steps. 

Set up Authorize.net

Follow the steps outlined in Connecting to Authorize.net.  

Optional - Set up accelerated payment methods 

You may want to set up accelerated payment methods such as PayPal, Venmo, Apple Pay, etc. You must enable your desired accelerated payment methods in either Braintree or Stripe first. After you have enabled your accelerated payment methods in your payment processor settings, you must enable your accelerated payment methods in BigCommerce. This allows for storefront-level control over all payment methods.

Refer to the following steps to enable accelerated payment methods:

1. From your payment processor's dashboard, enable each of the accelerated payment methods you would like to use.
   • See Braintree’s guides for enabling accelerated payment methods for more details.
   • See Stripe's guides for adding payment methods for more details. 
2. From the BigCommerce admin, enable the accelerated payment methods you would like to use in your payment processor settings. See BigCommerce’s guides for enabling accelerated payment methods for more details.

Note the following about Apple Pay and Google Pay:

• Apple Pay utilizes the primary payment processor for your BigCommerce store. For example, if your store uses both Braintree and Adyen with Braintree being the primary payment processor, Apple Pay will use Braintree to process payments. This same logic applies to Stripe. 
• Google Pay must be connected to your Braintree or Stripe account. If you have already set up your payment processor for your store and enabled Google Pay in your payment processor settings, no additional steps are required.

Configure shipping and tax settings

You must set up shipping and taxes in both BigCommerce and Recharge. BigCommerce shipping and tax settings are used for the initial checkout order and Recharge’s shipping and tax settings are used for all recurring orders. Refer to the following steps to set up shipping and tax settings: 

1. See BigCommerce’s Shipping Quickstart Guide to set up shipping in BigCommerce.
2. See BigCommerce's Taxes Quickstart Guide to set up taxes in BigCommerce. 
3. See Setting up shipping for BigCommerce to configure your Recharge shipping settings.
4. See Setting up taxes in Recharge to configure your Recharge tax settings.

If you use a third-party shipping or tax integration, such as ShipperHQ or Avalara, ensure the integration is connected to both BigCommerce and Recharge.

Configure additional store settings

Legal Settings

From the Recharge merchant portal, click Settings and select Legal.

On the Legal settings page, you can update Checkout and Email subscription terms. Click Create from template to use the standard legal templates, or use the text boxes to add your own legal terms.

Notifications

Notification emails are the primary means of communication between your store and your customer base. Customers receive your notification emails when they order subscription products, modify future orders, or cancel subscriptions.

From the Recharge merchant portal, click Settings and select Notifications. On the Notifications settings page, you can configure, customize, and control your Notifications. See Notifications for more information. 

Set up address validation

BigCommerce does not validate addresses at checkout. To ensure consistent address validation across BigCommerce and Recharge, an address validation tool is required. Address validation prevents unforeseen issues when creating recurring orders on Recharge. We recommend using Addrexx from the BigCommerce App Marketplace.

Refer to the following steps to set up address validation:

1. Install Addrexx from the BigCommerce App Marketplace.
2. After installation, Addrexx sends an email with instructions for connecting the integration to your store and checkout page.
3. After going through the setup instructions, ensure the following settings are enabled in Addrexx:
   • City Field is Locked From Entry
   • State Field is Locked From Entry

Require accounts at checkout

To use the BigCommerce Checkout Integration, you must require accounts at checkout. This ensures subscription customers are created properly during checkout. Refer to the following steps to enable this setting: 

1. From the BigCommerce admin, click Advanced Settings and select Checkout.
2. Enable the following settings:
   • Customers are not required to have an account to check out, but automatically create one after ordering.
   • Prompt existing accounts to sign in, but still allow them to check out as guests.

Set your store theme

Most BigCommerce themes are compatible with the BigCommerce Checkout Integration. To ensure proper functionality, you must use a supported store theme. For a list of compatible themes, see Supported BigCommerce themes.

Preview the customer experience

Publish the subscription widget

Before previewing your subscription experience, you must publish the Recharge subscription widget.

1. Click Storefront in your merchant portal and select Subscription widget.
2. Under Visibility, in the Widget status click Publish the subscription widget.
   
3. In the pop-up, click Save.
4. The Widget status will update to Published:
   

See Understanding the Recharge subscription widget for more information on subscription widget settings.

Test the unified checkout

We recommend testing the checkout to ensure the BigCommerce Checkout Integration works as expected on your store. Both Braintree and Stripe have test modes that allow you to process test transactions with a test payment method.

Enabling test mode for Braintree

To test with Braintree, you must create a separate Braintree sandbox account. Once you have created this account, you must connect your sandbox account to BigCommerce and enable sandbox mode in Recharge. Use the following steps to enable test mode for Braintree: 

1. Create a separate Braintree sandbox account. 
2. Contact BigCommerce support to request access to Braintree Sandbox mode for your BigCommerce store. 
3. Once the BigCommerce support team has enabled Braintree Sandbox mode, log in to your Braintree Sandbox account and connect the account to your BigCommerce store. See Braintree setup for more details. 
4. From the Recharge merchant portal, click Settings and select Payment.
5. Select Braintree/PayPal as your payment processor and fill out the required ID and Key fields.
6. Check the Use Braintree sandbox mode checkbox to enable test mode.
   
7. Click Save to complete the setup. 

Enabling test mode for Stripe

To test with Stripe, enable Test mode in your production Stripe account. 

Place a test order

Once you have enabled test mode for Braintree and Stripe, use the following steps to test the checkout: 

1. Create a test product in BigCommerce.

2. Add the product to Recharge and configure the product’s subscription rules.

3. Locate the test product on your storefront and use the subscription widget to add the subscription product to your cart.

4. Navigate through the BigCommerce checkout and use a test card to place the test order. 

   • For a list of Braintree test cards, see Braintree's Testing documentation.
   • For Stripe test cards, see Stripe's Testing documentation.

5. Locate the order in the BigCommerce admin to view the initial order details.

6. From the Recharge merchant portal, click Orders and locate your test order.

7. Click on the test order and confirm the customer, address, and recurring order details are correct.