Getting Started with One-click Checkout

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

Framework Overview

The One-click checkout flow consists of seven main steps:

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

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 Product Page (Optional)

In this approach, customers will initiate checkout instantly by clicking Buy Now directly on the product details page.

Key Features

• Customers can click Buy Now directly on the product details page.
• Uses script injection to intercept the AddItemsToCart mutation when buyNow: true.
• Implementation is optional and depends on your storefront configuration.
• Provides a faster checkout experience for single-item purchases.

Implementation

• Covered in detail in the Script Injection guide
• Requires injecting client-side JavaScript to intercept GraphQL mutations
• Uses FPI (Fynd Platform Interface) mutation interceptors

2. Buy Now Button in Cart Page (Mandatory)

In this approach, customers add items to their cart and then initiate checkout by clicking Buy Now 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

• Customers click Buy Now 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.

Implementation

• Requires creating and publishing a storefront binding (see Prerequisites)
• Uses binding actions to intercept checkout intents
• Routes to your backend checkout flow via proxy URLs

End-to-End Framework (Recommended)

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.
   • Product page: inject script to intercept AddItemsToCart with buyNow: true.
   • Cart page: use storefront binding Buy Now button (mandatory).
   • Refer Script Injection page

2. Validate Cart

   • Ensure cart is serviceable and valid (product availability, address, prices, inventory).
   • Use platform APIs to check all required conditions.

3. Handle Coupons (Optional)

   • Fetch/apply valid coupons for the cart.
   • Update cart totals if a coupon is applied.
   • APIs: getAppCoupons, applyCoupon

4. Create Provider Checkout Session

   • Your backend creates a payment gateway order from cart details.
   • Save cart/order metadata and return a popup config for the frontend payment gateway.

5. User Completes Payment

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

6. Verify Payment & Complete Checkout

   • Backend verifies payment signature and fetches addresses.
   • 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.