Skip to main content
Loading…

Embed Checkout into Cart

  • Updated

This guide walks you through the process of offering a checkout linked to multiple products and plans inside the Shopify shopping cart. 

Step 3: Shopping Cart Checkout

i) Sample Implementation

ii) Dissecting the Checkout URL Linked to Carts

iii) How to Embed Checkout into Your Shopify Cart

Prerequisites

It is important to note that to embed SubscriptionFlow checkout into your eCommerce shopping cart you need to have:

  1. A Shopify store integrated with SubscriptionFlow
  2. A payment gateway account connected to SubscriptionFlow
  3. An eCommerce integration

Sample Implementation

  1. Take a look at this checkout flow linked to a dummy storefront on Shopify. 

  1. Your customer can add items into the cart through the “Add to Cart” button.

  1. They can add multiple different items in varying quantities into a consolidated checkout flow.

  1. Clicking on “View my cart” allows them to preview their selected items.

  1. Through the “Continue Shopping” button they can return to your store. Clicking on the “Subscribe Now” button initiates checkout.

  1. The look and feel of this checkout form are customizable through our checkout designer.

Dissecting the Checkout URL Linked to Carts

Let’s examine this sample URL embedded into the ‘Subscribe Now’ button of the shopping cart.

https://shopifydemo.subscriptionflow.com/en/hosted-page/commerceflow?items[0][pr]=8120257741122&items[0][pl]=44474636337474&items[0][q]=1&items[1][pr]=8120253284674&items[1][pl]=44474620608834&items[1][q]=2&cart=https://sfapptest.myshopify.com/cart

  1. Here shopifydemo is the name of the placeholder Shopify storefront.

https://shopifydemo.subscriptionflow.com/en/

  1. The hosted-page/commerceflow inside the URL outlines that this checkout is linked to an eCommerce cart that can contain multiple different line items in varied quantities. 

https://shopifydemo.subscriptionflow.com/en/hosted-page/commerceflow?

  1. The first line item in the cart is indexed as [0] and defined with parameters specifying the item's product code [pr], plan code [pl], and quantity [q], referring to the Shopify product ID, Shopify variant ID, and the quantity of this item being purchased, respectively. 

https://shopifydemo.subscriptionflow.com/en/hosted-page/commerceflow?items[0][pr]=8120257741122&items[0][pl]=44474636337474&items[0][q]=1

  1. The second item in the cart indexed as [1] is defined by the same URL parameters. So does every consecutive item after that.

https://shopifydemo.subscriptionflow.com/en/hosted-page/commerceflow?items[0][pr]=8120257741122&items[0][pl]=44474636337474&items[0][q]=1&items[1][pr]=8120253284674&items[1][pl]=44474620608834&items[1][q]=2

  1. Finally the cart parameter specifies what URL the customer will be redirected to if they click the “continue shopping” button.

https://shopifydemo.subscriptionflow.com/en/hosted-page/commerceflow?items[0][pr]=8120257741122&items[0][pl]=44474636337474&items[0][q]=1&items[1][pr]=8120253284674&items[1][pl]=44474620608834&items[1][q]=2&cart=https://sfapptest.myshopify.com/cart

How to Embed Checkout into Your Shopify Cart

  1. Shopping cart checkout carries this URL structure: 

https://shopifydemo.subscriptionflow.com/en/hosted-page/commerceflow?items[0][pr]=[ShopifyProductID]&items[0][pl]=[ShopifyVariantID]&items[0][q]=1&items[1][pr]=[ShopifyProductID]&items[1][pl]=[ShopifyVariantID]&items[1][q]=2&cart=https://sfapptest.myshopify.com/cart

For a breakdown of this URL, refer to the sample implementation above. 

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

<!-- Subscriptionflow Subscribe button -->

{% comment %}<input type="submit" class="action_button add_to_cart" id="checkout" name="checkout" value="{{ 'cart.general.checkout' | t }}" />{% endcomment %} 

  {%- capture sf_cart_capture -%}

{%- for item in cart.items -%}

  items[{{ item.index }}][pr]={{ item.product_id }}{{ '&' }}items[{{ item.index }}][pl]={{ item.id }}{{ '&' }}items[{{ item.index }}][q]={{ item.quantity }}{{ '&' }}

{%- endfor -%}

  {%- endcapture -%}

<div class="SF-add-cart-btn" style="text-align: right;">

<a

  {% if cart == empty %}disabled{% endif %}

  id="sf-checkout-link"

  href="{{ "https://example.subscriptionflow.com/en/hosted-page/commerceflow?" | append: sf_cart_capture }}cart={{ shop.url }}/cart"

  class="cart__checkout-button button">

  {{ 'cart.general.checkout' | t }}</a>

</div>

 

  1. If you wish to enable your customer to change the quantity of an item or delete any item from their cart, use this JS code at the end of your cart template.

<script>

var cart_custom_arr = [];

function cart_data_arr() {

{% for item in cart.items %}

  var single_item_arr = [];

single_item_arr['pr'] = {{ item.product_id }};

single_item_arr['pl'] = {{ item.id }};

single_item_arr['q'] = {{ item.quantity }};

cart_custom_arr.push(single_item_arr);

{% endfor %}

return cart_custom_arr;

}

cart_data_arr();

function build_sf_url(cart_index = false, quantity = false, flag = false) {

if (cart_index && flag == 'delete') {

  cart_index--;

  cart_custom_arr.splice(cart_index, 1);

}

if (quantity && flag == 'update') {

  cart_index--;

  if (cart_custom_arr[cart_index]) {

cart_custom_arr[cart_index]['q'] = quantity;

  }

}

if(cart_custom_arr.length !== 0){

  let url_param = '';

  cart_custom_arr.forEach(function(element, index) {

url_param += 'items[' + index + '][pr]=' + element['pr'] + '&' + 'items[' + index + '][pl]=' + element['pl'] + '&' + 'items[' + index + '][q]=' + element['q'] + '&';

  });

  document.getElementById("sf-checkout-link").setAttribute('href', 'https://example.subscriptionflow.com/en/hosted-page/commerceflow'? + url_param + 'cart={{ shop.url }}/cart');

}

else{

  document.getElementById('sf-checkout-link').style.display = 'none';

}

}

build_sf_url();

// On delete item from cart

document.addEventListener("click", function(event) {

let delete_btn_obj = event.target.closest('cart-remove-button');

if (delete_btn_obj) {

  var cart_index = delete_btn_obj.getAttribute('data-index');

  var orignal_url = build_sf_url(cart_index, false, 'delete');

}

});

// On update cart quantity

document.addEventListener("change", function(event) {

var input_type = event.target.getAttribute('class');

if (input_type == 'quantity__input') {

  let current_cart_item = event.target.getAttribute('data-index');

  let current_cart_item_quantity = event.target.value;

  build_sf_url(current_cart_item, current_cart_item_quantity, 'update');

}

});

  </script>

And that's how SubscriptionFlow checkout can be embedded into your Shopify cart template. 

Related articles

Comments

0 comments

Please sign in to leave a comment.