Enabling Credits at Checkout for Shopify Plus stores

Credits at Checkout is a feature of Recharge Credits that enables you to have visibility and control over credits at checkout. Enabling credits at checkout lets authenticated customers view and apply their credits during checkout. This feature is only available to Shopify Plus stores.

This guide provides an overview of using credits at checkout, outlines the steps for enabling the feature, and offers considerations for implementation. 

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 currently supported.
  • Credits appear in the Shopify checkout as gift cards in the Order Summary section. The Order Summary section cannot be customized.

• This feature is available through Rewards. Access to Rewards depends on your plan. Check the Loyalty tab in your merchant portal to confirm whether this feature is available in your store.

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 are displayed at checkout for all authenticated customers, including those 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 none of the credits to their order. This provides increased flexibility and empowers customers to use their credits whenever they wish.
• Seamless redemption: Credits at Checkout uses Shopify Gift Cards. Recharge automatically applies credits at checkout and debits the ledger, without the customer needing to copy and paste their gift card redemption code.

Enable Credits at Checkout

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

1. In your Shopify admin, click Settings, then select Checkout.
2. Click Customize on the intended checkout profile, or go to the Checkout Editor to create a new profile.
   
3. In the Checkout Editor, select Add 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 where you add Recharge Credits in checkout is the same on 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.

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 completes checkout and can view their available credit balance in the Order Summary section.
   • If you enabled Recharge Credits in another checkout area, it will display the location where you configured 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 appears as a line item in the Order Summary section.
   
   • 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 Manage credits and then View credits.
4. To view history and notes associated with a specific credit, select the Credit ID or click View history using the vertical dot 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 control when customers can use store credit at checkout.

1. In your Shopify admin, go to Settings and select Checkout.

2. Under Configurations, click Customize next to the checkout profile you want to update.

3. In the Checkout editor, click Add block under Main, then select Recharge Credits.

Step 2 - Update the Recharge credits app block

You can update the Recharge Credits app block to match your brand and control how credits display at checkout.

• Toggle Include block in Shop Pay to enable or disable the credits block in Shop Pay checkout.

• Enter a custom name for your credits.

• Toggle Hide logged out message to control whether logged-out customers see a login prompt. By default, this message displays:
  “Returning customer? Log in to view and apply {{creditsName}}.”

• Enter a message under Pay with store credits message to encourage customers to use their credit. By default, this message displays:
  “You have {{formattedAmount}} in {{creditsName}}.”

• Enter button text under Pay with store credits button to customize the call to action. By default, the button displays:
  “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 checkout at any time.

Considerations

Consider the following when offering Credits at checkout. For a full list of considerations, see Credits.