One-click checkout / Buy now

The below function can be used to create a quick checkout link that bring the customer straight to checkout populated with the product variant and selling plan provided.

function skioMagicLinkGenerator(productVariantId, sellingPlanId) {
            const magic = {
              products: [
                {
                  sellingPlanPlatformId: sellingPlanId,
                  productVariantPlatformId: productVariantId
                }
              ]
            }
          
            const stringifiedMagic = btoa(JSON.stringify(magic))
          
            return `/a/account/groups/join?magic=${stringifiedMagic}`
          }
          

Here is an example of using this with a button element. The variant id and selling plan id are pulled from the add to cart form when the button is clicked so the magic link is dynamically based on the most most recently selected values.

button.liquid
<button skio-buy-now {% if form_id %}form="{{ form_id }}"{% endif %}>
            Buy Now
          </button>
          

buy-now.js

const buttonEl = document.querySelector('[skio-buy-now]')
          buttonEl.addEventListener('click', (e) => {
            e.preventDefault()
            const formAttr = buttonEl.getAttribute('form')
            const form = document.getElementById(formAttr)
            const formData = new FormData(form)
            let variantId, sellingPlanId
            for ([key, value] of formData.entries()) {
              switch (key) {
                case 'id':
                  variantId = value
                  break
                case 'selling_plan':
                  sellingPlanId = value
                  break
              }
            }
            if (variantId && sellingPlanId) {
              window.location.href = skioMagicLinkGenerator(variantId, sellingPlanId)
            }
          })
          

How did we do?


Powered by HelpDocs (opens in a new tab)