The Reach badge for custom checkouts

This guide explains how to add the Reach badge to checkout integrations that support custom code.

To use Reach as a Merchant of Record (MoR), you are required by the card schemes to display the Reach badge. This must be set up in your store's checkout for customers to complete purchases with your brand and Reach.

Select the Reach badge code for your checkout page

Select the appropriate tab for your store from the options below:

If you offer physical products, select the Physical goods tab.
If you offer digital products, select the Digital goods tab.

<div class="reach--disclosure reach--payment--banner reach--payment--banner-light"
     style="
       font-family: Inter, sans-serif;
       font-size: 10px;
       line-height: 14px;
       border-color: #626264;
       color: #626264;
       letter-spacing: 0;
       padding-left: .875rem;
       padding-right: .875rem;
       padding-top: .625rem;
       padding-bottom: .625rem;
       border-radius: .5rem;
       display: flex;
       margin-top: .75rem;
       background-color: #fff;
     ">
  <div class="reach--logo"
       style="
         box-sizing: border-box;
         width: 71px;
         flex: none;
         border-right: 2px solid #626264;
         display: flex;
         align-items: center;
         padding-right: 14px;
       ">
    <img src="https://st.rch.io/logos/reach-verified-wordmark-grey.svg"
         alt="Reach"
         width="55"
         height="10"
         style="
           display: block;
           width: 55px;
           height: 10px;
         ">
  </div>
  <div class="reach--content"
       style="
         padding-left: 13px;
       ">
    <p style="
         font-size: 10px;
         line-height: 1.5;
       ">
      By completing your order, you will check out with our preferred international seller Reach and agree to Reach's
      <a class="reach--inline-link"
         href="https://www.withreach.com/consumer-terms-of-service"
         title="Read Terms of Service"
         style="
           color: #626264;
         ">Terms of Service</a>.
    </p>
  </div>
</div>

<div class="reach--disclosure reach--payment--banner reach--payment--banner-light"
     style="
       font-family: Inter, sans-serif;
       font-size: 10px;
       line-height: 14px;
       border-color: #626264;
       color: #626264;
       letter-spacing: 0;
       padding-left: .875rem;
       padding-right: .875rem;
       padding-top: .625rem;
       padding-bottom: .625rem;
       border-radius: .5rem;
       display: flex;
       margin-top: .75rem;
       background-color: #fff;
     ">
  <div class="reach--logo"
       style="
         box-sizing: border-box;
         width: 71px;
         flex: none;
         border-right: 2px solid #626264;
         display: flex;
         align-items: center;
         padding-right: 14px;
       ">
    <img src="https://st.rch.io/logos/reach-verified-wordmark-grey.svg"
         alt="Reach"
         width="55"
         height="10"
         style="
           display: block;
           width: 55px;
           height: 10px;
         ">
  </div>
  <div class="reach--content"
       style="
         padding-left: 13px;
       ">
    <p style="
         font-size: 10px;
         line-height: 1.5;
       ">
      By completing your order, you will check out with our preferred international seller Reach and agree to Reach's
      <a class="reach--inline-link"
         href="https://www.withreach.com/digital-terms-of-service"
         title="Read Terms of Service"
         style="
           color: #626264;
         ">Terms of Service</a>.
    </p>
  </div>
</div>

Copy the HTML code under the correct tab and insert the badge code into a suitable location on your checkout page.

Verify that it appears correctly at checkout, displaying the Reach logo, terms of service link, and disclaimer text.

Multi-currency sites

If you have a single store that updates the displayed currency using a currency selector or geo-locates based on the customer's IP address, you'll likely want to use our Badge API.

The /badge presents a customized version of the Reach badge to your customers at checkout based on the customers' location. A single response contains everything needed to render the badge: localized disclaimer text, HTML, a logo URL, and the terms-of-service URL for that shopper.

The request parameters determine three dynamic elements of the badge:

Legal entity: the badge includes the Reach legal entity that will function as the merchant of record for the transaction. The entity displayed is determined by the customer's location.
Badge language: the copy of the badge will be presented in the customer's language, depending on the provided Locale value. English is the default value if none is specified.
Theme: the badge is available in light or dark mode for improved visibility on your checkout. The default is light mode if none is specified.

For additional assistance or inquiries

contact your Reach representative or our support team at [email protected].