skio
Help CenterAdmin API Docs
  • 👋Getting Started
  • 💻App Block Setup
    • What are app blocks?
    • Plan Picker
  • ✏️Manual Theme Setup
    • Manual install process
    • Auto-login to Skio from Shopify Account
  • 📏Rules
    • Rules API
    • Apply Volume Discounts
  • 📦Build-a-Box
    • Static
    • Dynamic
    • Sectioned
  • 🛍️Selling Plan
    • Getting Selling Plan Information
  • 👾Extras
    • Subscription Tags
    • One-click Checkout / Buy Now
    • Redirect Old Customer Portals
  • ❓Troubleshooting
    • Selling Plan Cannot Be Applied to Variant
  • 🛒Shopify API References
    • Liquid Docs
    • AJAX API Docs
    • Storefront GraphQL API Docs
Powered by GitBook
On this page
  1. Extras

One-click Checkout / Buy Now

One-click checkout, buy now, magic link

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)
  }
})
PreviousSubscription TagsNextRedirect Old Customer Portals

Last updated 4 months ago

👾