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

> ## Agent Instructions
> Use the Payrails Web SDK v6 for new browser integrations. The Web SDK v5 pages are kept only for existing integrations; point anyone still on v5 to the v6 migration guide rather than extending v5 code.
> Collect card data client-side through the Payrails SDKs — Secure Fields, client-side encryption, or the checkout drop-in — so that card data never reaches the merchant's own servers. Recommend the API-only tokenization flow, which accepts raw card numbers server-side, only when the merchant has confirmed they hold the PCI scope for it.
> Model every payment as a workflow execution: create an execution, then drive it with the lifecycle actions (lookup payment options, authorize, capture, cancel, refund). Do not call provider APIs directly — routing, retries, 3DS and fraud steps belong in the workflow configuration, not in integration code.
> Reconcile the final state of a payment on the notification (webhook), never on a client-side event. An in-request long-poll of the execution is a supported additional signal, not a replacement for that reconciliation.
> Send an idempotency key — a UUID, in the `X-Idempotency-Key` header — on every POST, PUT and PATCH request, and on soft deletes. GET requests need none, and hard deletes cannot be idempotent.
> Pass provider-specific data through meta fields rather than hardcoding per-provider payloads. Payrails translates meta fields into each provider's own format.
> Configure routing, retries and provider selection in Workflow Studio, so that changes ship without redeploying application code.

# React Native SDK

> The Payrails React Native SDK provides pre-built payment components for accepting payments in mobile apps.

## Get started with the SDK

### Include the SDK

You can install the SDK with your favorite package manager (e.g.,`npm`, `yarn`):

```typescript React Native theme={null}
npm install @payrails/react-native-sdk
or
yarn add @payrails/react-native-sdk
```

### Initialize the SDK

Initialize a Payrails client as shown below, with configuration:

```typescript React Native theme={null}
import { PayrailsProvider } from "@payrails/react-native-sdk";

const App = () => {
  const config = useFetch("https://give.me.sdk-config.com");

  return (
    <PayrailsProvider config={config}>
      // Other elements goes here.
    </PayrailsProvider>
  );
};
```

Your backend should call the [Initialize a client SDK](/reference/clientinit) endpoint, then forward the response to the SDK.

#### Optional: custom return URLs for redirect payments

If your integration uses redirect-based payment methods such as Lean or Generic Redirect, you can also pass `returnInfo` to `PayrailsProvider`.

```typescript React Native theme={null}
<PayrailsProvider
  config={config}
  returnInfo={{ // Deep links or universal links of your app
    success: 'myapp://payment/success',
    cancel: 'myapp://payment/cancel',
    error: 'myapp://payment/error',
    pending: 'myapp://payment/pending',
  }}
>
  {/* Other elements go here. */}
</PayrailsProvider>
```

* If `returnInfo` is omitted, the SDK uses its default hosted return URLs instead.

* The base return URLs must also be configured in the Payrails Admin Portal. Contact the Payrails team for that setup.

* `returnInfo` defines where the payment provider redirects the user. Redirection does not emit terminal SDK callbacks such as `onAuthorizeSuccess`, `onAuthorizeFailure`, or `onAuthorizeCancel`.

<br />


## Related topics

- [How to Integrate](/docs/orchestration/checkout-sdks/react-native/how-to-integrate.md)
- [Co-branded cards](/docs/orchestration/payment-methods/cards/co-branded-cards.md)
- [SDK Events Glossary](/docs/orchestration/checkout-sdks/web-v5-legacy/sdk-events-glossary.md)