How to add products to Recharge checkout using Digioh

  • Created:
  • / Author: Mansoor Bilal

Note: This help document assumes you have installed and configured the Recharge app in your Shopify store.

Recharge helps merchants launch and scale subscription businesses, powering billions of dollars in annual processing for 50 million consumers.

By pairing Digioh’s product recommendation quizzes with Recharge, you can allow customers to add products directly to your Recharge checkout using Recharge’s Shopify Ajax API.

1) In Digioh, add the below JavaScript functions in your Parent JS.

// Clear Shopify Cart
api.clearShopifyCart = function(){
    
    var requestOptions = {
      method: 'POST',
      redirect: 'follow'
    };
    
    fetch("/cart/clear.js", requestOptions)
      .then(response => response.json())
      .then(result => console.log(result))
      .catch(error => console.log('error', error));

};

api.addRechargeItemToCart = function(variant_id, qty, frequency, unit_type, subscription_id) {
    var data = {};
   
    if(subscription_id !==  undefined || unit_type !==  undefined || frequency !==  undefined){
       data = {
          "id": variant_id,
          "quantity": qty,
          "properties": {
            "shipping_interval_frequency": frequency,
            "shipping_interval_unit_type": unit_type,
            "subscription_id" : subscription_id 
          }
        };
    } else {
        data = {
          "id": variant_id,
          "quantity": qty, 
          "purchase_type": "onetime"
        };
    }

    window.parent.jQuery.ajax({
      type: 'POST',
      url: '/cart/add.js',
      data: data,
      dataType: 'json',
      success: function() { 
        window.location.href = getCartUrl(); 
      }
    });
};

function getCartUrl() {
    var token=api.getCookie('cart');
    var myshopify_domain=window.parent.Shopify.shop;
    var ga_linker = "";
    try { ga_linker = ga.getAll()[0].get('linkerParam') } catch(err) { }
    return "https://checkout.rechargeapps.com/r/checkout?myshopify_domain=" + myshopify_domain + "&cart_token="+token;
}

2) In Digioh Box JS, add the function api.addRechargeItemToCart() to the add to cart button click handler.

For a Subscription product, you have to pass the below parameters in the addRechargeItemToCart() function:

  • variant_id (Shopify variant Id)
  • qty  (Quantity)
  • frequency (number, set as string)
  • unit_type  (e.g. Months)

For Onetime product, pass:

  • variant_id (Shopify variant Id)
  • qty  (Quantity)

Note: As recommended by Recharge, we have to clear the cart function before calling the Ajax add to cart function.

3) In Digioh Box JS, add a new custom JavaScript snippet. Select After Display Event Triggers and add the below function there.

api.clearShopifyCart();

 

If you have any questions about setting up your Shopify or Recharge integrations, send us an email, and we’ll be glad to help!

 

Tagged: