Customizing the Recharge checkout

If a customer has at least one recurring item in their cart, they are directed through the Recharge checkout. Though the checkout is designed to mimic the Shopify or BigCommerce checkout experience for your customers, you can make further customizations and setting adjustments directly in your Recharge checkout settings. This guide provides an overview of the Recharge checkout settings page and changes you can make.

Before you start

The checkout is where your customer enters their personal information like credit card details and shipping address. The Recharge checkout is a secure environment and is PCI compliant. In order to provide the highest level of security, broad changes and edits to the checkout are not allowed.

Customize the style of your checkout

1. Click Storefront in your merchant portal and select Checkout. 
2. Enter your customizations in the Styles section. 
   1. Enter your Logo or Favicon URLs. 
   2. Customize the colors and font for your button, links, and more. 
   3. Add custom CSS in the CSS editor box. 
3. Click Save. 

Change the checkout URL

When the cart page has at least one subscription product, the order is processed by the Recharge checkout and this will be reflected in the URL as checkout.rechargeapps.com.

If you are on the Recharge Pro plan, you can change the checkout URL. Refer to the guide Setting up a custom checkout domain.

Checkout page controls

Require reCAPTCHA verification

You have the option to enable reCAPTCHA verification to prevent spam orders from going through your checkout. This added security layer enhances Recharge's checkout security by telling humans and bots apart.

To enable reCAPTCHA verification:

1. Click Storefront in your merchant portal and select Checkout.
2. In the Checkout page controls section, click the check box to Require reCAPTCHA verification.
3. Click Save. 

Once enabled, a mandatory reCAPTCHA checkbox will appear at the bottom of the first checkout page.

Facebook Pixel tracking

You can add your Facebook pixel ID in the Checkout page controls section. This triggers on the Thank You page after checkout has been completed.

The Facebook Pixel ID tracks the InitiateCheckout and the purchase events when a customer enters the checkout page and completes the purchase.

To add your own Facebook Pixel ID:

1. Locate your Facebook Pixel ID. Refer to Facebook's guide to retrieve your Facebook Pixel ID.
2. Click Storefront in your merchant portal and select Checkout.
3. In the Checkout page controls section, fill in the Facebook pixel ID field
4. Click Save.

It is important to note that if you enter the Facebook ID in the Recharge settings and also put a Facebook tracking code in the Additional & scripts and trackers section, the Recharge system automatically detects it and does not show the default pixel we provide on the Thank You page.

Thank you page and tracking

You can add any additional scripts you would like to appear on the Thank You page, including code for ROI/conversion tracking and partner tracking systems. Visit Variables for email notifications and scripts to see a list of variables available for this section.

1. Click Storefront in your merchant portal and select Checkout.
2. Enter your script for the Thank You page via the Thank you page text box and click Save.
3. Make sure you preview the script to ensure everything is functioning properly by clicking Preview in the top right of the text box.

First-time page load tracking

You may need to track pixels based only on the first time the checkout page is loaded. You will need to surround the code you include with the following if statement:

{% if first_time_load %} [YOUR CODE HERE] {% endif %}

This will ensure that customers who refresh the page are not tracked more than once.

If you're debugging code within the first_time_load if statement, append &show_scripts=true to the Thank You page on checkout URL to force the scripts to load.

FAQ

Additional Resources

You can find more detailed information and recipes for customizing the Recharge checkout in the Developer Docs.