Installation and store configuration
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.
- BigCommerce Checkout Integration
Step 1 - Install Recharge
To start using the BigCommerce Checkout Integration, you must install Recharge from the BigCommerce App Marketplace. When you first download Recharge, by default, your store uses the Recharge Checkout on BigCommerce platform. You must reach out to the Recharge support team to request an upgrade to the unified checkout. Use the following steps to get started:
- Install Recharge from the BigCommerce App Marketplace.
- Complete Recharge's in-app onboarding experience to set up Recharge.
- Fill out the opt-in form to request an upgrade to the BigCommerce Checkout Integration.
- Once the Product team has finished the manual installation of BCI for your store, they will notify you that you can continue setting up the integration.
Step 2 - Set up your payment processor
You must use Braintree or Stripe 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:
- To set up Stripe on BigCommerce, see either BigCommerce’s Braintree guide.
- In the Recharge merchant portal, click Settings and select Payment. Choose Braintree/PayPal from the dropdown menu.
- 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:
- From your Braintree account, open Settings and click Fraud Management.
- Configure your CVV Rules and click Save.
Set up Stripe
Use the following steps to set up Stripe:
- To set up Stripe on BigCommerce, see either BigCommerce’s Stripe guide.
- In the Recharge merchant portal, click Settings and select Payment. Choose Stripe from the dropdown menu.
- Click Connect with Stripe and complete the prompted steps.
Optional - Set up accelerated payment methods
Note: Accelerated payment methods are supported for one-time purchases, but at this time are not supported for subscription purchases. Future support for accelerated payment methods is on the product roadmap. Recharge can hide accelerated payment methods for subscription orders if you choose to use accelerated payment methods for one-time purchases. Reach out to the Recharge support team for assistance hiding these options.
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:
- 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.
- 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.
Step 3 - 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:
- See BigCommerce’s Shipping Quickstart Guide to set up shipping in BigCommerce.
- See BigCommerce's Taxes Quickstart Guide to set up taxes in BigCommerce.
- See Setting up shipping for BigCommerce to configure your Recharge shipping settings.
- 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.
Step 4 - 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:
- Install Addrexx from the BigCommerce App Marketplace.
- After installation, Addrexx sends an email with instructions for connecting the integration to your store and checkout page.
- 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
Step 5 - 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:
- From the BigCommerce admin, click Advanced Settings and select Checkout.
- 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.
Step 6 - Test the unified checkout
To ensure the BigCommerce Checkout Integration works as expected on your store, you must test the checkout. 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:
- Create a separate Braintree sandbox account.
- Contact BigCommerce support to request access to Braintree Sandbox mode for your BigCommerce store.
- 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.
- From the Recharge merchant portal, click Settings and select Payment.
- Select Braintree/PayPal as your payment processor and fill out the required ID and Key fields.
- Check the Use Braintree sandbox mode checkbox to enable test mode.
- 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:
Create a test product in BigCommerce.
Add the product to Recharge and configure the product’s subscription rules.
Locate the test product on your storefront and use the subscription widget to add the subscription product to your cart.
Navigate through the BigCommerce checkout and use a test card to place the test order.
Locate the order in the BigCommerce admin to view the initial order details.
From the Recharge merchant portal, click Orders and locate your test order.
Click on the test order and confirm the customer, address, and recurring order details are correct.
Didn’t find what you’re looking for?Contact us