The Order Protection widget integrates with Smartrr and your Shopify store, enhancing the subscription order experience for users with all relevant information in one place.

The widget addition to the cart 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 Smartrr admin page: Smartrr Admin

  • Go to Integrations in the Sidebar.
  • Click API Keys tab at the top button.
  • Click "Create key" button in the top right.
  • Choose a Token Nickname and Application Name
  • Choose permissions:
    • Subscription: Read & Write access
    • Product: Read access
    • Customer: Read access
    • Webhook: Read & Write access
  • Click "Create" button.

Creating an API Token

2

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

3

Install Smartrr Integration Manager on Shopify

These changes are done within the Shopify platform.

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

  • In the left navigation, go to Sales Channels and select Online Store
  • Within the Theme Settings, select Edit Code
  • Create a file in snippets folder and name it orderprotection-smartrr.liquid
  • Open the newly created orderprotection-smartrr.liquid file and insert the following code and save:
orderprotection-smartrr.liquid
<!-- BEGIN ORDERPROTECTION SMARTRR MANAGER -->
<link rel="stylesheet" href="https://cdn.orderprotection.com/widget/subscriptions/latest/style.css" />
<script src="https://cdn.orderprotection.com/widget/subscriptions/latest/orderprotection.js"></script>

<script>
  const opDebug = false;
  let initialized = false;
  let smartrrWidget = null;
  let subId = '';

  const toggleFn = () => {
    if (!window.orderProtection.cart.subtotal || !window.orderProtection.price) return;

    const totalWOp = window.orderProtection.cart.subtotal + window.orderProtection.price;
    const totalNoOp = window.orderProtection.cart.subtotal;
    const formatter = new Intl.NumberFormat(undefined, {
      style: 'currency',
      currency: window.Shopify.currency.active,
    });
    const formattedSubtotalOP = formatter.format(totalWOp / 100);
    const formattedSubtotalNoOp = formatter.format(totalNoOp / 100);
    const subtotalCls = `.smartrr-portal-discounts-wrapper .smartrr-portal-estimated-total-line p:nth-child(2)`;
    const subtotalEl = document.querySelector(subtotalCls);

    if (!subtotalEl) return;

    subtotalEl.innerText = window.orderProtection.enabled ? formattedSubtotalOP : formattedSubtotalNoOp;
  };

  const observer = new MutationObserver(async mutations => {
    const subDiscountCls = '.smartrr-portal-manage-subs-modal .smartrr-portal-discount-input-wrapper';
    const subDiscountEl = document.querySelector(subDiscountCls);

    if (subDiscountEl && !initialized) {
      initialized = true;

      subId = document.querySelector('.smartrr-portal-modal-main-title')?.innerHTML.replace(/#/g, '') || '';

      const opNewEl = document.createElement('div');
      opNewEl.id = 'order-protection' + subId;

      subDiscountEl.parentNode.insertBefore(opNewEl, subDiscountEl);

      console.log('OP-log: ready to go');
      smartrrWidget = OrderProtection.createOrderProtectionWidget({
        integration: 'smartrr',
        attach: true,
        debug: opDebug,
        locations: [{ id: 'order-protection' + subId }],
        version: 'v2',
      });

      smartrrWidget.cart.debug = opDebug;
      smartrrWidget.widget.on('toggled', toggleFn);

      let shouldRetry = true;

      while (shouldRetry) {
        try {
          if (!smartrrWidget.cart.isReady()) {
            smartrrWidget.cart.subscription = {};
            await smartrrWidget.cart.loadSubscription();
            await new Promise(resolve => setTimeout(resolve, 200));

            continue;
          }

          smartrrWidget.cart.setup();
          smartrrWidget.init();

          shouldRetry = false;
        } catch (error) {
          shouldRetry = false;
          console.error(error);
        }
      }
    } else if (!subDiscountEl && initialized) {
      initialized = false;

      smartrrWidget.widget.off('toggled', toggleFn);
      smartrrWidget.destroy();
      smartrrWidget.cart.destroy();

      const opEl = document.querySelector('#order-protection' + subId);
      if (opEl) opEl.remove();

      setTimeout(() => {
        if (typeof window !== 'undefined') window.orderProtection = null;
      }, 100);
    }
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });
</script>
<!-- END ORDERPROTECTION SMARTRR MANAGER -->
  • Open the theme.liquid file and insert the following code in the bottom of the body:
theme.liquid
{% render 'orderprotection-smartrr' %}

Once set up, Order Protection will be added to all cart instances within Shopify subscription orders using Smartrr. 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.