Shopify Theme Integration FAQs

  1. How to handle cart page where quantity input change does not dynamically update cart?

    Update function initSmartCheckoutButton in helixpay-global.js and update cart first via Shopify Cart JS API before handling checkout redirection.
    Here is an example code:

    initSmartCheckoutButton: function () {
      var BP = this;
      document.addEventListener('click', function (e) {
        if (e.target && BP.hasClass(e.target, 'bukopay-checkout')) {
          const button = e.target;
          const shopDomain = button.dataset.shopDomain;
          const cartFormId = button.dataset.cartFormId || 'cart';
          const cartForm = document.getElementById(cartFormId);
    
          if (!cartForm) {
            console.error('BukoPay: cart with id ' + cartFormId + ' not found.');
            return;
          }
    
          var $cartLineItems = $('.cart__product-qty'); // select all quantity inputs
          var formData = { updates: {} };
    
          $cartLineItems.each(function () {
            var $item = $(this);
            formData.updates[$item.data('id')] = parseInt($item.val(), 10); // key of formData.updates should be the cart line ID
          });
    
          fetch('/cart/update.js', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(formData),
          })
            .then((response) => response.json())
            .then((data) => {
              if (
                window.HELIXPAY &&
                window.HELIXPAY.cartHasSubscriptionRecurrence &&
                window.HELIXPAY.redirectToBukopay
              ) {
                window.HELIXPAY.cartHasSubscriptionRecurrence().then(function (
                  value
                ) {
                  if (value) {
                    // BukoPay Checkout
                    window.HELIXPAY.redirectToBukopay(shopDomain);
                  } else {
                    // Normal Shopify checkout
                    BP.submitCartForm(cartForm);
                  }
                });
                return;
              }
    
              // Normal Shopify checkout
              BP.submitCartForm(cartForm);
            })
            .catch((error) => {
              console.error('Error:', error);
              // Normal Shopify checkout
              BP.submitCartForm(cartForm);
            });
        }
      });
    },
    
  2. Themes that build product and cart page HTML through script

    Find the product liquid file and insert product bukopay metafields or used mock data for testing.

    // HelixPay Start
    
    <script type="application/json">
      {{ product.metafields.bukopay.recurrence.value | json }}
    </script>
    
    // HelixPay End
    

    Manually insert elements Recurrence Selector, Dynamic Checkout Button, Smart Checkout Button through theme script. If theme does not support form tags, update initDynamicCheckoutButton in helixpay-global.js to create product payload.

    See sample code below:

    initDynamicCheckoutButton: function () {
       var BP = this;
       document.addEventListener('click', function (e) {
         if (e.target && BP.hasClass(e.target, 'helixpayDynamicCheckoutButton')) {
           var button = e.target;
    
           const recurrenceCode = BP.getSelectedRecurrenceCode();
    
           if (!recurrenceCode || recurrenceCode === 'single') {
             console.error('HelixPay: Recurrence not subscription');
             return;
           }
    
           var button = e.target;
           var shopDomain = button.dataset.shopDomain;
           var id = document.querySelector('.product_variant__select')
           var variant_id = id.children[id.selectedIndex].value // variant id
           var quantity = document.querySelector('.product_quantity_stepper--input').value 
    
    
       // Add existing product properties here
           var properties = {
             Recurrence: document.querySelector('.recurrenceSelector .recurrenceCode').value,
             recurrenceDiscountType: document.querySelector('.recurrenceSelector .recurrenceDiscountType').value,
             recurrenceDiscountValue: document.querySelector('.recurrenceSelector .recurrenceDiscountValue').value,
             recurrenceLabel: document.querySelector('.recurrenceSelector .recurrenceLabel').value,
       } 
    
           var item = {
             id: variant_id,
             quantity: quantity,
             properties: properties,
           };
    
    
           var body = {
             items: [item],
           };
    
           fetch('/cart/add.js', {
             method: 'POST',
             headers: {
               'Content-Type': 'application/json',
             },
             body: JSON.stringify(body), // body data type must match "Content-Type" header
           }).then((response) => {
             if (!response.ok) {
               console.error('HelixPay: Failed to add to cart');
               return;
             }
    
             if (!window.HELIXPAY && !window.HELIXPAY.redirectToHelixpay) {
               console.error('HelixPay: Cannot access redirectToHelixpay method');
             }
    
             window.HELIXPAY.redirectToHelixpay(shopDomain);
           });
         }
       });
    },
    

    Now update initSmartCheckoutButton in helixpay-global.js normal checkout with theme cart submit function.

    initSmartCheckoutButton: function () {
        ...
        // Normal Shopify checkout
        BP.submitCartForm(cartForm); // Update to theme cart submit function
        ...
    },
    
  3. Handling themes that don't support multiple cart line items with single variant ID

    Some cases, cart updates through [Shopify Cart JS API ] /update.js using variant id thus having issues on updating when multiple products with same variant id is present. You can use [Shopify Cart JS API ] /change.js with ID property using item key.

    See sample code below:

    // Theme Update Cart Function
    fetch("/cart/change.json", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
        },
        body: { 
            quantity: 5, 
            id: '419432426:1c668117300fdaca18c1a4ad36aeb041' // cart line item key
        }
    });
    

Whatโ€™s Next