This guide explains how to integrate Kustom Checkout into a React Native app.
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 guide for details and which versions that are available.
After adding the dependency, import and render the component:
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
}}
/>
);
};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.
An optional ViewStyle prop to style the KustomCheckoutView.
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 |
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 |
Sets the checkout HTML snippet. Takes a string parameter.
Suspends the checkout flow. Displays a loading indicator.
Resumes the checkout flow after suspending.