Skip to content
On this page

Recharge

Integration benefits

  • The Order Protection widget integrates with Recharge and your Shopify store, enhancing the subscription order experience for users with all relevant information in one place.
  • The widget addition to the cart and order subscription emails simplifies the claim-filing process for users reducing friction and eliminating the need for manual navigation to the Order Protection website.

Setup Steps

Getting the Recharge API Token

  1. Access the Recharge admin page: https://admin.rechargeapps.com/admin/login

  2. Go to Apps > API Tokens in the Sidebar

  3. Click "Create an API Token" in the top right button

  4. Choose a Token nickname and set your contact e-mail.

  5. For the permissions, select the following:

  6. Orders: Read access

  7. Subscriptions Read and Write access

  8. Customers: Read access

  9. Done! Now you have an API token for OrderProtection

recharge api tokens

Integrating Recharge within the Order Protection Platform

For this step, speak with your Onboarding and Implementation manager to properly set up the API token and applicable webhooks. We are working on a Recharge integration app to make this onboarding process more seamless in the future.

Install Recharge Integration Manager on Shopify

  1. In the left navigation, go to Sales Channels and select Online Store

shopify online store

  1. Within the Theme settings, select Edit code

edit theme code settings

  1. Open the theme.liquid file and insert the following code in the header contents:

theme code order protection

html
<!-- OrderProtection Recharge Manager -->
<link rel="stylesheet" href="https://cdn.orderprotection.com/widget/recharge/latest/style.css">
<script src="https://cdn.orderprotection.com/widget/recharge/latest/orderprotection.js"></script>
<script defer>
  if (window.location.href.includes('tools/recurring/portal')) {
    window.RechargeOPWidget = OrderProtection.createOrderProtectionWidget({
      store_url: 'op-recharge-store.myshopify.com',
      locations: [{
        sibling: {
          position: 'after',
          selector: '[data-recharge-subscription-actions]',
          styles: { 'border-top': 'solid 1px #f0f0f0', 'margin-top': '18px' }
        }
      }]
    })
    const rechargeWidgetInterval = setInterval(() => {
      if (RechargeOPWidget.cart.isReady()) {
        clearInterval(rechargeWidgetInterval);
        RechargeOPWidget.cart.setup();
        RechargeOPWidget.init();
      }
    }, 500);
  }
</script>
<!-- -------------------------------- -->

Install Recharge Notification on Email

  1. Navigate to Settings > Notifications > Customer Notifications

email customer notifications

  1. In the Order Processing section, click Order confirmation. On the email tab, select edit code.

order confirmation, edit code

  1. Add the following code to the Order Confirmation template in the email body (HTML) after all contents and before the footer (<table class= ‘row footer’>).
html
<!-- Order Protection Subscription E-mail Confirmation -->
{% assign redirect_path = 'customer_portal%2Fsubscriptions' %}
{% assign tools_path = 'tools/recurring/login' %}
{% assign subscription_url = 'https://' | append: shop.domain | append: '/' | append: tools_path | append: '?redirect=' | append: redirect_path %}

{% if customer.tags contains 'Active Subscriber' %}
  {% assign order_protection_found = false %}
  {% for line_item in line_items %}
    {% if line_item.title contains 'Order Protection' %}
      {% assign order_protection_found = true %}
      {% break %}
    {% endif %}
  {% endfor %}
  {% unless order_protection_found %}
    <table class="row content">
      <tr>
        <td class="content__cell">
          <center>
            <table class="container">
              <tr>
                <td>
                  <h2>Your order isn't protected</h2>
                  <p>Currently, your order is not protected for shipping issues such as loss, theft, and more. Add Order Protection to your subscription now.</p>
                  <table class="row actions">
                  <tr>
                    <td class="empty-line">&nbsp;</td>
                  </tr>
                  <tr>
                    <td class="actions__cell">
                      <table class="button main-action-cell">
                        <tr>
                          <td class="button__cell"><a href="{{ subscription_url }}" class="button__text">Add Order Protection</a></td>
                        </tr>
                      </table>
                    </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </center>
        </td>
      </tr>
    </table>
  {% else %}
    <table class="row content">
      <tr>
        <td class="content__cell">
          <center>
            <table class="container">
              <tr>
                <td>
                  <h2>Issues with your order?</h2>
                  <p>Luckily, you purchased Order Protection! Submit a claim to quickly resolve lost, damaged, stolen, or wrong item issues with your order. Once approved, you will receive a refund or reshipment at no additional cost.</p>
                  <table class="row actions">
                  <tr>
                    <td class="empty-line">&nbsp;</td>
                  </tr>
                  <tr>
                    <td class="actions__cell">
                      <table class="button main-action-cell">
                        <tr>
                          <td class="button__cell"><a href="https://admin.orderprotection.com/submitClaim" class="button__text">File a Claim</a></td>
                        </tr>
                      </table>
                    </td>
                    </tr>
                  </table>
                  <p>Future subscription orders will also be protected. If you'd prefer to not protect your orders, you can <a href="{{ subscription_url }}">manage and cancel your subscription here</a>.</p>
                </td>
              </tr>
            </table>
          </center>
        </td>
      </tr>
    </table>
  {% endunless %}
{% endif %}
<!-- ---------- Order Protection -->
  1. Select Preview and you can elect to send a Test email. Exit Settings.

preview test email

  1. You’re done! Your Shopify subscription orders are now fully integrated with Order Protection.

How it works

  • Once set up, Order Protection will be added to all cart instances within Shopify subscription orders using Recharge.

recharge checkout with order protection

  • Customers will be able to file/edit claims per your normal store settings once an order confirmation email has been sent.