Skip to main content

Getting Started with One-click Checkout

This page will help you get started with building One-click checkout extensions for payment gateways.

note

In this document, the term user means a customer who is purchasing something from the seller's website (the storefront). They may be logged in or a guest user.

Framework Overview​

The One-click checkout flow consists of seven main steps. These steps apply to both logged-in users and guest users; guest users are handled by carrying a cart_id and an is_anonymous_cart flag through the flow and resolving a user at checkout time:

Intercept Checkout Intent → Validate Cart → Handle Coupons → Create Provider Session → User Completes Payment → Verify Payment & Complete Checkout → Redirect to Success Page

The framework supports both logged-in and guest user flows by:

  • Marking carts as anonymous on the frontend using fields such as is_anonymous_cart and cart_id
  • Persisting anonymous cart metadata in the order record during order creation
  • Resolving a user_id for anonymous carts at checkout time (search existing user vs create new user) before calling platform checkout
  • Using platform-specific anonymous cart headers (for example, an x-anonymous-cart header) when fetching, checking out, or deleting anonymous carts

The checkout extension flow follows this sequence:

  1. Script Injection: Inject client-side script to intercept Buy Now/Checkout actions
  2. Buy Now Handler: Frontend handler intercepts AddItemsToCart mutation when buyNow: true
  3. Buy Now Endpoint: Backend endpoint creates payment gateway order and returns popup configuration
  4. Payment Handler: Frontend handler processes the payment response from the payment gateway
  5. Verify Endpoint: Backend endpoint verifies payment signature, fetches addresses, completes checkout, and updates payment.
  6. Redirect: Frontend redirects to the success page with the order ID.

Prerequisites​

Before you begin implementing One-click checkout, make sure you have completed the following setup:

  • Make sure you have created an extension. Refer to Getting Started with Extensions for detailed instructions on creating your first extension.
  • Add and publish a storefront binding. This is mandatory for checkout extensions as it allows you to intercept checkout actions and route them to your One-click checkout flow. Refer to Bindings for detailed steps on creating and publishing storefront bindings.
  • Use proxy URLs for API calls inside binding actions. When binding actions need to call APIs (your backend or provider integrations), you must use proxy URLs. Refer to Proxy URL for instructions on creating proxy URLs.

Ways to Implement One-click Checkout​

There are two ways to implement One-click checkout in your storefront. Understanding both approaches will help you choose the best implementation strategy for your use case.

1. Direct Buy Now Button on PDP (Optional)​

In this approach, user will initiate checkout instantly by clicking Buy Now directly on the PDP. This approach requires injecting client-side JavaScript to intercept GraphQL mutations using Fynd Platform Interface (FPI) mutations.

Key Features​

  • Users can click Buy Now directly on the PDP.
  • Uses script injection to intercept the AddItemsToCart mutation when buyNow: true.
  • Provides a faster checkout experience for single-item purchases.

2. Checkout Button in Cart Page (Mandatory)​

In this approach, users add items to their cart and then initiate checkout by clicking Checkout on the Cart page. This method is mandatory for all checkout extensions, making it the standard flow to support multi-item purchases effectively.

Key Features​

  • Users click Checkout on the Cart page after adding items.
  • Created using Storefront Bindings.
  • This approach is mandatory for checkout extensions.
  • The binding intercepts the checkout action and routes it to your One-click checkout flow.

Follow this comprehensive framework consistently across all payment providers. Even if each provider brands it differently, the underlying flow remains the same.

Step-by-Step Framework​

  1. Intercept Checkout Intent

    • Capture checkout intent on the product or cart page before the default flow.
    • PDP: injected script to intercept AddItemsToCart with buyNow: true.
    • Cart page: use storefront binding for Checkout button (mandatory).
    • For anonymous carts, also capture whether the user is logged in and the current cart_id so that the backend can treat the cart as anonymous.

  2. Validate Cart

  3. Handle Coupons

  4. Create Provider Checkout Session

    • Your backend creates a payment gateway order from cart details.
    • Save cart/order metadata (including cart_id and an is_anonymous_cart flag for guest flows) and return a modal config for the frontend payment gateway.

  5. User Completes Payment

    • Payment handled in the gateway modal.
    • User completes payment; gateway returns response (payment_id, order_id, signature).

  6. Verify Payment & Complete Checkout

    • Backend verifies payment signature and fetches addresses.
    • For anonymous carts, resolve a user_id (search existing user vs create new user) using customer details from the payment provider, then call platform checkout with the resolved user and anonymous cart headers.
    • Complete platform checkout and update payment status.
    • Always verify the signature before proceeding.

  7. Redirect to Success Page

    • Redirect the user to the order confirmation page after successful payment.
    • Show errors and allow retry if payment fails.