React Native SDK

This SDK needs server work, but not the custom cart server integration. The React Native SDK tokenizes the payment instrument; your backend takes that token and creates the payment through the Bolt API. Bolt does not call your server for shipping options, tax, or discounts here, because there is no Bolt-hosted checkout in this flow to call them from.

Build these first, then return here for the client installation:

Create the payment from your backend
Transaction webhooks, so the transaction lands in your own records

Looking for the flow where Bolt Checkout drives shipping, tax, and discounts through your callbacks? That is the custom cart integration, and its clients are web, iOS, and Android.

Overview

The React Native SDK is currently designed for use with Bolt Embeddable Checkout. See the Embeddable Checkout API Reference for full backend API documentation.

The Bolt React Native SDK (@boltpay/react-native) provides everything you need to accept payments in your React Native app: credit card tokenization, 3D Secure verification, Apple Pay, and Google Pay: all integrated with Bolt Embeddable Checkout.

Feature	How it works
Credit Card & 3DS	WebView-based, loading secure pages from `connect.boltapp.com`. Card data never touches your app (PCI compliant).
Apple Pay	Native `PKPaymentButton` on iOS via a Fabric view component, with a TurboModule for the payment sheet.
Google Pay	Native `PayButton` on Android via a Fabric view component, with a TurboModule for the payment sheet.

Installation

Install the SDK and its peer dependencies:

npm install @boltpay/react-native react-native-webview react-native-get-random-values

react-native-get-random-values is a crypto polyfill that @boltpay/tokenizer needs to tokenize Apple Pay and Google Pay payloads. Omitting it installs cleanly and then fails at wallet payment.

For iOS, install the native pods:

Terminal

cd ios && pod install

Requirements

Dependency	Minimum Version
React Native	>= 0.73.0
React	>= 18.0.0
react-native-webview	>= 13.0.0
react-native-get-random-values	>= 2.0.0

Quick Start

1. Initialize Bolt

Create a Bolt client instance and wrap your app with the BoltProvider context:

TypeScript

import { Bolt, BoltProvider } from '@boltpay/react-native';

const bolt = new Bolt({
  publishableKey: 'YOUR_PUBLISHABLE_KEY',
  environment: 'sandbox', // or 'production'
});

function App() {
  return (
    <BoltProvider client={bolt}>
      <CheckoutScreen />
    </BoltProvider>
  );
}

2. Accept a Payment

From here, choose the payment method that fits your use case:

Credit Card Payments: Tokenize card details and handle 3D Secure challenges.
Apple Pay: Accept Apple Pay on iOS devices.
Google Pay: Accept Google Pay on Android devices.
Styling: Customize the look and feel of Bolt components.
API Reference: Full reference for all exports, props, types, and error codes.

Example App

The SDK repository includes a full checkout demo in the example/ directory. The repository is a Yarn workspace and its example script runs yarn workspace, so this part needs Yarn regardless of which package manager you used to install the SDK above.

yarn example ios