SubscriptionFlow Checkout In Shopify

If you want to use the SubscriptionFlow checkout in Shopify, follow the steps below.

Contents

1. Remove the Existing Checkout Button
2. Add the SubscriptionFlow Checkout Code

1. Remove the Existing Checkout Button

In your Shopify admin, go to Online Store → Themes → Edit code and open your cart template (for example the cart section or cart-drawer.liquid). Locate the existing Checkout button code and remove it, so it can be replaced with the SubscriptionFlow-aware button in the next step.

2. Add the SubscriptionFlow Checkout Code

The following Liquid code can be used on your ‘Checkout Now’ button linked to your shopping cart template, where ‘example’ serves as a placeholder for your store name.

{% assign base_url = 'https://example.subscriptionflow.com/en/hosted-page/commerceflow?' %}
{% assign cart_url = shop.url | append: '/cart' %}
{% assign url_parts = '' %}
{% assign charge_parts = '' %}
{% assign has_subscription = false %}
{% assign coupon_code = "" %}

{% for item in cart.items %}

  {% assign pr = item.product.id %}
  {% assign pl = item.variant.id %}
  {% assign q = item.quantity %}

  {% if item.selling_plan_allocation %}
    {% assign has_subscription = true %}
    {% assign sp = item.selling_plan_allocation.selling_plan.id %}
    {% assign pl = pl | append: "_" | append: sp %}
  {% endif %}

  {%- capture item_string -%}
items[{{ forloop.index0 }}][pr]={{ pr }}&items[{{ forloop.index0 }}][pl]={{ pl }}&items[{{ forloop.index0 }}][q]={{ q }}&
  {%- endcapture -%}

  {% assign url_parts = url_parts | append: item_string %}

  {% assign unit_price = item.final_line_price | divided_by: q | divided_by: 100.0 %}

  {%- capture charge_string -%}
charge_prices[{{ pl }}][ZAR]={{ unit_price }}&
  {%- endcapture -%}

  {% comment %} {% assign charge_parts = charge_parts | append: charge_string %} {% endcomment %}

  {% if item.discounts.size > 0 %}
    {% assign coupon_code = item.discounts[0].title %}
  {% endif %}

{% endfor %}

{% if coupon_code != "" %}
  {% assign url_parts = url_parts | append: "coupon_code=" | append: coupon_code | append: "&" %}
{% endif %}

{% assign final_url = base_url | append: url_parts | append: charge_parts | append: 'cart=' | append: cart_url %}

{% if has_subscription %}
  <a id="sf-checkout-url"
     href="{{ final_url }}"
     class="cart-checkout-button button button--hover-animate focus-inset"
     >
      {% render 'icon-sets', icon: 'lock' %}
        {{ 'sections.cart.checkout' | t }}
  </a>
{% else %}

    <button
        class="cart-checkout-button button button--hover-animate focus-inset"
        type="submit"
        name="checkout"
        form="Cart-From-{{ section.id }}"
    >
        {% render 'icon-sets', icon: 'lock' %}
        {{ 'sections.cart.checkout' | t }}
    </button>
{% endif %}

<script>
document.addEventListener("click", async function (e) {

  const btn = e.target.closest("#sf-checkout-url");
  if (!btn) return;

  e.preventDefault();

  const cart = await fetch("/cart.js").then(res => res.json());

  const baseUrl = "https://example.subscriptionflow.com/en/hosted-page/commerceflow?";
  let urlParts = "";
  let chargeParts = "";
  let hasSubscription = false;
  let couponCode = "";

  cart.items.forEach((item, index) => {

    let pr = item.product_id;
    let pl = item.variant_id;
    let q = item.quantity;

    if (item.selling_plan_allocation) {
      hasSubscription = true;
      const sellingPlanId = item.selling_plan_allocation.selling_plan.id;
      pl = `${pl}_${sellingPlanId}`;
    }

    urlParts += `items[${index}][pr]=${pr}&items[${index}][pl]=${pl}&items[${index}][q]=${q}&`;

    const unitPrice = (item.final_line_price / q) / 100;
    //chargeParts += `charge_prices[${pl}][ZAR]=${unitPrice}&`;

    if (item.discounts && item.discounts.length > 0) {
      couponCode = item.discounts[0].title;
    }

  });

  if (couponCode) {
    urlParts += `coupon_code=${couponCode}&`;
  }

  const finalUrl = `${baseUrl}${urlParts}${chargeParts}cart=${window.location.origin}/cart`;

  if (hasSubscription) {
    window.location.href = finalUrl;
  } else {
    document.querySelector("button[name='checkout']").click();
  }

});
</script>

Support

If you need help, contact the SubscriptionFlow support team from your account dashboard.

ShopifySubscriptionsSubscriptionFlowCheckout

End of document.

Back to top