One-click checkout / Buy now One-click checkout / Buy now

One-click checkout / Buy now

Jordan Wheelock Jordan Wheelock

Outline:

One-click checkout link

You can create a one-click checkout link for customers which brings them straight to the checkout populated with the product variant and selling plan provided. You can find this link in the Skio admin:

Select Selling Plans > Select Selling Plan > 1 Click Checkout > Copy 1 Click Checkout Link

Screenshot 2024-02-08 at 2.43.56 PM.png

The below link can be used to create a quick checkout link as well: https://codepen.io/kaboomdev/full/JjvwdQE .

Buy Now Button

The below functionality can be used to generate one-click checkout links dynamically, i.e. without copy and pasting the link:

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

Add comment

Please sign in to leave a comment.