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

# Headless SDK

> Vaultera Switch is designed to facilitate the integration and management of payment-related functionalities in a decoupled or headless architecture with flexibility to customize your checkout UI. Customize the payment experience using Headless functions

#### 1. Initialize the Vaultera Switch SDK

Initialize Vaultera Switch Headless SDK onto your app with your publishable key. To get a Publishable Key please find it [here](https://app.switch.vaultera.co/developers).

<Tabs>
  <Tab title="HTML + JavaScript">
    ```javascript theme={"system"}
    // Source Switchloader on your HTML file using the <script /> tag
    switch = Switch.init("YOUR_PUBLISHABLE_KEY",{
        customBackendUrl: "YOUR_BACKEND_URL",
        //You can configure this as an endpoint for all the api calls such as session, payments, confirm call.
    });
    ```
  </Tab>
</Tabs>

#### 2. Create a Payment Intent

Make a request to the endpoint on your server to create a new Payment. The `clientSecret` returned by your endpoint is used to initialize the payment session.

<Callout type="warning">
  **Important**: Make sure to never share your API key with your client application as this could potentially compromise your security
</Callout>

#### 3. Initialize your Payment Session

Initialize a Payment Session by passing the clientSecret to the `initPaymentSession`

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={"system"}
    paymentSession = switch.initPaymentSession({
      clientSecret: client_secret,
    });
    ```
  </Tab>
</Tabs>

| options (Required)      | Description                                                      |
| ----------------------- | ---------------------------------------------------------------- |
| `clientSecret (string)` | **Required.**  Required to use as the identifier of the payment. |

#### 4. Craft a customized payments experience

Using the `paymentSession` object, the default customer payment method data can be fetched, using which you can craft your own payments experience. The `paymentSession` object also exposes a `confirmWithCustomerDefaultPaymentMethod` function, using which you can confirm and handle the payment session.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={"system"}
    paymentMethodSession = await paymentSession.getCustomerSavedPaymentMethods();

    if (paymentMethodSession.error) {
        // handle the case where no default customer payment method is not present
    } else {
        // use the customer_default_saved_payment_method_data to fulfill your usecases (render UI)
        const customer_default_saved_payment_method_data =
            paymentMethodSession.getCustomerDefaultSavedPaymentMethodData();
    }

    //handle press for pay button 
    function handlePress() { 
        if (paymentMethodSession.error) {
            // handle the case where no default customer payment method is not present
        } else {
            // use the confirmWithCustomerDefaultPaymentMethod function to confirm and handle the payment session response
            const { error, status } = await
            paymentMethodSession.
                confirmWithCustomerDefaultPaymentMethod({
                    confirmParams: {
                        // Make sure to change this to your payment completion page
                        return_url: "https://example.com/complete"
                    },
                    // if you wish to redirect always, otherwise it is defaulted to "if_required"
                    redirect: "always",
                });

            // use error, status to complete the payment journey
            if (error) {
                if (error.message) {
                    // handle error messages
                    setMessage(error.message);
                } else {
                    setMessage("An unexpected error occurred.");
                }
            }
            if (status) {
                // handle payment status
                handlePaymentStatus(status);
            }
        }
    }
    ```
  </Tab>
</Tabs>

**Payload for** `confirmWithCustomerDefaultPaymentMethod(payload)`

| options (Required)       | Description                                                                                                                                                                                                                                                                                                                           |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `confirmParams (object)` | Parameters that will be passed on to the Switch API.                                                                                                                                                                                                                                                                                  |
| `redirect (string)`      | **(web only)** **Can be either 'always' or 'if\_required'**<br />By default, `confirmWithCustomerDefaultPaymentMethod()` will always redirect to your `return_url` after a successful confirmation. If you set redirect: "if\_required", then this method will only redirect if your user chooses a redirection-based payment method. |

**ConfirmParams object**

| confirmParams         | Description                                                                           |
| --------------------- | ------------------------------------------------------------------------------------- |
| `return_url (string)` | **(web only)** The url your customer will be directed to after they complete payment. |