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 we are 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

In the Recharge Dashboard, click the wrench icon and select Checkout. In the Styles section, you can make adjustments to the style of your checkout, including changing the font color, updating the logo, and adding CSS.

Change the checkout URL

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

You have the ability to change the checkout URL if you are on the Recharge Pro plan. Reach out to the Recharge support team to request a custom domain. For more information about the Recharge Pro plan, visit Recharge Pro.

Checkout page controls

Require reCAPTCHA verification

You have the option to enable reCAPTCHA verification to prevent spam orders from going through your checkout. 

You can enable reCAPTCHA verification through the Checkout page controls section. This added security layer enhances Recharge's checkout security by telling humans and bots apart.

To enable reCAPTCHA verification:

1. From the Recharge Dashboard, click the wrench icon and select Checkout.
2. In the Checkout page controls section, enable Require reCAPTCHA verification and 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. Click here to learn how to retrieve your Facebook Pixel ID.
2. From the Recharge Dashboard, click the wrench icon and select Checkout.
3. In the Checkout page controls section, fill in the Facebook pixel ID field and 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 then doesn't show the default pixel we provide on the Thank You page.

Thank you page and tracking

You can add any additional scripts you'd like to appear on the Thank You page. You can include code for ROI/conversion tracking and partner tracking systems here.

Visit Variables for email notifications and scripts to see a list of variables available for this section.

1. From your Recharge Dashboard, click the wrench icon and select Checkout.
2. Enter your script for the Thank You page via the Additional content & scripts 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.