> ## Documentation Index
> Fetch the complete documentation index at: https://docs.orderprotection.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Recharge

> All your subscription orders can now offer guaranteed delivery

<img src="https://mintcdn.com/orderprotectioncom/GDuchlp6KbhScehe/public/assets/img/recharge/recharge-1.png?fit=max&auto=format&n=GDuchlp6KbhScehe&q=85&s=81a79b0142fef5234ed193332d3a69be" alt="recharge checkout with order protection" width="1442" height="905" data-path="public/assets/img/recharge/recharge-1.png" />

<Note>
  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.
</Note>

## Installation

<Steps>
  <Step title="Generate an API Token">
    Access the Recharge admin page: [Recharge
    Admin](https://admin.rechargeapps.com/admin/login)

    * 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`

    <Frame caption="Creating an API Token">
      <img src="https://mintcdn.com/orderprotectioncom/GDuchlp6KbhScehe/public/assets/img/recharge/recharge-8.png?fit=max&auto=format&n=GDuchlp6KbhScehe&q=85&s=db6630d925c822d67e4c5f4dc1933516" alt="API Token" width="1439" height="898" data-path="public/assets/img/recharge/recharge-8.png" />
    </Frame>
  </Step>

  <Step title="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.
  </Step>

  <Step title="Install Recharge Integration Manager on Shopify">
    <Note>
      These changes are done within the Shopify platform.
    </Note>

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

    * In the left navigation, go to `Sales Channels` and select `Online Store`
          <img src="https://mintcdn.com/orderprotectioncom/GDuchlp6KbhScehe/public/assets/img/recharge/recharge-2.png?fit=max&auto=format&n=GDuchlp6KbhScehe&q=85&s=0b19b982c98232a08b2b11ed7a326c43" alt="shopify online store" width="1443" height="906" data-path="public/assets/img/recharge/recharge-2.png" />
    * Within the `Theme Settings`, select `Edit Code`
          <img src="https://mintcdn.com/orderprotectioncom/GDuchlp6KbhScehe/public/assets/img/recharge/recharge-3.png?fit=max&auto=format&n=GDuchlp6KbhScehe&q=85&s=cf19675091b4ad2540135fada48c7d8a" alt="Edit Code" width="1439" height="901" data-path="public/assets/img/recharge/recharge-3.png" />
    * Open the `theme.liquid` file and insert the following code in the `header` contents:
          <img src="https://mintcdn.com/orderprotectioncom/GDuchlp6KbhScehe/public/assets/img/recharge/recharge-4.png?fit=max&auto=format&n=GDuchlp6KbhScehe&q=85&s=2c3f332f5094445ac1607abce2ac1dfc" alt="Paste code" width="1442" height="897" data-path="public/assets/img/recharge/recharge-4.png" />

    ```liquid theme.liquid theme={null}
      <!-- 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>
    ```
  </Step>

  <Step title="Recharge Notification Emails">
    Navigate to the `Settings > Notifications > Customer Notifications`

    <img src="https://mintcdn.com/orderprotectioncom/GDuchlp6KbhScehe/public/assets/img/recharge/recharge-5.png?fit=max&auto=format&n=GDuchlp6KbhScehe&q=85&s=c742430e1b2c9447a319248824546e05" alt="Customer Notifications" width="1440" height="901" data-path="public/assets/img/recharge/recharge-5.png" />

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

    <img src="https://mintcdn.com/orderprotectioncom/GDuchlp6KbhScehe/public/assets/img/recharge/recharge-6.png?fit=max&auto=format&n=GDuchlp6KbhScehe&q=85&s=d7fa782c64b11476fa448bb118be8648" alt="Edit Code" width="1440" height="900" data-path="public/assets/img/recharge/recharge-6.png" />

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

    ```html confirmation email theme={null}
          <!-- 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 %}
    ```
  </Step>

  <Step title="Preview">
    Select **Preview** and you can elect to send a **Test email**. Exit **Settings**.

    <img src="https://mintcdn.com/orderprotectioncom/GDuchlp6KbhScehe/public/assets/img/recharge/recharge-7.png?fit=max&auto=format&n=GDuchlp6KbhScehe&q=85&s=f78e835b78c7edceda62a7bbe40c3bea" alt="Preview" width="1442" height="901" data-path="public/assets/img/recharge/recharge-7.png" />
  </Step>
</Steps>

<Check>
  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.
</Check>

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

<Tip>
  **Did you know?** You can customize the Order Protection widget styling specifically for your subscription portal. When creating a new widget, select **Subscription** as the widget type to create a dedicated subscription widget.

  <img src="https://mintcdn.com/orderprotectioncom/6PHukXPBD9AnZd7s/public/assets/img/education-basecamp/widgets/widget-subscription-type-selector.png?fit=max&auto=format&n=6PHukXPBD9AnZd7s&q=85&s=2d2cf94caf2c4df7a0850230b0cd8ac9" alt="Widget type selector with Subscription option highlighted" width="3562" height="2232" data-path="public/assets/img/education-basecamp/widgets/widget-subscription-type-selector.png" />

  <img src="https://mintcdn.com/orderprotectioncom/6PHukXPBD9AnZd7s/public/assets/img/education-basecamp/widgets/widget-subscription-list.png?fit=max&auto=format&n=6PHukXPBD9AnZd7s&q=85&s=05fe38e82bc6c46e6c0a331df1a64605" alt="Widgets list showing a Subscription widget type" width="3584" height="2226" data-path="public/assets/img/education-basecamp/widgets/widget-subscription-list.png" />

  For full customization options, visit the [Widget Customization](https://docs.orderprotection.com/education-basecamp/customizations/widgets) page.
</Tip>
