recharge checkout with order protection

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.

​
Installation

1

Generate an API Token

Access the Recharge admin page: Recharge Admin

  • Go to Apps -> API Tokens in the Sidebar.
  • Click "Create an API Token" in the top right button.
  • Choose a Token Nickname and set your contact e-mail.

For the permissions, select the following:

  • Orders: Read access
  • Subscriptions: Read and Write access
  • Customers: Read access

API Token

Creating an API Token

2

Integrate 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.

3

Install Recharge Integration Manager on Shopify

These changes are done within the Shopify platform.

To install the Recharge Integration Manager on Shopify, follow these steps:

  • In the left navigation, go to Sales Channels and select Online Store shopify online store
  • Within the Theme Settings, select Edit Code Edit Code
  • Open the theme.liquid file and insert the following code in the header contents: Paste code
theme.liquid
  <!-- BEGIN 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>
  <!-- END ORDERPROTECTION RECHARGE MANAGER>
4

Recharge Notification Emails

Navigate to the Settings > Notifications > Customer Notifications

Customer Notifications

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

Edit Code

Add the following code to the Order Confirmation template in the email body (HTML) section after all contents and before the footer

confirmation email
      <!-- 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 %}
5

Preview

Select Preview and you can elect to send a Test email. Exit Settings.

Preview

Once set up, Order Protection will be added to all cart instances within Shopify subscription orders using Recharge. Customers can choose to opt-in or opt out of Order Protection for their subscription orders.

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

Tapcart