Liquid Snippet

To initialize the Recharge JavaScript SDK you will need to do it within the root of your theme (wherever the <head /> element is located). Generally this is located in a file called theme.liquid.

Example

Create a new file within the theme editor called account-subscriptions.liquid. Then render that snippet on any page you would like. For this example it would have to be on a page where a user is logged in. eg) main-account.liquid. Note that this file needs to be a snippet not a section or page.

main-account.liquid

...
<div>{%- render 'account-subscriptions' -%}</div>
...

account-subscriptions.liquid

<style>
  .visually-hidden {
    border: 0px;
    clip: rect(0px, 0px, 0px, 0px);
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0px;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
  }

  @keyframes spinner {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .subscriptions-table td.id {
    vertical-align: middle !important;
  }

  .subscriptions-loader {
    display: flex;
    justify-content: center;
    padding-top: 16px;
  }

  .subscriptions-loader__spinner {
    display: inline-block;
    border-top: 2px solid currentcolor;
    border-right: 2px solid currentcolor;
    border-bottom-style: solid;
    border-left-style: solid;
    border-radius: 99999px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-bottom-color: transparent;
    border-left-color: transparent;
    animation: 0.45s linear 0s infinite normal none running spinner;
    width: var(--spinner-size);
    height: var(--spinner-size);
    --spinner-size: 5rem;
  }

  .subscriptions {
    width: 100%;
  }
</style>

<section class="subscriptions">
  <div>
    <h2>Subscriptions</h2>
    <account-subscriptions>
      <table class="subscriptions-table">
        <thead>
          <tr>
            <td>ID</td>
            <td>Product</td>
            <td>Quantity</td>
            <td>Price</td>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
      <div class="subscriptions-loader">
        <div class="subscriptions-loader__spinner"><span class="visually-hidden">Loading...</span></div>
      </div>
    </account-subscriptions>
  </div>
</section>

<script>
  class AccountSubscriptions extends HTMLElement {
    selectors = {
      loader: '.subscriptions-loader',
      table: '.subscriptions-table',
    };

    constructor() {
      super();
      this.loadSubscriptions();
    }

    async login() {
      this.session = await recharge.auth.loginShopifyAppProxy();
    }

    async loadSubscriptions() {
      this.setLoading(true);
      await this.login();
      const { subscriptions } = await recharge.subscription.listSubscriptions(this.session);
      subscriptions.forEach(subscription => {
        const tableBody = this.querySelector(`${this.selectors.table} tbody`);
        if (!tableBody) return;
        tableBody.append(this.createRow(subscription));
      });
      this.setLoading(false);
    }

    async setLoading(value) {
      const loader = this.querySelector(this.selectors.loader);
      if (!value && loader) {
        loader.remove();
      } else if (value) {
        const loadingEl = document.createElement('div');
        loadingEl.classList.add(this.selectors.loader.split('.')[1]);
        this.append(loadingEl);
      }
    }

    createRow(subscription) {
      const row = document.createElement('tr');

      const idCol = document.createElement('td');
      idCol.classList.add('id');
      idCol.innerHTML = subscription.id;
      row.append(idCol);

      const productCol = document.createElement('td');
      productCol.classList.add('product');
      productCol.innerHTML = subscription.product_title;
      row.append(productCol);

      const quantityCol = document.createElement('td');
      quantityCol.classList.add('subscription-quantity');
      quantityCol.innerHTML = subscription.quantity;
      row.append(quantityCol);

      const priceCol = document.createElement('td');
      priceCol.classList.add('price');
      priceCol.innerHTML = `$${subscription.price}`;
      row.append(priceCol);

      return row;
    }
  }

  customElements.define('account-subscriptions', AccountSubscriptions);
</script>

Liquid Snippet

Example​

Example