Buy Now Button
Creates a one-click purchase flow by creating a new Shopify cart with the selected variant and immediately redirecting to checkout, without touching the persistent cart.
What it does
AP_BuyNowButton creates a one-click purchase flow by creating a new Shopify cart with just the selected variant and immediately redirecting the user to checkout. It does not add the item to the persistent cart store.
On click, the component calls createCart() with the currently selected variant, then uses the returned checkoutUrl to send the shopper directly into checkout. This makes it ideal for fast purchase flows where you want to bypass the normal cart experience.
The button shares its variant selection state with AP_VariantSelector and AP_AddToCartButton, so all three components stay in sync.
How to set it up
- Place AP_BuyNowButton on your Product Detail Page (PDP) alongside AP_VariantSelector.
- Set the Product ID to the Shopify product ID for the PDP.
- Connect four design states as component instances:
- Available – default in-stock state
- Loading – shown while the cart is being created / redirect is in progress
- Out of Stock – shown when the selected variant is unavailable
- Select Variant – shown when no variant has been selected yet
- Ensure your variant selection is wired through AP_VariantSelector. AP_BuyNowButton reads from the same variant store as AP_AddToCartButton, so whichever component updates the selected variant will affect this button.
- Optionally enable Open Drawer on Prompt to use the cart drawer as a fallback if no variant is selected or if the buy-now flow fails.
- Configure Open in New Tab if you want checkout to open in a separate browser tab instead of the current one.
Key behaviours
- Fresh cart per click: On click, AP_BuyNowButton calls createCart() to create a new Shopify cart containing only the currently selected variant. It bypasses the persistent cart store entirely.
- Direct checkout redirect: On successful cart creation, the shopper is immediately redirected to the returned checkoutUrl. If Open in New Tab is enabled, checkout opens in a new browser tab.
- Fallback behaviour: If createCart fails or if no variant is currently selected, the component can optionally open the cart drawer as a fallback when Open Drawer on Prompt is enabled.
- Shared variant state: The component shares its variant state with AP_AddToCartButton and AP_VariantSelector, all reading from the same variant store.
- State machine: The visual state mirrors AP_AddToCartButton and can be previewed via Preview State:
- auto – automatically reflects the live state
- available – variant is in stock and ready to buy
- loading – cart creation / redirect in progress