> For the complete documentation index, see [llms.txt](https://docs.hyperswitch.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hyperswitch.io/integration-guide/payment-suite/payment-method-card/mobile/cross-platform/react-native/headless.md).

# Headless SDK

Juspay Hyperswitch 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 Hyperswitch SDK

Initialize Juspay Hyperswitch Headless SDK onto your app with your publishable key. To get a Publishable Key please find it [here](https://app.hyperswitch.io/developers).

```javascript
import { HyperProvider } from "@juspay-tech/hyperswitch-react-native";

function App() {
  return (
    <HyperProvider publishableKey="YOUR_PUBLISHABLE_KEY">
      // Your app code here
    </HyperProvider>
  );
}
```

#### 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.

{% hint style="danger" %}
**Important**: Make sure to never share your API key with your client application as this could potentially compromise your security
{% endhint %}

#### 3. Initialize your Payment Session

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

```javascript
import { useHyper } from "@juspay-tech/react-native-hyperswitch";

const { initPaymentSession } = useHyper();
const [paymentSession,setPaymentSession] = React.useState(null);

const initializeHeadless = async() => {
  const { clientSecret } = await fetchPaymentParams();
  const params = {clientSecret:clientSecret}
  const paymentSession = await initPaymentSession(params);
  setPaymentSession(_ => paymentSession)
};

useEffect(() => {
  initializeHeadless();
}, []);

```

| options (Required)                   | Description                                                     |
| ------------------------------------ | --------------------------------------------------------------- |
| `paymentIntentClientSecret (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.

```javascript
import { useHyper } from "@juspay-tech/react-native-hyperswitch";

const { getCustomerSavedPaymentMethods,
        getCustomerDefaultSavedPaymentMethodData,
        confirmWithCustomerDefaultPaymentMethod } = useHyper();

const [defaultPaymentMethodData,setDefaultPaymentMethodData]=React.useState(null)

React.useEffect(()=>{
    const getPaymentMethods = async() => {
        const paymentMethodSession 
                = await getCustomerSavedPaymentMethods(paymentSession);
        const customer_default_saved_payment_method_data 
                = await getCustomerLastUsedSavedPaymentMethodData(paymentMethodSession);
        setDefaultPaymentMethodData(_=>customer_default_saved_payment_method_data)
    }
    getPaymentMethods()
},[])

let confirmDefaultPaymentMethod = () => {
const status = await confirmWithCustomerLastUsedPaymentMethod(paymentMethodSession);
    // handle status of payment   
    if (status != null) {
        const message = status.message;
        console.log(message)
    }
}

return (
    //build the ui using defaultPaymentMethodData
    //on click of pay use confirmDefaultPaymentMethod()
)
```

**Payload for** `confirmWithCustomerLastUsedPaymentMethod(callback)`

<table><thead><tr><th width="296">options (Required)</th><th>Description</th></tr></thead><tbody><tr><td><code>callback (function)</code></td><td>Callback to get confirm response.</td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.hyperswitch.io/integration-guide/payment-suite/payment-method-card/mobile/cross-platform/react-native/headless.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.