> ## Documentation Index
> Fetch the complete documentation index at: https://www.cashfree.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Build customised payment experiences with pre-built, secure payment components that integrate seamlessly into your web application.

Cashfree custom web checkout lets you embed payment UI elements in your application and keep customers on your site throughout checkout. Cashfree captures and transmits sensitive payment data, which helps you reduce your PCI DSS (Payment Card Industry Data Security Standard) compliance scope.

## Key features

Custom web checkout provides the following capabilities:

* **Complete design control**: Design payment forms that match your brand identity with full control over styling, layout, and user experience.

* **PCI DSS compliant**: Payment data is securely captured and transmitted directly to Cashfree servers, reducing your PCI compliance scope.

* **Flexible integration**: Build custom payment flows with individual components or use the hosted checkout option based on your requirements.

* **Multiple payment methods**: Accept payments through cards (credit and debit), UPI (collect, intent, and QR), net banking, wallets, and Buy Now Pay Later options.

* **Enhanced user experience**: Keep customers on your website throughout the payment journey without redirecting to external pages.

* **Framework support**: Native libraries available for JavaScript, React, and Svelte for seamless integration.

## Prerequisites

Ensure you complete the following tasks before starting the integration:

* Create a [Cashfree Merchant Account](https://merchant.cashfree.com/merchants/signup).
* Log in to the [Merchant Dashboard](https://merchant.cashfree.com/merchants/pg/developers/api-keys) and generate an **App ID** and **Secret Key**. Learn how to [generate API keys](/docs/api-reference/authentication#generate-api-keys).
* Whitelist your website domain for integration. Learn more about [domain whitelisting](/docs/payments/online/go-live/whitelist).

## Integration steps

Follow these four steps to integrate custom web checkout:

<div class="hidden mb-4" data-table-of-contents="top">
  <iframe height="150" width="100%" class="shadow-2xl rounded-md" src="https://www.youtube.com/embed/LOXUTo9vWOU?enablejsapi=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />

  <a href="https://www.cashfree.com/devstudio/preview/pg/web/card" target="_blank" class="inline-flex items-center justify-center mt-4 p-4 w-full text-base font-medium text-gray-500 rounded-lg bg-gray-50 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white">
    <span class="flex items-center gap-2">
      Try it in DevStudio

      <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M14 4H20M20 4V10M20 4L12 12" stroke="#33363F" stroke-width="2" />

        <path d="M11 5H7C5.89543 5 5 5.89543 5 7V17C5 18.1046 5.89543 19 7 19H17C18.1046 19 19 18.1046 19 17V13" stroke="#33363F" stroke-width="2" stroke-linecap="round" />
      </svg>
    </span>
  </a>
</div>

<Accordion title="Step 1: Create an order" icon="money-bill-wave" defaultOpen="true">
  <Badge color="green">Server-side</Badge>

  To integrate the custom web checkout, you must first create an order. Complete this step before you process any payments. Configure an endpoint on your server to handle order creation. You can't call this API from the client-side.

  <Note>Create orders through your server as this API requires your secret key. Don't call it directly from the client-side.</Note>

  Here's a sample request for creating an order using your desired backend language. Cashfree offers backend [SDKs](/docs/api-reference/payments/sdk#payment-sdk) to simplify the integration process.

  <CodeGroup>
    ```bash curl theme={"dark"}
    curl --location 'https://sandbox.cashfree.com/pg/orders' \
    --header 'X-Client-Secret: {{clientKey}}' \
    --header 'X-Client-Id: {{clientId}}' \
    --header 'x-api-version: 2025-01-01' \
    --header 'Content-Type: application/json' \
    --header 'Accept: application/json' \
    --data-raw '{
      "order_amount": 10.10,
      "order_currency": "INR",
      "customer_details": {
        "customer_id": "USER123",
        "customer_name": "joe",
        "customer_email": "joe.s@cashfree.com",
        "customer_phone": "+919876543210"
      },
      "order_meta": {
        "return_url": "https://b8af79f41056.eu.ngrok.io?order_id=order_123"
      }
    }'
    ```

    ```javascript nodejs theme={"dark"}
    import { Cashfree, CFEnvironment } from "cashfree-pg";

    const cashfree = new Cashfree(
    	CFEnvironment.PRODUCTION,
    	"{Client ID}",
    	"{Client Secret Key}"
    );

    function createOrder() {
    	var request = {
    		order_amount: "1",
    		order_currency: "INR",
    		customer_details: {
    			customer_id: "node_sdk_test",
    			customer_name: "",
    			customer_email: "example@gmail.com",
    			customer_phone: "9999999999",
    		},
    		order_meta: {
    			return_url:
    				"https://test.cashfree.com/pgappsdemos/return.php?order_id=order_123",
    		},
    		order_note: "",
    	};

    	cashfree
    		.PGCreateOrder(request)
    		.then((response) => {
    			console.log("Order created successfully:", response.data);
    		})
    		.catch((error) => {
    			console.error("Error setting up order request:", error.response.data);
    		});
    }
    ```

    ```python python theme={"dark"}
    from cashfree_pg.models.create_order_request import CreateOrderRequest
    from cashfree_pg.api_client import Cashfree
    from cashfree_pg.models.customer_details import CustomerDetails


    Cashfree.XClientId = {Client ID}
    Cashfree.XClientSecret = {Client Secret Key}
    Cashfree.XEnvironment = Cashfree.XSandbox
    x_api_version = "2023-08-01"

    def create_order():
            customerDetails = CustomerDetails(customer_id="123", customer_phone="9999999999")
            createOrderRequest = CreateOrderRequest(order_amount=1, order_currency="INR", customer_details=customerDetails)
            try:
                api_response = Cashfree().PGCreateOrder(x_api_version, createOrderRequest, None, None)
                print(api_response.data)
            except Exception as e:
                print(e)
    ```

    ```java java theme={"dark"}
    import com.cashfree.*;

    Cashfree.XClientId = {Client Key};
    Cashfree.XClientSecret = {Client Secret Key};
    Cashfree.XEnvironment = Cashfree.SANDBOX;

    static void createOrder() {
      CustomerDetails customerDetails = new CustomerDetails();
      customerDetails.setCustomerId("123");
      customerDetails.setCustomerPhone("9999999999");

      CreateOrderRequest request = new CreateOrderRequest();
      request.setOrderAmount(1.0);
      request.setOrderCurrency("INR");
      request.setCustomerDetails(customerDetails);
      try {
        Cashfree cashfree = new Cashfree();
        ApiResponse<OrderEntity> response = cashfree.PGCreateOrder("2023-08-01", request, null, null, null);
        System.out.println(response.getData().getOrderId());

      } catch (ApiException e) {
        throw new RuntimeException(e);
      }
    }
    ```

    ```go go theme={"dark"}
    import (
      cashfree "github.com/cashfree/cashfree-pg/v3"
    )

    func createOrder() {

    clientId := {Client ID}
    clientSecret := {Client Secret Key}
    cashfree.XClientId = &clientId
    cashfree.XClientSecret = &clientSecret
    cashfree.XEnvironment = cashfree.SANDBOX

    request := cashfree.CreateOrderRequest{
    		OrderAmount: 1,
    		CustomerDetails: cashfree.CustomerDetails{
    			CustomerId:    "1",
    			CustomerPhone: "9999999999",
    		},
    		OrderCurrency: "INR",
    		OrderSplits:   []cashfree.VendorSplit{},
    	}
    	version := "2023-08-01"
    	response, httpResponse, err := cashfree.PGCreateOrder(&version, &request, nil, nil, nil)
    	if err != nil {
    		fmt.Println(err.Error())
    	} else {
    		fmt.Println(httpResponse.StatusCode)
    		fmt.Println(response)
        }
    }
    ```

    ```csharp .net theme={"dark"}
    using cashfree_pg.Client;
    using cashfree_pg.Model;

    Cashfree.XClientId = {Client ID};
    Cashfree.XClientSecret = {Client Secret Key};
    Cashfree.XEnvironment = Cashfree.PRODUCTION;
    var cashfree = new Cashfree();
    var xApiVersion = "2023-08-01";

    void CreateOrder() {
        var customerDetails = new CustomerDetails("123", null, "9999999999");
        var createOrdersRequest = new CreateOrderRequest(null, 1.0, "INR", customerDetails);
        try {
            // Create Order
            var result = cashfree.PGCreateOrder(xApiVersion, createOrdersRequest, null, null, null);
            Console.WriteLine(result);
            Console.WriteLine(result.StatusCode);
            Console.WriteLine((result.Content as OrderEntity));
        } catch (ApiException e) {
            Console.WriteLine("Exception when calling PGCreateOrder: " + e.Message);
            Console.WriteLine("Status Code: " + e.ErrorCode);
            Console.WriteLine(e.StackTrace);
        }
    }
    ```

    ```php php theme={"dark"}
    \Cashfree\Cashfree::$XClientId = "<x-client-id>";
    \Cashfree\Cashfree::$XClientSecret = "<x-client-secret>";
    \Cashfree\Cashfree::$XEnvironment = Cashfree\Cashfree::$SANDBOX;

    $cashfree = new \Cashfree\Cashfree();

    $x_api_version = "2023-08-01";
    $create_orders_request = new \Cashfree\Model\CreateOrdersRequest();
    $create_orders_request->setOrderAmount(1.0);
    $create_orders_request->setOrderCurrency("INR");
    $customer_details = new \Cashfree\Model\CustomerDetails();
    $customer_details->setCustomerId("123");
    $customer_details->setCustomerPhone("9999999999");
    $create_orders_request->setCustomerDetails($customer_details);

    try {
        $result = $cashfree->PGCreateOrder($x_api_version, $create_orders_request);
        print_r($result);
    } catch (Exception $e) {
        echo 'Exception when calling PGCreateOrder: ', $e->getMessage(), PHP_EOL;
    }
    ```
  </CodeGroup>

  After successfully creating an order, you will receive a unique `order_id` and `payment_session_id` that you need for subsequent steps.

  You can view the complete API request and response for `/orders` in the [Create Order API](/docs/api-reference/payments/latest/orders/create-order).
</Accordion>

<Accordion title="Step 2: Include SDK" icon="cube">
  <Badge color="orange">Client-side</Badge>

  <Warning>
    You must [whitelist your domain](/docs/payments/online/go-live/whitelist) with Cashfree before you start this step.
  </Warning>

  Include the Cashfree SDK in your client-side code. You must load `cashfree.js` directly from the Cashfree CDN to maintain PCI compliance. Don't bundle or self-host this library.

  <Tabs>
    <Tab title="JavaScript">
      Use the CDN or NPM to include the SDK in your project.

      <CodeGroup>
        ```html CDN theme={"dark"}
        <script src="https://sdk.cashfree.com/js/v3/cashfree.js"></script>
        ```

        ```javascript NPM theme={"dark"}
        npm install @cashfreepayments/cashfree-js
        ```
      </CodeGroup>

      ### Initialise the SDK

      Initialise the SDK using the `Cashfree()` function with the appropriate mode:

      <CodeGroup>
        ```javascript CDN theme={"dark"}
        const cashfree = Cashfree({
            mode: "sandbox" // Use "production" for live environment
        });
        ```

        ```javascript NPM theme={"dark"}
        import { load } from "@cashfreepayments/cashfree-js";

        const cashfree = await load({
            mode: "sandbox" // Use "production" for live environment
        });
        ```
      </CodeGroup>
    </Tab>

    <Tab title="React">
      For React applications, refer to the [SDK documentation](/docs/payments/online/element/sdks#react-library) for React-specific setup and usage patterns.

      ```javascript NPM theme={"dark"}
      npm install @cashfreepayments/cashfree-js
      ```

      Import and initialise the SDK in your React component:

      ```javascript theme={"dark"}
      import { useState, useEffect } from "react";
      import { load } from "@cashfreepayments/cashfree-js";

      function PaymentComponent() {
          const [cashfree, setCashfree] = useState(null);

          useEffect(() => {
              const initializeSDK = async () => {
                  const cf = await load({
                      mode: "sandbox" // Use "production" for live
                  });
                  setCashfree(cf);
              };
              initializeSDK();
          }, []);

          // Your component logic
      }
      ```
    </Tab>

    <Tab title="Svelte">
      For Svelte applications, refer to the [SDK documentation](/docs/payments/online/element/sdks#svelte-library) for Svelte-specific setup and usage patterns.

      ```javascript NPM theme={"dark"}
      npm install @cashfreepayments/cashfree-js
      ```

      Import and use the SDK in your Svelte component:

      ```javascript theme={"dark"}
      import { load } from "@cashfreepayments/cashfree-js";
      import { onMount } from "svelte";

      let cashfree;

      onMount(async () => {
          cashfree = await load({
              mode: "sandbox" // Use "production" for live
          });
      });
      ```
    </Tab>
  </Tabs>

  ### Async and deferred loading

  Asynchronous loading of JavaScript is recommended as it improves your site's user experience by preventing the script from blocking DOM rendering during load time.

  You can load `cashfree.js` using the `async` or `defer` attribute on the script tag:

  ```html theme={"dark"}
  <!-- Using async attribute -->
  <script src="https://sdk.cashfree.com/js/v3/cashfree.js" async></script>

  <!-- Using defer attribute -->
  <script src="https://sdk.cashfree.com/js/v3/cashfree.js" defer></script>
  ```

  <Note>
    With asynchronous loading, you must make all SDK method calls only after the script execution completes. Ensure your code waits for the Cashfree SDK to load before initialising or calling any methods.
  </Note>
</Accordion>

<Accordion title="Step 3: Build payment interface" icon="layer-group">
  <Badge color="orange">Client-side</Badge>

  Build your payment interface using one of the following approaches:

  ### Option 1: Use hosted checkout

  Redirect customers to a Cashfree-hosted payment page that supports all payment methods. This is the quickest integration option.

  ```javascript theme={"dark"}
  let checkoutOptions = {
      paymentSessionId: "payment_session_id_from_step_1",
      returnUrl: "https://yourwebsite.com/payment-success?order_id={order_id}",
      redirectTarget: "_self" // or "_blank", "_modal" for popup
  };

  cashfree.checkout(checkoutOptions).then(function (result) {
      if (result.error) {
          console.error(result.error.message);
      }
      if (result.redirect) {
          console.log("Redirection");
      }
  });
  ```

  <Info>
    The `redirectTarget` parameter controls how the checkout opens:

    * `_self`: Opens in same window (default)
    * `_blank`: Opens in new tab
    * `_modal`: Opens in popup window
    * DOM element: Embeds inline
  </Info>

  ### Option 2: Build custom components

  Create custom payment forms using individual components for complete design control. Components are available for cards, UPI, net banking, and wallets.

  <CardGroup cols={3}>
    <Card title="Card payments" icon="credit-card" href="/docs/payments/online/element/cards">
      Accept credit and debit card payments
    </Card>

    <Card title="UPI payments" icon="mobile" href="/docs/payments/online/element/upi">
      Support UPI collect, intent, and QR
    </Card>

    <Card title="Other methods" icon="wallet" href="/docs/payments/online/element/other-components">
      Net banking, wallets, and BNPL
    </Card>
  </CardGroup>

  **Component lifecycle**:

  ```mermaid theme={"dark"}
  graph TD
      A[Create Component] -->|cashfree.create()| B[Component Instance]
      B -->|component.mount()| C[Component Mounted]
      C -->|User Input| D[Component Data]
      D -->|cashfree.pay()| E[Payment Initiated]
      E --> F[Payment Complete]
      
      style A fill:#e3f2fd
      style C fill:#e8f5e9
      style E fill:#fff3e0
      style F fill:#f3e5f5
  ```

  For detailed component examples, refer to the [Examples](/docs/payments/online/element/examples) page.
</Accordion>

<Accordion title="Step 4: Confirm the payment" icon="circle-check">
  <Badge color="green">Server-side</Badge>

  After the customer completes the payment, verify the payment status on your server before delivering services.

  ### Hosted checkout response

  For hosted checkout, customers redirect to the `returnUrl` you provided when creating the order. For popup and inline checkouts, the `cashfree.checkout()` function returns a promise with payment details.

  ### Custom component response

  When using custom components, the `cashfree.pay()` method returns a promise with the payment result.

  ### Order status verification

  To verify an order you can call our `/pg/orders` endpoint from your backend. You can also use our SDK to achieve the same.

  <CodeGroup>
    ```bash curl theme={"dark"}
    curl --request GET \
         --url https://sandbox.cashfree.com/pg/orders/{order_id} \
         --header 'accept: application/json' \
         --header 'x-api-version: 2025-01-01' \
         --header 'x-client-id: "YOUR APP ID GOES HERE"' \
         --header 'x-client-secret: "YOUR SECRET KEY GOES HERE"'
    ```

    ```javascript nodejs theme={"dark"}
    cashfree
    .PGFetchOrder("<order_id>")
    .then((response) => {
    	console.log("Order fetched successfully:", response.data);
    })
    .catch((error) => {
    	console.error("Error:", error.response.data.message);
    });
    ```

    ```python python theme={"dark"}
    from cashfree_pg.models.create_order_request import CreateOrderRequest
    from cashfree_pg.api_client import Cashfree
    from cashfree_pg.models.customer_details import CustomerDetails
    from cashfree_pg.models.order_meta import OrderMeta

    Cashfree.XClientId = "<x-client-id>"
    Cashfree.XClientSecret = "<x-client-secret>"
    Cashfree.XEnvironment = Cashfree.SANDBOX
    x_api_version = "2023-08-01"

    try:
        api_response = Cashfree().PGFetchOrder(x_api_version, "order_3242X4jQ5f0S9KYxZO9mtDL1Kx2Y7u", None)
        print(api_response.data)
    except Exception as e:
        print(e)

    ```

    ```java java theme={"dark"}
    import com.cashfree.*;
    //other code

    try {
        Cashfree.XClientId = "<x-client-id>";
        Cashfree.XClientSecret = "<x-client-secret>";
        Cashfree.XEnvironment = Cashfree.SANDBOX;

        Cashfree cashfree = new Cashfree();
        String xApiVersion = "2023-08-01";

        ApiResponse<OrderEntity> responseFetchOrder = cashfree.PGFetchOrder(xApiVersion, "<order_id>", null, null, null);
        System.out.println(response.getData().getOrderId());
    } catch (ApiException e) {
        throw new RuntimeException(e);
    }
    ```

    ```go go theme={"dark"}
    version := "2023-08-01"
    response, httpResponse, err := cashfree.PGFetchOrder(&version, "<order_id>", nil, nil, nil)
    if err != nil {
    	fmt.Println(err.Error())
    } else {
    	fmt.Println(httpResponse.StatusCode)
    	fmt.Println(response)
    }
    ```

    ```csharp .net theme={"dark"}
    using cashfree_pg.Client;
    using cashfree_pg.Model;

    Cashfree.XClientId = "<x-client-id>";
    Cashfree.XClientSecret = "<x-client-secret>";
    Cashfree.XEnvironment = Cashfree.SANDBOX;
    var cashfree = new Cashfree();
    var xApiVersion = "2023-08-01";

    try {
        var result = cashfree.PGFetchOrder(xApiVersion, "<order_id>>", null, null);
        Console.WriteLine(result);
        Console.WriteLine(result.StatusCode);
        Console.WriteLine((result.Content as OrderEntity));
    } catch (ApiException e) {
        Console.WriteLine("Exception when calling PGFetchOrder: " + e.Message);
        Console.WriteLine("Status Code: " + e.ErrorCode);
        Console.WriteLine(e.StackTrace);
    }
    ```

    ```php php theme={"dark"}
    $x_api_version = "2023-08-01";
    try {
        $response = $cashfree->PGFetchOrder($x_api_version, "<order_id>");
        print_r($response);
    } catch (Exception $e) {
        echo 'Exception when calling PGFetchOrder: ', $e->getMessage(), PHP_EOL;
    }
    ```
  </CodeGroup>

  <Note>
    Always verify the order status before you deliver services to the customer. Use the [Get Order API](/docs/api-reference/payments/latest/orders/get) for this. An order is successful when the `order_status` is `PAID`.
  </Note>
</Accordion>

## Developer resources

<CardGroup cols={2}>
  <Card title="SDK Libraries" icon="book-open" href="/docs/payments/online/element/sdks">
    JavaScript, React, and Svelte libraries for seamless integration
  </Card>

  <Card title="Integration Examples" icon="file-code" href="/docs/payments/online/element/examples">
    Working code samples for cards, UPI, wallets, and multi-payment setups
  </Card>

  <Card title="Component Overview" icon="layer-group" href="/docs/payments/online/element/component-overview">
    Component lifecycle methods including mount, update, and unmount
  </Card>

  <Card title="Customise Styling" icon="paintbrush" href="/docs/payments/online/element/customize">
    Apply custom styles, fonts, and themes to match your brand
  </Card>

  <Card title="Card Payments" icon="credit-card" href="/docs/payments/online/element/cards">
    Build custom card payment forms with secure components
  </Card>

  <Card title="UPI Components" icon="mobile-screen" href="/docs/payments/online/element/upi">
    Integrate UPI collect, QR code, and intent-based payments
  </Card>

  <Card title="Other Payment Methods" icon="wallet" href="/docs/payments/online/element/other-components">
    Add net banking, wallets, and Buy Now Pay Later options
  </Card>

  <Card title="Payment Options" icon="sliders" href="/docs/payments/online/element/payment-options">
    Configure payment methods, filters, and checkout behaviour
  </Card>
</CardGroup>

## Testing

After integration, verify that your payment flow works correctly:

1. Open the **Network** tab in your browser developer tools.
2. Initiate a payment and check the console logs.
3. Ensure you pass the correct environment (`sandbox` or `production`) and `payment_session_id`.
4. Use `console.log()` to confirm data is passed correctly to the SDK methods.
5. Test with [sandbox credentials](/docs/payments/online/resources/sandbox-environment) before going live.

## FAQs

<AccordionGroup>
  <Accordion title="Which integration approach should I choose: hosted checkout or custom components?">
    **Use hosted checkout** if you want the quickest implementation with minimal code. It provides a ready-made payment page with all payment methods.

    **Use custom components** when you need:

    * Complete control over the payment form design
    * Seamless integration with your existing UI
    * Custom validation and error handling
    * Specific payment flow customizations
  </Accordion>

  <Accordion title="Is my website PCI DSS compliant when using custom web checkout?">
    Yes. When you use Cashfree's custom web checkout, payment card data is captured directly by secure components and transmitted to Cashfree servers. Your server never touches sensitive card information, which reduces your PCI DSS compliance scope significantly.

    However, you must:

    * Load the SDK from Cashfree's CDN (don't bundle or self-host)
    * Never log or store card data on your servers
    * Use HTTPS for all website pages
  </Accordion>

  <Accordion title="How do I handle payment failures and errors?">
    Always implement proper error handling:

    1. **Client-side**: Check for `result.error` in the promise returned by `cashfree.checkout()` or `cashfree.pay()`
    2. **Server-side**: Always verify the order status using the Get Order API before delivering services
    3. **Use webhooks**: Implement webhook handlers for real-time payment status notifications
    4. **Display clear messages**: Show user-friendly error messages to customers when payments fail
  </Accordion>

  <Accordion title="Can I use the same payment session for multiple payment attempts?">
    No. Payment sessions are single-use and expire after 30 minutes. For each new payment attempt, generate a fresh payment session through the Create Order API on your server.
  </Accordion>

  <Accordion title="What browsers are supported by the custom web checkout?">
    The Cashfree SDK supports all modern browsers:

    * Chrome 90+
    * Firefox 88+
    * Safari 14+
    * Edge 90+
    * Mobile browsers (iOS Safari 14+, Chrome Mobile 90+)

    The SDK automatically handles browser compatibility and provides fallbacks where needed.
  </Accordion>

  <Accordion title="Do I need to whitelist my domain?">
    Yes. Domain whitelisting is mandatory for security. You must whitelist:

    * Your website domain for web integrations
    * Your app package name for mobile apps

    Whitelist your domains in the [Merchant Dashboard](https://merchant.cashfree.com/merchants/pg/developers/api-keys) under **Settings > Developers > Domain Whitelisting**.
  </Accordion>

  <Accordion title="Can I customize the styling of payment components?">
    Yes. Custom components are fully styleable. You can customize:

    * Colors and fonts
    * Border styles and radius
    * Padding and spacing
    * Focus and error states
    * Placeholder text

    See the [Customise Styling](/docs/payments/online/element/customize) guide for detailed examples.
  </Accordion>

  <Accordion title="How do I test the integration before going live?">
    1. Use `sandbox` mode in the SDK initialization
    2. Generate test API keys from the sandbox environment
    3. Use [test card numbers](/docs/payments/online/resources/sandbox-environment) from the documentation
    4. Test all payment scenarios: success, failure, pending
    5. Verify webhook handling with test notifications
    6. Switch to `production` mode and use live API keys only when ready to go live
  </Accordion>

  <Accordion title="What happens if the SDK fails to load?">
    If the SDK fails to load:

    * Check browser console for errors
    * Verify the CDN address is correct
    * Ensure you're loading from `https://sdk.cashfree.com`
    * Check for network connectivity issues
    * Verify no browser extensions are blocking the script

    For async loading, ensure you wait for the SDK to load before making any method calls.
  </Accordion>

  <Accordion title="Can I save customer card details for future payments?">
    Yes. Use the `savePaymentInstrument` component in your card payment form. Customers can opt-in to save their card details securely. On subsequent payments, you can retrieve and use saved payment instruments through the Token Vault feature.

    Learn more in the [Token Vault documentation](/docs/payments/features/token-vault).
  </Accordion>
</AccordionGroup>

<div
  className="callout info"
  style={{
backgroundColor: 'light-dark(#f9f7fd, #2d1b4e)',
borderColor: 'light-dark(#cdbaef, #6930ca)',
color: 'light-dark(#000000, #ffffff)'
}}
>
  <p style={{fontSize: '1.3em', fontWeight: '500', marginBottom: '16px'}}>Affiliate partner program</p>

  <p>As a developer building payment experiences for your clients, you can earn additional income while providing them with industry-leading payment solutions.</p>

  <p>Join the <a href="https://partner.cashfree.com/partner-ui/authentication/signup?source-action=Affiliate%20Program%20LP&action=Sign%20Up&button-id=StartNow_CashfreeAffiliatePartnerProgram">Cashfree affiliate partner program</a> and get rewarded every time your clients use Cashfree.</p>

  <p>**What you get:**</p>

  <ul>
    <li>Earn up to 0.25% commission on every transaction.</li>
    <li>Become a trusted fintech partner for your clients.</li>
    <li>Access to a dedicated partner manager for expert support.</li>
  </ul>

  <p>**What your clients get:**</p>

  <ul>
    <li>Instant activation and go live in minutes.</li>
    <li>Industry-best success rate across all payment modes.</li>
    <li>Effortless acceptance of international payments in 140+ currencies.</li>
  </ul>

  <p>Get started today. <a href="https://partner.cashfree.com/partner-ui/authentication/signup?source-action=Affiliate%20Program%20LP&action=Sign%20Up&button-id=StartNow_BecomeAPartner">Become a partner now</a>.</p>
</div>

<div class="hidden" data-table-of-contents="bottom">
  <p class="mt-4 font-medium flex items-center gap-2 related-docs-heading">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="w-4 h-4">
      <path d="M3 4h7a2 2 0 0 1 2 2v13a2 2 0 0 0-2-2H3z" />

      <path d="M21 4h-7a2 2 0 0 0-2 2v13a2 2 0 0 1 2-2h7z" />
    </svg>

    <span>Related topics</span>
  </p>

  <ul>
    <li><a href="/docs/api-reference/payments/latest/orders/create">Create Order API</a></li>
    <li><a href="/docs/api-reference/payments/latest/orders/get">Get Order API</a></li>
    <li><a href="/docs/payments/online/element/sdks">SDK Libraries</a></li>
    <li><a href="/docs/payments/online/element/examples">Integration Examples</a></li>
  </ul>
</div>