Shopify Theme Integration FAQs

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);
        });
    }
  });
},

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
    ...
},

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
    }
});
```