Credits at Checkout is a feature of Recharge Credits that enables you to have visibility and control over credits at checkout, improving customer experience and encouraging brand loyalty.

This guide provides an overview of using credits at checkout and steps for enabling the feature. For a full list of considerations, see Credits. 

Before you start

The Credits at Checkout feature utilizes Shopify Checkout UI extensions to display credits at checkout. Note the following Shopify limitations for Shopify Checkout UI extensions with this feature:

• This feature is only available for Shopify Plus stores.
• Script tags, CSS modifications, and DOM/Cookies customizations are not supported.
• Shopify Checkout UI extensions are incompatible with Shopify’s checkout.liquid file. Stores must use either checkout.liquid or Checkout UI extensions.
• Links, including login links, can't redirect customers to checkout sessions using Shopify Checkout UI extensions.

The Credits at Checkout feature uses Shopify Gift Cards as a redemption mechanism for Credits in the Shopify checkout. Note the following Shopify limitations for Shopify Gift Cards with this feature:

• Collection and purchase type restrictions are not supported at this time.
• Credits appear in the Shopify checkout as gift cards in the Order Summary section. The Order Summary section cannot be customized.

How it works

The Credits at Checkout feature aims to provide visibility and control over credits at checkout, improving the customer experience and encouraging brand loyalty. The feature supports the following capabilities:

• Customer authentication - Customers must authenticate to view and apply credits at checkout. Credit balances display at checkout for all authenticated customers, including customers without a credit balance. The visibility of credits at checkout incentivizes new customers to purchase products that offer credits.
• Credit accessibility - By displaying a customer’s credit balance at checkout, the customer is informed of their available credits and how many credits they can apply to their order.
• Flexible Credit application - Customers can apply all or no credits to their order. This provides increased flexibility and empowers customers to use their credits whenever they wish.
• Seamless redemption - Credits at Checkout utilizes Shopify Gift Cards. Recharge automatically applies credits to checkout and debits the ledger without the need for the customer to copy and paste their gift card redemption code.

Enable Credits at Checkout

Credits at Checkout is automatically available when Credits are enabled. Eligible merchants can access and enable the checkout feature using the Shopify Checkout Editor:

1. From your Shopify admin, click Settings and select Checkout.
2. Click Customize on the intended checkout profile or Go to Checkout Editor if you need to create a new profile.
   
3. In the Checkout Editor, select Add app block and select Recharge Credits.
4. Optional - Enter a personalized name for Credits. You can modify this later at any time.
5. Drag Recharge Credits from the left panel to the desired position on the checkout page. The location you add Recharge Credits to in checkout is the same for desktop and mobile devices. You can add Recharge Credits multiple times to appear in different positions simultaneously. The following areas can be used to display Recharge Credits:
   • Order summary - Recommended
   • Information page
   • Shipping page
   • Payment page
6. Click Save.

Tip: If the Recharge Credits app does not immediately display in the Checkout Editor, reposition the Recharge Credits app on the page.

After Checkout Credits are enabled using the Shopify Checkout Editor, Recharge Credits will be visible to all customers going through checkout, even if Credits is not enabled in Recharge. If Credits is not enabled, all customers will see a $0 balance.

View and apply Checkout Credits

Once enabled, authenticated customers can view and apply Credits at checkout. Customers who are not authenticated will be prompted to log in to view and apply credits at checkout.

The Credits Checkout experience consists of the following steps:

1. The customer goes through checkout and can view their available credit balance in the Order Summary section of checkout.
   • If you enabled Recharge Credits on another checkout area, it will display where you chose to configure Recharge Credits. 
2. If customers want to use their Credits, they can click Apply x in Store Credits—the amount displayed in the maximum amount that can be applied from the customer’s available credit balance.
   
3. After the customer chooses to use their credits, credits are automatically applied as a Shopify Gift Card. This gift card displays in the Order Summary section as a line item.
   
   
   • Credits can be removed from checkout using the X icon on the gift card line item.
4. The customer proceeds through checkout and completes their purchase using their available credits.

View redeemed Checkout Credits

You can view Credits redeemed at checkout using the Recharge merchant portal:

1. Click Customers in the merchant portal and select Customers from the dropdown.
2. Search for and select the customer.
3. In the Credits section of the customer details page, click View credits.
4. To view history and notes associated with a specific credit, select the Credit ID or click View history using the kebab menu.
5. Review the credit transaction details by clicking the icon next to the intended transaction. 
   
6. In the notes section of the transaction details, if Credits were used at checkout, the credit transaction details note displays Redeemed to Shopify gift card ending in xxxx.
   

Restrict credit usage at the checkout

Although there are limited options for controlling credit usage at checkout, you can restrict how customers apply credits by configuring your settings to allow credits only for orders containing subscription products.

Step 1 - Configure your Shopify settings

Update your Shopify settings to restrict when customers can use their store credit:

1. Click Settings in your Shopify admin and select Checkout.
2. Click Customize on the intended checkout profile listed under Configurations.
3. In the Checkout Editor, click Add app block and select Recharge Credits.

Step 2 - Update the Recharge credits app block

You can update several settings to match the Recharge credits app block to your brand:

• Enter a personalized name for your credits.
• Toggle True or False under Hide logged out message to choose whether a message should display to customers if they’re logged out of their account. The default message that shows here is “Returning customer? Log in to view and apply {{creditsName}}”.
• Enter a message in the text box under Pay with store credits message to encourage customers to pay with their credit. The default message that shows herer is “You have {{formattedAmount}} in {{creditsName}}”.
• Enter a message in the text box under Pay with store credits button to add a button that makes it easy for customers to pay with their credit. The default message that shows here is “Apply {{formattedAmount}} in {{creditsName}}”.

Step 3 - Restrict credit usage to subscription orders only

Update the settings on the Recharge Credits editor to restrict customers’ credit usage:

1. Toggle the Subscription item required option to True. This ensures customers must purchase a subscription product to be able to apply their credit to their order.
2. Update the Subscription item required message to match your brand and educate the customer on any credit restrictions. The default message customers see is “Unfortunately, you cannot use your {{formattedAmount}} in {{creditsName}} on this purchase as you do not have a subscription item”, however, you can change the message for brand alignment.

Step 4 - Place the app block

You can place the app block on the checkout page in your preferred location:

1. Click the < left arrow at the top of the editor to access the Checkout Editor.
2. Drag the Recharge credits app block in the left panel to the preferred position on the checkout page. You can add the Recharge Credits app block multiple times to appear in multiple positions simultaneously.
3. Click Save.

Remove the app block

Click on the Recharge Credits app block in the Checkout Editor and select Remove app block to prevent customers from using credits at the checkout at any time.

Considerations

Consider the following when offering Credits at the checkout: