# React native integration

This guide explains how to integrate Kustom Checkout into a React Native app.

## Adding the Dependency For KustomCheckoutView Component

The `KustomCheckoutView` component is part of Kustom's React Native Mobile SDK. To use it, add a dependency to your app.  Refer to the [React Native: Getting Started](https://github.com/Kustom-Checkout/react-native-kustom-inapp-sdk) guide for details and which versions that are available.

## Rendering KustomCheckoutView

After adding the dependency, import and render the component:


```typescript
import {
  KustomCheckoutView,
} from 'react-native-kustom-inapp-sdk';

// ...
const CheckoutView = () => {
  return (
    <KustomCheckoutView
      style={{
        flex: 1,
      }}
      returnUrl={'returnUrl://'}
      onEvent={event => {
        // Handle the event
        if (event.action === 'complete') {
          // Checkout has been completed, you can now navigate user to confirmation screen
        }
      }}
      onError={error => {
        // Handle the error
      }}
    />
  );
};
```

## KustomCheckoutView Props

### `returnUrl`

This is the only mandatory prop. It's a string used for redirecting third-party apps back to your app.  The URL must match the registered return URL in your app.

### `style`

An optional `ViewStyle` prop to style the `KustomCheckoutView`.

### `onEvent`

An optional lambda called when the component receives an event.  The parameter is a `KustomProductEvent` object.

| Name | Type | Description |
|  --- | --- | --- |
| `action` | string | Event name |
| `params` | `{ [key: string]: any }` | Event parameters |


### `onError`

An optional lambda called when an error occurs.  The parameter is a `KustomMobileSDKError` object.

| Name | Type | Description |
|  --- | --- | --- |
| `name` | string | Error name |
| `message` | string | Error message |
| `isFatal` | boolean | Indicates whether the error is fatal (prevent further checkout). |
| `sessionId` | string | sessionId of the error event |


## KustomCheckoutView Methods

### `setSnippet`

Sets the checkout HTML snippet.  Takes a string parameter.

### `suspend`

Suspends the checkout flow. Displays a loading indicator.

### `resume`

Resumes the checkout flow after suspending.