# @olo/pay-react-native

## Table Of Contents

- [About Olo Pay](#about-olo-pay)
- [About the React Native SDK](#about-the-react-native-sdk)
- [Installation](#installation)
- [Updating From a Previous Version](#updating-from-a-previous-version)
- [Setup](#setup)
- [Getting Started](#getting-started)
- [Handling Promise Rejections](#handling-promise-rejections)
- [Events](#events)
- [Components](#components)
  - [PaymentCardDetailsView](#paymentcarddetailsview)
  - [PaymentCardDetailsForm](#paymentcarddetailsform)
  - [PaymentCardCvvView](#paymentcardcvvview)
  - [DigitalWalletButton](#digitalwalletbutton)
- [OloPaySDK Module](#olopaysdk-module)
- [Migration Guide](#migration-guide)
- [Known Issues](#known-issues)
- [Changelog](#changelog)
- [License](#license)

## About Olo Pay

[Olo Pay](https://www.olo.com/solutions/pay/) is an E-commerce payment solution designed to help restaurants grow, protect, and support their digital ordering and delivery business. Olo Pay is specifically designed for digital restaurant ordering to address the challenges and concerns that weʼve heard from thousands of merchants.

## About the React Native SDK

The Olo Pay React Native SDK allows partners to easily add PCI-compliant Apple Pay and Google Pay functionality to their checkout flow and seamlessly integrate with the Olo Ordering API. The SDK supports React Native's [new architecture](https://reactnative.dev/architecture/landing-page) (Fabric)

Use of the plugin is subject to the terms of the [Olo Pay SDK License](#License).

For more information about integrating Olo Pay into your payment solutions, refer to our [Olo Pay Dev Portal Documentation](https://developer.olo.com/docs/load/olopay) _(Note: requires an Olo Developer account)_.

## Installation

### **_Important_:** If using [Expo](https://expo.dev/), be sure to [eject](https://docs.expo.dev/archive/glossary/#eject) or run [`npx expo prebuild`](https://docs.expo.dev/workflow/prebuild/) prior to installation

Run the following command from a terminal in your app's root project directory

```sh
npm install @olo/pay-react-native
```

### Android

#### Supported Versions

- _Minimum SDK Version:_
  - The minimum supported Android SDK is [API 24](https://developer.android.com/tools/releases/platforms#7.0)
  - The Android project's `minSdkVersion` must be set to `24` or higher
- Refer to the [changelog](#changelog) for other required versions (e.g. compile SDK version, gradle, etc)

### iOS

#### Supported Versions

- _Minimum iOS Version:_
  - The minimum supported version is [iOS 14](https://support.apple.com/en-us/118390#14)

In your app's Podfile:

- Add the following lines at the top:

```Podspec
source 'https://github.com/CocoaPods/Specs.git'
source 'https://github.com/ololabs/podspecs.git'
```

- Ensure that `ios.deploymentTarget` is set to at least `14.0`

Open a terminal, navigate to your app's iOS folder (usually `<projectName>/ios`), and run the following command:

```sh
pod install
```

## Updating From a Previous Version

Run the following command from a terminal in your app's root project directory

```sh
npm install @olo/pay-react-native@latest
```

### iOS-Specific Update Steps

Open a terminal, navigate to your app's iOS folder (usually `<projectName>/ios`), and run the following commands:

```sh
rm -rf Pods
rm Podfile.lock
pod update
```

> **Note:** If you run into errors after updating, delete both your `Pods` folder and `Podfile.lock` file and then run `pod install`.

[[Back to Top]](#table-of-contents)

## Setup

### Android

In order to use the `PaymentCardDetailsView` or `PaymentCardDetailsForm` components you need to install and configure [Material Components theme](https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md#4-change-your-app-theme-to-inherit-from-a-material-components-theme) in your app.

1. In your `app/build.gradle` add the dependency with a specific version

```groovy
implementation 'com.google.android.material:material:<version>'
```

2. Set the appropriate style in your `styles.xml` file. You can use a full Material Components theme or a Bridge theme (which extends AppCompat):

```xml
<!-- Option 1: Full Material Components theme (recommended) -->
<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight">
    <!-- ... -->
</style>

<!-- Option 2: Bridge theme (for apps migrating from AppCompat) -->
<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.Bridge">
    <!-- ... -->
</style>
```

### iOS

#### Component Registration (Required)

In your app's `AppDelegate.mm` (or `AppDelegate.swift`), register the Olo Pay components before the app finishes launching.

**Objective-C (AppDelegate.mm):**

Add the following import and function call:

```objc
// At the top of AppDelegate.mm
extern "C" void registerOloPayComponents(void);

// In application:didFinishLaunchingWithOptions: before [super application:...]
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  registerOloPayComponents();
  // ... rest of your existing code
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
```

**Swift (AppDelegate.swift):**

Add a bridging header with the declaration, then call it:

```swift
// In your bridging header (e.g., YourApp-Bridging-Header.h)
void registerOloPayComponents(void);

// In AppDelegate.swift
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  registerOloPayComponents()
  // ... rest of your existing code
  return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
```

[[Back to Top]](#table-of-contents)

## Getting Started

A basic high-level overview of the steps needed to integrate the React Native SDK into your hybrid app is as follows:

#### Payment Methods (new cards & digital wallets)

This approach is used for cards that have not previously been saved on file with Olo. This includes new credit cards and digital wallets. With this approach both card input components and digital wallets return a [PaymentMethod](#paymentmethod) instance that is then used to submit a basket with Olo's Ordering API. Specific details can be found below.

1. Initialize Olo Pay (see [`initialize(...)`](#initialize)).
2. Create the [PaymentMethod](#paymentmethod).
   - Credit Card Components
     1. Add a component to the App's UI (See [PaymentCardDetailsView](#paymentcarddetailsview) and [PaymentCardDetailsForm](#paymentcarddetailsform))
     2. Use the `createPaymentMethod()` function on the component to get a [PaymentMethod](#paymentmethod) instance
   - Digital Wallets _(Apple Pay & Google Pay)_
     1. Wait for [`DigitalWalletReadyEvent`](#digitalwalletreadyevent) to indicate when digital wallet payments can be processed.
     2. Create a payment method (see [`createDigitalWalletPaymentMethod(...)`](#createdigitalwalletpaymentmethod)).
3. Submit the order to [Olo's Ordering API](https://developer.olo.com/docs/load/olopay#section/Submitting-a-Basket-via-the-Ordering-API) using the [PaymentMethod](#paymentmethod) details.

#### CVV Tokens (previously saved cards)

This approach is used for cards that have previously been saved on file with Olo, and you want to reverify the CVV of the saved card prior to submitting a basket and processing a payment. The [PaymentCardCvvView](#paymentcardcvvview) component will provide a [CvvUpdateToken](#cvvupdatetoken) instance that is then used to submit a basket with Olo's Ordering API. Specific details can be found below.

1. Initialize Olo Pay (see [`initialize(...)`](#initialize)).
1. Create the [CvvUpdateToken](#cvvupdatetoken).
   1. Add the [PaymentCardCvvView](#paymentcardcvvview) component to the App's UI.
   1. Use the `createCvvUpdateToken()` function on the component to get a [CvvUpdateToken](#cvvupdatetoken) instance
1. Submit the order to [Olo's Ordering API](https://developer.olo.com/docs/load/olopay#section/Submitting-a-Basket-via-the-Ordering-API) using the [CvvUpdateToken](#cvvupdatetoken) details.

[[Back to Top]](#table-of-contents)

## Handling Promise Rejections

When calling functions on the Olo Pay React Native SDK, there is a chance that the call will fail with the promise being rejected. When this happens
the returned error object will always contain `code` and `message` properties indicating why the method call was rejected.

For convenience, the SDK exports a [`OloErrorCode`](#oloerrorcode) enum and a [`OloError`](#oloerror) type for
handling promise rejection errors.

### Example

```typescript
try {
  const paymentMethodData = await createDigitalWalletPaymentMethod({ amount: 2.34 }});
  //Handle payment method data
} catch (error) {
  let rejection = error as OloError;
  if (rejection) {
    switch(rejection.code) {
      case OloErrorCode.missingParameter: {
          // Handle missing parameter scenario
          break;
      }
      case OloErrorCode.sdkUninitialized: {
          // Handle sdk not initialized scenario
          break;
      }
    }
  } else {
    // Some other error not related to a promise rejection
  }
}
```

[[Back to Top]](#table-of-contents)

## Events

Events are used to send notifications regarding state changes that can't be completely handled by asynchronous method calls that return a promise. Details about each type of event can be found below.

#### DigitalWalletReadyEvent

You can subscribe to this event to know when digital wallets are ready to process payments. It can be referenced using the exported `DigitalWalletReadyEvent` constant or as a string with `"digitalWalletReadyEvent"`. The event returns a [`DigitalWalletStatus`](#digitalwalletstatus) object. Attempting to create a [PaymentMethod](#paymentmethod) via [createDigitalWalletPaymentMethod](#createdigitalwalletpaymentmethod) when digital wallets are not in a ready state will result in errors.

This event is emitted whenever the readiness of digital wallets change. It can change as a result of calling certain methods on the SDK (e.g. [initialize](#initialize) or [updateDigitalWalletConfig](#updatedigitalwalletconfig)) or due to changes in app state (e.g. app going in the background).

**_Important:_** This event can, and likely will, be emitted multiple times. It is recommended to keep this event listener active and update your UI accordingly whenever the app is displaying digital wallet UIs.

Example Code:

```typescript
import { OloPayEvents, DigitalWalletReadyEvent } from '@olo/pay-react-native';

let subscription = OloPayEvents.addListener(
  DigitalWalletReadyEvent,
  (event: DigitalWalletStatus) => {
    // Handle event...
  }
);

// Don't forget to unsubscribe when you no longer need to 
// know if digital wallets are in a ready state
subscription.remove();
```

[[Back to Top]](#table-of-contents)

## Components

Components are used to display credit card input fields in an app. Credit card details are not accessible by the developer, helping reduce the effort needed to maintain PCI compliance. Details about each component can be found below.

---

### PaymentCardDetailsView

The `PaymentCardDetailsView` component displays all credit card input details in a single input field and is the most compressed way to display a credit card input view. It is composed of a root `<View>` component with two direct children, the credit card input view and a `<Text>` view for displaying error messages. Each piece of the component can be individually styled via `componentStyles`, `cardStyles`, and `errorStyles` _(See [PaymentCardDetailsViewProps](#paymentcarddetailsviewprops))_

#### PaymentCardDetailsViewProps

`PaymentCardDetailsViewProps` provides customization for the card component.

| Property                          | Description                                                                                                                             |
| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| `componentStyles`                 | Options for styling the root `<View>` component                                                                                         |
| `errorStyles`                     | Options for styling the error `<Text>` component. _Default style is `{ minHeight: 20 }`_                                                |
| `cardStyles`                      | Options for styling credit card input portion of the component. _(See [PaymentCardDetailsViewStyles](#paymentcarddetailsviewstyles))_   |
| `viewProps`                       | React Native view properties for the root `<View>` component                                                                            |
| `customErrorMessages`             | Options for defining custom error messages in place of defaults _(See [CustomErrorMessages](#customerrormessages))_                     |
| `postalCodeEnabled`               | Whether or not the postal code should be displayed                                                                                      |
| `disabled`                        | Whether or not the component is disabled and cannot receive touch and input events                                                      |
| `displayErrorMessages`            | Whether or not the component should display error messages. Set to `false` if you have a custom mechanism for displaying error messages |
| `placeholders`                    | Options for specifying placeholder text. _(See [PaymentCardDetailsPlaceholders](#paymentcarddetailsplaceholders))_                      |
| `onCardChange(card: CardDetails)` | Callback called when card input changes. _(See [CardDetails](#carddetails))_                                          |
| `onFocus()`                       | Callback called when the component receives input focus                                                                     |
| `onBlur()`                        | Callback called when the component loses input focus                                                                         |
| `onFocusField(field: CardField)`  | Callback called each time focus moves to a new card input field within the component. _(See [CardField](#cardfield))_ |
| `onPaymentMethodResult(result: PaymentMethodResult)` | Callback called when payment method creation completes _(See [PaymentMethodResult](#paymentmethodresult))_ |

<code>{
componentStyles?: StyleProp\<ViewStyle>;
errorStyles?: StyleProp\<TextStyle>;
cardStyles?: [PaymentCardDetailsViewStyles](#paymentcarddetailsviewstyles);
viewProps?: ViewProps;
postalCodeEnabled?: boolean;
disabled?: boolean;
displayErrorMessages?: boolean;
placeholders?: [PaymentCardDetailsPlaceholders](#paymentcarddetailsplaceholders);
onCardChange?(card: [CardDetails](#carddetails)): void;
onFocus?(): void;
onBlur?(): void;
onFocusField?(field: [CardField](#cardfield)): void;
customErrorMessages?: [CustomErrorMessages](#customerrormessages);
onPaymentMethodResult?(result: [PaymentMethodResult](#paymentmethodresult)): void;
}</code>

> **_Important_:** Card field text and error message text have separate styling mechanisms. If the default error colors are changed, it is important to change both of them. An example is provided below:
>
> ```typescript
> <PaymentCardDetailsView
>   cardStyles={{ errorTextColor: "#00ff00" }}
>   errorStyles={{ color: "#00ff00" }}
> />
> ```

#### PaymentCardDetailsViewMethods

`PaymentCardDetailsViewMethods` defines the native methods that can be called on the `PaymentCardDetailsView` component. These methods can be accessed by passing a `ref` prop of this type into the component, and then calling them on the `ref`. See the `PaymentCardDetailsView` [example](#paymentcarddetailsview-example) code below for details.

**focus()**

```typescript
focus(field?: CardField) => void
```

Puts focus on the `PaymentCardDetailsView` component and displays the keyboard. If a [CardField](#cardfield) is passed in, focus will attempt to be given to that field. If no field is passed in, it defaults to `CardField.number`.

**blur()**

```typescript
blur() => void
```

Clears focus on the `PaymentCardDetailsView` component and hides the keyboard.

**clear()**

```typescript
clear() => void
```

Clears all card details entered in the `PaymentCardDetailsView` component and moves focus to the `CardField.number` field.

**createPaymentMethod()**

```typescript
createPaymentMethod() => void
```

Attempts to create a payment method based on the entered card details. Results are delivered via the `onPaymentMethodResult` callback:
- On success: `result.paymentMethod` contains a [PaymentMethod](#paymentmethod) instance and `result.error` is undefined
- On failure: `result.error` contains a [OloError](#oloerror) and `result.paymentMethod` is undefined. The error will contain one of the following codes:
  - [OloErrorCode.viewNotFound](#oloerrorcode)
  - [OloErrorCode.invalidNumber](#oloerrorcode)
  - [OloErrorCode.invalidExpiration](#oloerrorcode)
  - [OloErrorCode.invalidCvv](#oloerrorcode)
  - [OloErrorCode.invalidPostalCode](#oloerrorcode)
  - [OloErrorCode.expiredCard](#oloerrorcode)
  - [OloErrorCode.cardDeclined](#oloerrorcode)
  - [OloErrorCode.unknownCardError](#oloerrorcode)
  - [OloErrorCode.processingError](#oloerrorcode)
  - [OloErrorCode.connectionError](#oloerrorcode)
  - [OloErrorCode.invalidRequest](#oloerrorcode)
  - [OloErrorCode.apiError](#oloerrorcode)
  - [OloErrorCode.cancellationError](#oloerrorcode)
  - [OloErrorCode.authenticationError](#oloerrorcode)
  - [OloErrorCode.generalError](#oloerrorcode)

#### PaymentCardDetailsView Example

```typescript
import {
  PaymentCardDetailsView,
  PaymentCardDetailsViewMethods,
  PaymentMethodResult,
} from '@olo/pay-react-native';
import { View, Button } from 'react-native';
import { useRef } from 'react';

export default function MyComponent() {
  const cardRef = useRef<PaymentCardDetailsViewMethods>(null);

  const handlePaymentMethodResult = (result: PaymentMethodResult) => {
    if (result.error) {
      // Handle the error
      console.error(result.error.message);
      return;
    }

    // Use the payment method to submit a basket using Olo's ordering API
    const paymentMethod = result.paymentMethod!;
    // Submit payment with paymentMethod.id
  };

  const createPaymentMethod = () => {
    cardRef.current?.createPaymentMethod();
  };

  // Styling omitted for sake of example simplicity
  return (
    <View>
      <PaymentCardDetailsView
        displayErrorMessages={true}
        ref={cardRef}
        onPaymentMethodResult={handlePaymentMethodResult}
      />
      <Button title="Submit Payment" onPress={createPaymentMethod} />
    </View>
  );
}
```

### PaymentCardDetailsForm

The `PaymentCardDetailsForm` component displays all credit card input details in a multi-line form and is the most visible way to display a credit card input view. It is composed of a root `<View>` component with a single nested child, the credit card input form. Each piece of the component can be individually styled via `componentStyles` and `cardStyles` _(See [PaymentCardDetailsFormProps](#paymentcarddetailsformprops))_

#### PaymentCardDetailsFormProps

`PaymentCardDetailsFormProps` provides additional properties defined in the following table

| Property           | Description                                                                                                                           |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
| `componentStyles`  | Options for styling the root `<View>`                                                                                                 |
| `cardStyles`       | Options for styling credit card input portion of the component. _(See [PaymentCardDetailsFormStyles](#paymentcarddetailsformstyles))_ |
| `disabled`         | Whether or not the component is disabled and cannot receive touch and input events                                                    |
| `onFormComplete()` | Callback called when all card fields have been filled out. _(See [CardValidationStatus](#cardvalidationstatus))_       |
| `viewProps`        | React Native view properties for the root `<View>` component                                                                          |
| `placeholders`     | Options for specifying placeholder text. _(See [PaymentCardDetailsPlaceholders](#paymentcarddetailsplaceholders))_                    |
| `onPaymentMethodResult(result: PaymentMethodResult)` | Callback called when payment method creation completes _(See [PaymentMethodResult](#paymentmethodresult))_ |

<code>{
cardStyles?: [PaymentCardDetailsFormStyles](#paymentcarddetailsformstyles);
componentStyles?: StyleProp\<ViewStyle>;
disabled?: boolean;
onFormComplete?(cardValidationStatus: [CardValidationStatus](#cardvalidationstatus)): void;
viewProps?: ViewProps;
placeholders?: [PaymentCardDetailsPlaceholders](#paymentcarddetailsplaceholders);
onPaymentMethodResult?(result: [PaymentMethodResult](#paymentmethodresult)): void;
}</code>

#### PaymentCardDetailsFormMethods

`PaymentCardDetailsFormMethods` defines the native methods that can be called on the `PaymentCardDetailsForm` component. These methods can be accessed by passing a `ref` prop of this type into the component, and then calling them on the `ref`. See the `PaymentCardDetailsForm` [example](#paymentcarddetailsform-example) code below for details.

**focus()**

```typescript
focus(field?: CardField) => void
```

Puts focus on the `PaymentCardDetailsForm` component and displays the keyboard. If a [CardField](#cardfield) is passed in, focus will attempt to be given to that field. If no field is passed in, it defaults to `CardField.number`.

**blur()**

```typescript
blur() => void
```

Clears focus on the `PaymentCardDetailsForm` component and hides the keyboard.

**clear()**

```typescript
clear() => void
```

Clears all card details entered in the `PaymentCardDetailsForm` component and moves focus to the `CardField.number` field.

**createPaymentMethod()**

```typescript
createPaymentMethod() => void
```

Attempts to create a payment method based on the entered card details. Results are delivered via the `onPaymentMethodResult` callback:
- On success: `result.paymentMethod` contains a [PaymentMethod](#paymentmethod) instance and `result.error` is undefined
- On failure: `result.error` contains a [OloError](#oloerror) and `result.paymentMethod` is undefined. The error will contain one of the following codes:
  - [OloErrorCode.viewNotFound](#oloerrorcode)
  - [OloErrorCode.isValid](#oloerrorcode)
  - [OloErrorCode.invalidNumber](#oloerrorcode)
  - [OloErrorCode.invalidExpMonth](#oloerrorcode)
  - [OloErrorCode.invalidExpYear](#oloerrorcode)
  - [OloErrorCode.invalidCvv](#oloerrorcode)
  - [OloErrorCode.invalidPostalCode](#oloerrorcode)
  - [OloErrorCode.expiredCard](#oloerrorcode)
  - [OloErrorCode.cardDeclined](#oloerrorcode)
  - [OloErrorCode.unknownCardError](#oloerrorcode)
  - [OloErrorCode.processingError](#oloerrorcode)
  - [OloErrorCode.connectionError](#oloerrorcode)
  - [OloErrorCode.invalidRequestError](#oloerrorcode)
  - [OloErrorCode.apiError](#oloerrorcode)
  - [OloErrorCode.cancellationError](#oloerrorcode)
  - [OloErrorCode.authenticationError](#oloerrorcode)
  - [OloErrorCode.invalidCardDetails](#oloerrorcode)
  - [OloErrorCode.generalError](#oloerrorcode)

#### PaymentCardDetailsForm Example

```typescript
import {
  PaymentCardDetailsForm,
  PaymentCardDetailsFormMethods,
  PaymentMethodResult,
} from "@olo/pay-react-native";
import { View, Button } from "react-native";
import { useRef } from "react";

export default function MyComponent() {
  const cardRef = useRef<PaymentCardDetailsFormMethods>(null);

  const handlePaymentMethodResult = (result: PaymentMethodResult) => {
    if (result.error) {
      // Handle the error
      console.error(result.error.message);
      return;
    }

    // Use the payment method to submit a basket using Olo's ordering API
    const paymentMethod = result.paymentMethod!;
    // Submit payment with paymentMethod.id
  };

  const createPaymentMethod = () => {
    cardRef.current?.createPaymentMethod();
  };

  // Styling omitted for sake of example simplicity
  return (
    <View>
      <PaymentCardDetailsForm
        ref={cardRef}
        onPaymentMethodResult={handlePaymentMethodResult}
      />
      <Button
        title="Submit Payment"
        onPress={createPaymentMethod}
      />
    </View>
  );
};
```

### PaymentCardCvvView

The `PaymentCardCvvView` component displays a single input for a credit card's Card Verification Value (CVV). This is useful to reverify a credit card that has previously been saved with Olo. It is composed of a root `<View>` component with two nested children, the CVV code input and a `<Text>` component for displaying error messages. Each piece of the component can be individually styled via `componentStyles` and `cvvStyles` _(See [PaymentCardCvvViewProps](#paymentcardcvvviewprops))_

#### PaymentCardCvvViewProps

| Property                              | Description                                                                                                                             |
| ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| `componentStyles`                     | Options for styling the root `<View>` component                                                                                         |
| `customErrorMessages`                 | Option for defining custom error messages in place of defaults _(See [CustomFieldError](#customfielderror))_                            |
| `cvvStyles`                           | Options for styling security code input portion of the component. _(See [PaymentCardCvvViewStyles](#paymentcardcvvviewstyles))_         |
| `displayErrorMessages`                | Whether or not the component should display error messages. Set to `false` if you have a custom mechanism for displaying error messages |
| `errorStyles`                         | Options for styling the error `<Text>` component. _Default style is `{ minHeight: 20 }`_                                                |
| `disabled`                            | Whether or not the component is disabled and cannot receive touch and input events                                                      |
| `onBlur(cvvDetails: CvvDetails)`      | Callback called when the component loses input focus _(See [CvvDetails](#cvvdetails))_                                       |
| `onCvvChange(cvvDetails: CvvDetails)` | Callback called when card input changes. _(See [CvvDetails](#cvvdetails))_                                            |
| `onFocus(cvvDetails: CvvDetails)`     | Callback called when the component receives input focus _(See [CvvDetails](#cvvdetails))_                                   |
| `placeholder`                         | Placeholder text for the CVV input field                                                                                                |
| `viewProps`                           | React Native view properties for the root `<View>` component                                                                            |
| `onCvvTokenResult(result: CvvTokenResult)` | Callback called when CVV update token creation completes _(See [CvvTokenResult](#cvvtokenresult))_ |

<code>{
  componentStyles?: StyleProp\<ViewStyle>;
  customErrorMessages?: [CustomFieldError](#customfielderror);
  cvvStyles?: StyleProp\<ViewStyle>;
  displayErrorMessages?: boolean;
  errorStyles?: StyleProp\<ViewStyle>;
  disabled?: boolean:
  onBlur(details: [CvvDetails](#cvvdetails))?: void;
  onCvvChange(details: [CvvDetails](#cvvdetails))?: void;
  onFocus(details: [CvvDetails](#cvvdetails))?: void;
  placeholder?: string;
  viewProps?: ViewProps;
  onCvvTokenResult?(result: [CvvTokenResult](#cvvtokenresult)): void;
}
</code>

> **_Important_:** CVV field text and error message text have separate styling mechanisms. If the default error colors are changed, it is important to change both of them. An example is provided below:
>
> ```typescript
> <PaymentCardCvvView
>   cvvStyles={{ errorTextColor: "#00ff00" }}
>   errorStyles={{ color: "#00ff00" }}
> />
> ```

#### PaymentCardCvvViewMethods

`PaymentCardCvvViewMethods` defines the native methods that can be called on the `PaymentCardCvvView` component. These methods can be accessed by adding a `ref` prop of this type
into the component, and then calling them on the `ref`. See the `PaymentCardCvvView` [example](#paymentcardcvvview-example) code below for details.

**focus()**

```typescript
focus() => void
```

Puts focus on the `PaymentCardCvvView` component and displays the keyboard.

**blur()**

```typescript
blur() => void
```

Clears focus on the `PaymentCardCvvView` component and hides the keyboard.

**clear()**

```typescript
clear() => void
```

Clears all security code details entered in the `PaymentCardCvvView` component.

**createCvvUpdateToken()**

```typescript
createCvvUpdateToken() => void
```

Attempts to create a CVV update token based on the entered security code details. Results are delivered via the `onCvvTokenResult` callback:
- On success: `result.token` contains a [CvvUpdateToken](#cvvupdatetoken) instance and `result.error` is undefined
- On failure: `result.error` contains a [OloError](#oloerror) and `result.token` is undefined. The error will contain one of the following codes:
  - [OloErrorCode.viewNotFound](#oloerrorcode)
  - [OloErrorCode.invalidCvv](#oloerrorcode)
  - [OloErrorCode.processingError](#oloerrorcode)
  - [OloErrorCode.connectionError](#oloerrorcode)
  - [OloErrorCode.invalidRequest](#oloerrorcode)
  - [OloErrorCode.apiError](#oloerrorcode)
  - [OloErrorCode.cancellationError](#oloerrorcode)
  - [OloErrorCode.authenticationError](#oloerrorcode)
  - [OloErrorCode.generalError](#oloerrorcode)

#### PaymentCardCvvView Example

```typescript
import {
  PaymentCardCvvView,
  PaymentCardCvvViewMethods,
  CvvTokenResult,
} from '@olo/pay-react-native';
import { View, Button } from 'react-native';
import { useRef } from 'react';

export default function MyComponent() {
  const cvvRef = useRef<PaymentCardCvvViewMethods>(null);

  const handleCvvTokenResult = (result: CvvTokenResult) => {
    if (result.error) {
      // Handle the error
      console.error(result.error.message);
      return;
    }

    // Use the CVV update token for revalidating a stored credit card
    const cvvToken = result.token!;
    // Submit with cvvToken.id
  };

  const createCvvUpdateToken = () => {
    cvvRef.current?.createCvvUpdateToken();
  };

  // Styling omitted for sake of example simplicity
  return (
    <View>
      <PaymentCardCvvView
        displayErrorMessages={true}
        ref={cvvRef}
        onCvvTokenResult={handleCvvTokenResult}
      />
      <Button title="Submit CVV" onPress={createCvvUpdateToken} />
    </View>
  );
}
```

### DigitalWalletButton

A button that renders a native Apple Pay button on iOS and a native Google Pay button on Android.

#### DigitalWalletButtonProps

| Property          | Description                                                                                                        |
| ----------------- | ------------------------------------------------------------------------------------------------------------------ |
| `applePayConfig`  | Options for customizing the button for Apple Pay on iOS (See [ApplePayButtonConfig](#applepaybuttonconfig))        |
| `googlePayConfig` | Options for customizing the button for Google Pay on Android (See [GooglePayButtonConfig](#googlepaybuttonconfig)) |
| `styles`          | Options for styling the button. Default styles provide a minimum height of `40` on Android and `30` on iOS         |
| `disabled`        | Whether or not the component is disabled and cannot receive touch events                                           |
| `onPress()`       | Callback called when the button is pressed                                                                                   |

<code>{
  applePayConfig?: [ApplePayButtonConfig](#applepaybuttonconfig);
  googlePayConfig?: [GooglePayButtonConfig](#googlepaybuttonconfig);
  disabled?: boolean;
  onPress(): void;
  styles?: StyleProp\<ViewStyle\>;
}
</code>

#### DigitalWalletButton Example

```typescript
import {
  ApplePayButtonStyle,
  ApplePayButtonType,
  DigitalWalletButton,
  GooglePayButtonTheme,
  GooglePayButtonType,
  OloPaySDK
} from '@olo/pay-react-native';

export default function MyComponent() {
  const createDigitalWalletPaymentMethod = async () => {
    try {
      let result = await OloPaySDK.createDigitalWalletPaymentMethod();
      // Use result.paymentMethod method to submit a basket using Olo's ordering API
      // or result.error to handle additional error scenarios
    } catch (error) {
      // Handle the promise rejection
    }
  };

  // Styling omitted for sake of example simplicity
  return (
    <DigitalWalletButton
      onPress={createDigitalWalletPaymentMethod}
      googlePayConfig={{
        theme: GooglePayButtonTheme.dark,
        type: GooglePayButtonType.checkout,
        cornerRadius: 8,
      }}
      applePayConfig={{
        style: ApplePayButtonStyle.black,
        type: ApplePayButtonType.checkout,
        cornerRadius: 8,
      }}
    />
  );
}
```

[[Back to Top]](#table-of-contents)

## OloPaySDK Module

Native SDK methods can be called on the imported `OloPaySDK` object. This module is responsible for initializing the Olo Pay SDK and processing digital wallet payments.

```typescript
import { OloPaySDK } from '@olo/pay-react-native';
```

<docgen-index>

* [`initialize(...)`](#initialize)
* [`updateDigitalWalletConfig(...)`](#updatedigitalwalletconfig)
* [`createDigitalWalletPaymentMethod(...)`](#createdigitalwalletpaymentmethod)
* [`isInitialized()`](#isinitialized)
* [`isDigitalWalletInitialized()`](#isdigitalwalletinitialized)
* [`isDigitalWalletReady()`](#isdigitalwalletready)
* [Type Aliases](#type-aliases)
* [Enums](#enums)

</docgen-index>

## Methods

<docgen-api>
<!--Update the source file JSDoc comments and rerun docgen to update the docs below-->

### initialize(...)

```typescript
initialize(productionEnvironment: boolean, digitalWalletConfig?: DigitalWalletConfig | undefined) => Promise<void>
```

Initialize the Olo Pay SDK and, optionally, configure and initialize digital wallets. The SDK must be initialized prior to calling other methods. Calling this method **will** ensure that the Olo Pay SDK is initialized.
If a [DigitalWalletConfig](#digitalwalletconfig) is provided, when digital wallets become ready, a [DigitalWalletReadyEvent](#digitalwalletreadyevent) will be emitted. If digital wallets are not configured
and initialized here, this can be done later by calling [updateDigitalWalletConfig](#updatedigitalwalletconfig).

**Important:** The Olo Pay SDK is guaranteed to be initialized even if the promise is rejected. Promise rejections will only occur due to an error while initializing digital wallets, which happens after successful SDK initialization.

If the promise is rejected, the `code` property of the returned error object will be one of:
- [OloErrorCode.missingParameter](#oloerrorcode)
- [OloErrorCode.invalidParameter](#oloerrorcode)
- [OloErrorCode.googlePayInvalidSetup](#oloerrorcode) **_(Android only)_**
- [OloErrorCode.unexpectedError](#oloerrorcode) **_(Android only)_**

| Param                       | Type                                                                | Description                                                                |
| --------------------------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| **`productionEnvironment`** | <code>boolean</code>                                                | `true` to use the production environment, `false` for the test environment |
| **`digitalWalletConfig`**   | <code><a href="#digitalwalletconfig">DigitalWalletConfig</a></code> | Initialization options for digital wallets                                 |

--------------------


### updateDigitalWalletConfig(...)

```typescript
updateDigitalWalletConfig(digitalWalletConfig: DigitalWalletConfig) => Promise<void>
```

Update the configuration settings for digital wallets.

This can be used to change configuration parameters for digital wallets. Calling this method will
immediately invalidate digital wallet readiness and will cause a [DigitalWalletReadyEvent](#digitalwalletreadyevent)
to be emitted with a value of `false`. Once the new configuration is ready to be used,
the [DigitalWalletReadyEvent](#digitalwalletreadyevent) will be triggered again with a value of `true`.

**Note:** This method can also be used to initialize digital wallets if they were not initialized as part of SDK initialization (see [initialize](#initialize)).

If the promise is rejected, the `code` property of the returned error object will be one of:
- [OloErrorCode.missingParameter](#oloerrorcode)
- [OloErrorCode.invalidParameter](#oloerrorcode)
- [OloErrorCode.sdkUninitialized](#oloerrorcode)
- [OloErrorCode.googlePayInvalidSetup](#oloerrorcode) **_(Android only)_**
- [OloErrorCode.unexpectedError](#oloerrorcode) **_(Android only)_**

| Param                     | Type                                                                | Description                                                                                                           |
| ------------------------- | ------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| **`digitalWalletConfig`** | <code><a href="#digitalwalletconfig">DigitalWalletConfig</a></code> | The new configuration settings for digital wallets. See [DigitalWalletConfig](#digitalwalletconfig) for more details. |

--------------------


### createDigitalWalletPaymentMethod(...)

```typescript
createDigitalWalletPaymentMethod(options: DigitalWalletPaymentRequestOptions) => Promise<DigitalWalletPaymentMethodResult>
```

Launch the digital wallet flow and generate a payment method to be used with Olo's Ordering API.

If the promise is rejected, the `code` property of the returned error object will be one of:
- [OloErrorCode.sdkUninitialized](#oloerrorcode)
- [OloErrorCode.digitalWalletUninitialized](#oloerrorcode)
- [OloErrorCode.digitalWalletNotReady](#oloerrorcode)
- [OloErrorCode.invalidParameter](#oloerrorcode)
- [OloErrorCode.missingParameter](#oloerrorcode)
- [OloErrorCode.emptyCompanyLabel](#oloerrorcode)
- [OloErrorCode.invalidCountyCode](#oloerrorcode)
- [OloErrorCode.lineItemsTotalMismatch](#oloerrorcode)
- [OloErrorCode.applePayEmptyMerchantId](#oloerrorcode) **_(iOS only)_**
- [OloErrorCode.applePayUnsupported](#oloerrorcode) **_(iOS only)_**
- [OloErrorCode.applePayError](#oloerrorcode) **_(iOS only)_**
- [OloErrorCode.applePayTimeout](#oloerrorcode) **_(iOS only)_**
- [OloErrorCode.googlePayNetworkError](#oloerrorcode) **_(Android only)_**
- [OloErrorCode.googlePayDeveloperError](#oloerrorcode) **_(Android only)_**
- [OloErrorCode.googlePayInternalError](#oloerrorcode) **_(Android only)_**
- [OloErrorCode.unexpectedError](#oloerrorcode) **_(Android only)_**
- [OloErrorCode.generalError](#oloerrorcode)

```typescript
try {
  const { paymentMethod } = await createDigitalWalletPaymentMethod({ amount: 5.00 });
  if (paymentMethod === undefined) {
    // User canceled the digital wallet flow
  } else {
    // Send paymentMethod to Olo's Ordering API
  }
} catch (error) {
  // Handle error
}
```

| Param         | Type                                                                                              | Description                                      |
| ------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------ |
| **`options`** | <code><a href="#digitalwalletpaymentrequestoptions">DigitalWalletPaymentRequestOptions</a></code> | Options for processing a digital wallet payment. |

**Returns:** <code>Promise&lt;<a href="#digitalwalletpaymentmethodresult">DigitalWalletPaymentMethodResult</a>&gt;</code>

--------------------


### isInitialized()

```typescript
isInitialized() => Promise<InitializationStatus>
```

Check if the Olo Pay SDK has been initialized

**Returns:** <code>Promise&lt;<a href="#initializationstatus">InitializationStatus</a>&gt;</code>

--------------------


### isDigitalWalletInitialized()

```typescript
isDigitalWalletInitialized() => Promise<InitializationStatus>
```

Check if digital wallets have been initialized. On iOS, digital wallets are initialized when the SDK is initialized, so this method
will behave the same as `isInitialized()`. On Android, a separate call to `initializeGooglePay()` is required to initialize digital wallets.

**Returns:** <code>Promise&lt;<a href="#initializationstatus">InitializationStatus</a>&gt;</code>

--------------------


### isDigitalWalletReady()

```typescript
isDigitalWalletReady() => Promise<DigitalWalletStatus>
```

Check if digital wallets are ready to be used. Events are emitted whenever the digital wallet status
changes, so listenting to that event can be used instead of calling this method, if desired.

**Returns:** <code>Promise&lt;<a href="#digitalwalletstatus">DigitalWalletStatus</a>&gt;</code>

--------------------


### Type Aliases


#### DigitalWalletConfig

Options for intializing digital wallets
| Property | Description | Default |
| -------- | ----------- | ------- |
| `countryCode` | A two character country code for the vendor that will be processing the payment | 'US' |
| `currencyCode` | Currency code to be used for transactions | <a href="#currencycode">`CurrencyCode</a>.usd` |
| `companyLabel` | The company display name | - |
| `emailRequired` | Whether an email will be collected and returned when processing transactions | `false` |
| `fullNameRequired` | Whether a full name will be collected and returned when processing transactions | `false` |
| `fullBillingAddressRequired` |  Whether a full billing address will be collected and returned when processing transactions | `false` |
| `phoneNumberRequired` | Whether a phone number will be collected and returned when processing transactions | `false` |
| `initializeApplePay` | Whether Apple Pay should be initialized. | - |
| `initializeGooglePay` | Whether Google Pay should be initialized. | - |
| `applePayConfig` | Configuration options for initializing Apple Pay. Required if `initializeApplePay` is `true` | - |
| `googlePayConfig` | Configuration options for initializing Google Pay. Required if `initializeGooglePay` is `true` | - |

**Note:** If Apple Pay or Google Pay were previously initialized and the respective initialize property (`initializeApplePay` or `initializeGooglePay`) is set to `false`, this will not uninitialize digital wallets and will result in a no-op.

<code>{ companyLabel: string; countryCode?: string; currencyCode?: <a href="#currencycode">CurrencyCode</a>; emailRequired?: boolean; phoneNumberRequired?: boolean; fullNameRequired?: boolean; fullBillingAddressRequired?: boolean; initializeApplePay: boolean; initializeGooglePay: boolean; applePayConfig?: <a href="#applepayconfig">ApplePayConfig</a>; googlePayConfig?: <a href="#googlepayconfig">GooglePayConfig</a>; }</code>


#### CurrencyCode

Type alias representing currency codes supported by Olo Pay.

<code>'USD' | 'CAD'</code>


#### ApplePayConfig

Options for initializing Apple Pay
| Property | Description | Default |
| -------- | ----------- | ------- |
| `fullPhoneticNameRequired` | Whether a full phonetic name will be collected and returned when processing transactions | `false` |
| `merchantId` | The merchant id registered with Apple for Apple Pay | - |

<code>{ fullPhoneticNameRequired?: boolean; merchantId: string; }</code>


#### GooglePayConfig

Options for intializing Google Pay
| Property | Description | Default |
| -------- | ----------- | ------- |
| `productionEnvironment` | Whether Google Pay will use the production environment | `true` |
| `existingPaymentMethodRequired` | Whether an existing saved payment method is required for Google Pay to be considered ready | `false` |
| `currencyMultiplier` | Multiplier to convert the amount to the currency's smallest unit (e.g. $2.34 * 100 = 234 cents) | `100` |

<code>{ productionEnvironment?: boolean; existingPaymentMethodRequired?: boolean; currencyMultiplier?: number; }</code>


#### DigitalWalletPaymentMethodResult

Type alias representing a digital wallet payment method result.

| Property | Description |
| -------- | ----------- |
| `paymentMethod` | The payment method generated by the digital wallet flow, or `undefined` if the user canceled the flow |

<code>{ paymentMethod?: <a href="#paymentmethod">PaymentMethod</a>; }</code>


#### PaymentMethod

Payment method used for submitting payments to Olo's Ordering API

| Property | Description |
| -------- | ----------- |
| `id` | The payment method id. This should be set to the `token` field when submitting a basket |
| `last4` | The last four digits of the card |
| `cardType` | The issuer of the card |
| `expMonth` | Two-digit number representing the card's expiration month |
| `expYear` | Four-digit number representing the card's expiration year |
| `postalCode` | Zip or postal code. Will always have the same value as `billingAddress.postalCode` |
| `countryCode` | Two character country code. Will always have the same value as `billingAddress.countryCode` |
| `isDigitalWallet` | `true` if this payment method was created by digital wallets (e.g. Apple Pay or Google Pay), `false` otherwise |
| `productionEnvironment` | `true` if this payment method was created in the production environment, `false` otherwise |
| `email` | The email address associated with the transaction, or an empty string if unavailable. Only provided for digital wallet payment methods (see `isDigitalWallet`) |
| `digitalWalletCardDescription` | The description of the card, as provided by Apple or Google. Only provided for digital wallet payment methods (see `isDigitalWallet`) |
| `billingAddress` | The billing address associated with the transaction. The country code and postal code fields will always have a non-empty value. Other fields will only have non-empty values for digital wallet payment methods (see `isDigitalWallet`) |
| `fullName` | The full name associated with the transaction. Will only have a non-empty value for digital wallet payment methods (see `isDigitalWallet`) |
| `fullPhoneticName` | The full phonetic name associated with the transaction. Will only have a non-empty value for digital wallet payment methods (see `isDigitalWallet`) **_(iOS only)_** |

<code>{ id: string; last4: string; cardType: <a href="#cardtype">CardType</a>; expMonth: number; expYear: number; postalCode: string; countryCode: string; isDigitalWallet: boolean; productionEnvironment: boolean; email: string; digitalWalletCardDescription: string; billingAddress: <a href="#address">Address</a>; fullName: string; fullPhoneticName: string; phoneNumber: string; }</code>


#### Address

Represents an address. Currently only used for digital wallets, if billing address details are requested to be returned in the
generated digital wallet payment method.

| Property | Description |
| -------- | ----------- |
| `address1` | The first line of the address |
| `address2` | The second line of the address, or an empty string |
| `address3` | The third line of the address, or an empty string |
| `postalCode` | The postal or zip code |
| `countryCode` | The two digit ISO country code |
| `administrativeArea` | A country subdivision, such as a state or province |

<code>{ address1: string; address2: string; address3: string; locality: string; postalCode: string; countryCode: string; administrativeArea: string; }</code>


#### DigitalWalletPaymentRequestOptions

Type alias representing options for a digital wallet payment method request

<code><a href="#googlepaypaymentrequestoptions">GooglePayPaymentRequestOptions</a> | <a href="#applepaypaymentrequestoptions">ApplePayPaymentRequestOptions</a></code>


#### GooglePayPaymentRequestOptions

Options for requesting a payment method via Google Pay
| Property | Description | Default |
| -------- | ----------- | ------- |
| `amount` | The amount to be charged | - |
| `checkoutStatus` | The checkout status to be used for the transaction | `FinalImmediatePurchase` |
| `totalPriceLabel` | A custom value to override the default total price label in the Google Pay sheet | - |
| `lineItems` | A list of line items to be displayed in the digital wallet payment sheet | - |
| `validateLineItems` | Whether or not to validate the line items. If `true`, [createDigitalWalletPaymentMethod](#createdigitalwalletpaymentmethod) will throw an exception if the sum of the line items does not equal the total amount passed in. If no line items are provided, this parameter is ignored. | `true` |

<code>{ amount: number; checkoutStatus?: <a href="#googlepaycheckoutstatus">GooglePayCheckoutStatus</a>; totalPriceLabel?: string; lineItems?: LineItem[]; validateLineItems?: boolean; }</code>


#### LineItem

Represents a line item in a digital wallet transaction

| Property | Description |
| -------- | ----------- |
| `label` | The label of the line item |
| `amount` | The amount of the line item |
| `type` | Enum representing the type of a line item in a digital wallet transaction |
| `status` | Enum representing the status of a line item. If not provided, default value is <a href="#lineitemstatus">`LineItemStatus.final`</a> |

<code>{ label: string; amount: number; type: <a href="#lineitemtype">LineItemType</a>; status?: <a href="#lineitemstatus">LineItemStatus</a>; }</code>


#### ApplePayPaymentRequestOptions

Options for requesting a payment method via Apple Pay
| Property | Description | Default |
| -------- | ----------- | ------- |
| `amount` | The amount to be charged | - |
| `lineItems` | A list of line items to be displayed in the digital wallet payment sheet | - |
| `validateLineItems` | Whether or not to validate the line items. If `true`, [createDigitalWalletPaymentMethod](#createdigitalwalletpaymentmethod) will throw an exception if the sum of the line items does not equal the total amount passed in. If no line items are provided, this parameter is ignored. | `true` |

<code>{ amount: number; lineItems?: LineItem[]; validateLineItems?: boolean; }</code>


#### InitializationStatus

Represents the status for SDK initialization
| Property | Description |
| -------- | ----------- |
| `isInitialized` | `true` if the SDK is initialized, `false` otherwise |

<code>{ isInitialized: boolean; }</code>


#### DigitalWalletStatus

Represents the status of digital wallets.
| Property | Description |
| -------- | ----------- |
| `isReady` | `true` if digital wallets are ready to be used, `false` otherwise |

<code>{ isReady: boolean; }</code>


### Enums


#### CardType

| Members           | Value                      | Description                                                                                                       |
| ----------------- | -------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| **`visa`**        | <code>'Visa'</code>        | Visa credit card type. Pass the string value of this into the Olo Ordering API when submitting orders             |
| **`amex`**        | <code>'Amex'</code>        | American Express credit card type. Pass the string value of this into the Olo Ordering API when submitting orders |
| **`mastercard`**  | <code>'Mastercard'</code>  | Mastercard credit card type. Pass the string value of this into the Olo Ordering API when submitting orders       |
| **`discover`**    | <code>'Discover'</code>    | Discover credit card type. Pass the string value of this into the Olo Ordering API when submitting orders         |
| **`unsupported`** | <code>'Unsupported'</code> | Unsupported credit card type. Passing this to the Olo Ordering API will result in an error                        |
| **`unknown`**     | <code>'Unknown'</code>     | Unknown credit card type. Passing this to the Olo Ordering API will result in an error                            |


#### GooglePayCheckoutStatus

| Members                      | Value                                 | Description                                                                                                                                               |
| ---------------------------- | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`estimatedDefault`**       | <code>'EstimatedDefault'</code>       | Represents an estimated price (meaning it's not final and could change) and the default checkout option. The confirmation button will display "Continue". |
| **`finalDefault`**           | <code>'FinalDefault'</code>           | Represents the final price of the transaction and the default checkout option. The confirmation button will display "Continue".                           |
| **`finalImmediatePurchase`** | <code>'FinalImmediatePurchase'</code> | Represents the final price of the transaction and the immediate checkout option. The confirmation button will display "Pay Now".                          |


#### LineItemType

| Members        | Value                                           | Description                                                     |
| -------------- | ----------------------------------------------- | --------------------------------------------------------------- |
| **`subtotal`** | <code>'Subtotal'</code>                         | Represents a subtotal line item in a digital wallet transaction |
| **`lineItem`** | <code>'<a href="#lineitem">LineItem</a>'</code> | Represents a line item in a digital wallet transaction          |
| **`tax`**      | <code>'Tax'</code>                              | Represents a tax line item in a digital wallet transaction      |


#### LineItemStatus

| Members       | Value                  | Description                                                                                                           |
| ------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------- |
| **`final`**   | <code>'Final'</code>   | Indicates that the price is final and has no variance                                                                 |
| **`pending`** | <code>'Pending'</code> | Indicates that the price is pending and may change. On iOS this will cause the amount to appear as an elipsis ("...") |

</docgen-api>

<!--
Everything below here is manually added. OloErrorCode and OloError are exported by our SDK,
but due to a limitation with the capacitor docgen tool, they don't get added to the documentation because
they aren't referenced by anything in the SDK definitions file.
==========================================================================================================
-->

<!-- NOTE: The following enums are part of the auto-generated Enums section above -->

#### OloErrorCode

| Members                       | Value                          | Description                                                                             |
|-------------------------------|--------------------------------|-----------------------------------------------------------------------------------------|
| `apiError`                    | 'ApiError'                     | A general-purpose API error occurred                                                    |
| `applePayEmptyMerchantId`     | 'ApplePayEmptyMerchantId'      | The `merchantId` was empty when initializing Apple Pay _(iOS Only)_                     |
| `applePayError`               | 'ApplePayError'                | There was an error with Apple Pay _(iOS Only)_                                          |
| `applePayTimeout`             | 'ApplePayTimeout'              | A timeout occurred while attempting to process an Apple Pay transaction _(iOS Only)_    |
| `applePayUnsupported`         | 'ApplePayUnsupported'          | The device doesn't support Apple Pay _(iOS Only)_                                       |
| `authenticationError`         | 'AuthenticationError'          | An authentication issue occurred with the server                                        |
| `cancellationError`           | 'CancellationError'            | The operation was cancelled by the server                                               |
| `cardDeclined`                | 'CardDeclined'                 | The card was declined                                                                   |
| `connectionError`             | 'ConnectionError'              | An issue occurred connecting to the server                                              |
| `digitalWalletNotReady`       | 'DigitalWalletNotReady'        | Digital wallets were not ready when attempting an action                                |
| `digitalWalletUninitialized`  | 'DigitalWalletUninitialized'   | Digital wallets were uninitialized when attempting an action                            |
| `emptyCompanyLabel`           | 'EmptyCompanyLabel'            | The value for the company label was empty                                               |
| `expiredCard`                 | 'ExpiredCard'                  | The card is expired                                                                     |
| `generalError`                | 'GeneralError'                 | A general-purpose error occurred                                                        |
| `googlePayDeveloperError`     | 'GooglePayDeveloperError'      | A developer error occurred, usually due to malformed configuration _(Android Only)_     |
| `googlePayInternalError`      | 'GooglePayInternalError'       | An internal Google error occurred _(Android Only)_                                      |
| `googlePayInvalidSetup`       | 'GooglePayInvalidSetup'        | Missing `com.google.android.gms.wallet.api.enabled` in AndroidManifest _(Android Only)_ |
| `googlePayNetworkError`       | 'GooglePayNetworkError'        | A network error occurred with Google's servers _(Android Only)_                         |
| `invalidCardDetails`          | 'InvalidCardDetails'           | The card details are invalid                                                            |
| `invalidCountryCode`          | 'InvalidCountryCode'           | The country code is not supported by Olo Pay (US or Canada)                             |
| `invalidCVV`                  | 'InvalidCVV'                   | The card security code is invalid or incomplete                                         |
| `invalidExpiration`           | 'InvalidExpiration'            | The card's expiration date is invalid                                                   |
| `invalidNumber`               | 'InvalidNumber'                | The card's number is invalid                                                            |
| `invalidParameter`            | 'InvalidParameter'             | Promise rejected due to an invalid parameter                                            |
| `invalidPostalCode`           | 'InvalidPostalCode'            | The card's zip code is invalid or incorrect                                             |
| `invalidRequest`              | 'InvalidRequest'               | A request to servers has invalid parameters                                             |
| `lineItemsTotalMismatch`      | 'LineItemsTotalMismatch'       | The amount total did not match the sum of the line items                                |
| `missingParameter`            | 'MissingParameter'             | A required parameter is missing                                                         |
| `processingError`             | 'ProcessingError'              | An error occurred while processing the card info                                        |
| `sdkUninitialized`            | 'SdkUninitialized'             | The SDK isn't initialized yet                                                           |
| `unexpectedError`             | 'UnexpectedError'              | An unexpected error occurred                                                            |
| `unknownCard`                 | 'UnknownCard'                  | An unknown or unaccounted-for card error occurred                                       |
| `viewNotFound`                | 'ViewNotFound'                 | The native view associated with the component could not be found                        |

#### CardField

Represents the different input fields of the [`PaymentCardDetailsView`](#paymentcarddetailsview) and [`PaymentCardDetailsForm`](#paymentcarddetailsform) components

| Property     | Value        | Description                     |
| ------------ | ------------ | ------------------------------- |
| `number`     | 'number'     | Credit card number field        |
| `expiration` | 'expiration' | Credit card expiration field    |
| `cvv`        | 'cvv'        | Credit card security code field |
| `postalCode` | 'postalCode' | Credit card postal code field   |

#### FontWeight

Options for determining the weight of the font.

| Property     | Description                                                                             |
| ------------ | --------------------------------------------------------------------------------------- |
| `ultraLight` | Ultra light font weight. Corresponds to a value of `100`                                |
| `thin`       | Thin font weight. Corresponds to a value of `200`                                       |
| `light`      | Light font weight. Corresponds to a value of `300`                                      |
| `regular`    | Regular font weight. This is the default in most cases. Corresponds to a value of `400` |
| `medium`     | Medium font weight. Corresponds to a value of `500`                                     |
| `semiBold`   | Semi Bold font weight. Corresponds to a value of `600`                                  |
| `bold`       | Bold font weight. Corresponds to a value of `700`                                       |
| `extraBold`  | Extra bold font weight. Corresponds to a value of `800`                                 |
| `black`      | Heaviest font weight. Corresponds to a value of `900`                                   |

#### ApplePayButtonStyle

Options representing different visual styles available for Apple Pay when used with a
[`DigitalWalletButton`](#digitalwalletbutton). Values map directly to Apple's 
[PKPaymentButtonStyle](https://developer.apple.com/documentation/PassKit/PKPaymentButtonStyle).

> Some values are only available on specific versions of iOS. If an unsupported value is used, it will 
> default to `black`

| Property       | Limitations | Description                                                           |
| -------------- | ----------- | --------------------------------------------------------------------- |
| `automatic`    | _iOS 14+_   | A button that automatically switches between light mode and dark mode |
| `black`        |             | A black button with white lettering                                   |
| `white`        |             | A white button with black lettering                                   |
| `whiteOutline` |             | A white button with black lettering and a black outline               |

#### ApplePayButtonType

Options representing different types of Apple Pay buttons that can be displayed with a 
[`DigitalWalletButton`](#digitalwalletbutton). Values map directly to Apple's 
[PKPaymentButtonType](https://developer.apple.com/documentation/passkit/pkpaymentbuttontype).

> Some values are only available on specific versions of iOS. If an unsupported value is used, it will 
> default to `checkout`

| Property     | Limitations | Description                                                                                                |
| ------------ | ----------- | -----------------------------------------------------------------------------------------------------------|
| `addMoney`   | _iOS 14+_   | A button that uses the phrase _"Add Money with"_ in conjunction with the Apple Pay logo                    |
| `book`       |             | A button that uses the phrase _"Book with"_ in conjunction with the Apple Pay logo                         |
| `buy`        |             | A button that uses the phrase _"Buy with"_ in conjunction with the Apple Pay logo                          |
| `checkout`   |             | A button that uses the phrase _"Checkout with"_ in conjunction with the Apple Pay logo                     |
| `continue`   | _iOS 15+_   | A button that uses the phrase _"Continue with"_ in conjunction with the Apple Pay logo                     |
| `contribute` | _iOS 14+_   | A button that uses the phrase _"Contribute with"_ in conjunction with the Apple Pay logo                   |
| `donate`     |             | A button that uses the phrase _"Donate with"_ in conjunction with the Apple Pay logo                       |
| `inStore`    |             | A button that uses the phrase _"Pay with"_ in conjunction with the Apple Pay logo                          |
| `order`      | _iOS 14+_   | A button that uses the phrase _"Order with"_ in conjunction with the Apple Pay logo                        |
| `plain`      |             | A button with the Apple Pay logo only                                                                      |
| `pay`        |             | A button that uses the phrase _"Pay with"_ in conjunction with the Apple Pay logo. Equivalent to `inStore` |
| `reload`     | _iOS 14+_   | A button that uses the phrase _"Reload with"_ in conjunction with the Apple Pay logo                       |
| `rent`       | _iOS 14+_    | A button that uses the phrase _"Rent with"_ in conjunction with the Apple Pay logo                         |
| `setUp`      |             | A button that uses the phrase _"Set up with"_ in conjunction with the Apple Pay logo                       |
| `subscribe`  |             | A button that uses the phrase _"Subscribe with"_ in conjunction with the Apple Pay logo                    |
| `support`    | _iOS 14+_    | A button that uses the phrase _"Support with"_ in conjunction with the Apple Pay logo                      |
| `tip`        | _iOS 14+_    | A button that uses the phrase _"Tip with"_ in conjunction with the Apple Pay logo                          |
| `topUp`      | _iOS 14+_    | A button that uses the phrase _"Top up with"_ in conjunction with the Apple Pay logo                       |

#### GooglePayButtonTheme

Options representing different visual styles available for Apple Pay when used with a
[`DigitalWalletButton`](#digitalwalletbutton). Values map directly to Google's
[ButtonTheme](https://developers.google.com/android/reference/com/google/android/gms/wallet/button/ButtonConstants.ButtonTheme)

| Property     | Description           |
| ------------ | ----------------------|
| `dark`       | A dark-themed button  |
| `light`      | A light-themed button |

#### GooglePayButtonType

Options representing different types of Google Pay buttons that can be displayed with a 
[`DigitalWalletButton`](#digitalwalletbutton). Values map directly to Google's
[ButtonType](https://developers.google.com/android/reference/com/google/android/gms/wallet/button/ButtonConstants.ButtonType)

| Property     | Description                                                                              |
| ------------ | -----------------------------------------------------------------------------------------|
| `book`       | A button that uses the phrase _"Book with"_ in conjunction with the Google Pay logo      |
| `buy`        | A button that uses the phrase _"Buy with"_ in conjunction with the Google Pay logo       |
| `checkout`   | A button that uses the phrase _"Checkout with"_ in conjunction with the Google Pay logo  |
| `donate`     | A button that uses the phrase _"Donate with"_ in conjunction with the Google Pay logo    |
| `order`      | A button that uses the phrase _"Order with"_ in conjunction with the Google Pay logo     |
| `pay`        | A button that uses the phrase _"Pay with"_ in conjunction with the Google Pay logo.      |
| `plain`      | A button with the Google Pay logo only                                                   |
| `subscribe`  | A button that uses the phrase _"Subscribe with"_ in conjunction with the Google Pay logo |

### Additional Type Aliases

#### OloError

When a promise is rejected, the error object returned is guaranteed to have
these properties to understand what went wrong. There may be additional properties
on the object, but `code` and `message` will always be available.

| Property  | Description                                                                                                                                                        |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `code`    | The code to indicate why the promise was rejected                                                                                                                  |
| `message` | A message providing more context about why the promise was rejected. e.g. If the `code` is `missingParameter` the message will indicate which parameter is missing |

#### PaymentCardDetailsPlaceholders

Options for specifying placeholder values for each credit card input field

| Property     | Description                                                 |
| ------------ | ----------------------------------------------------------- |
| `number`     | The placeholder value for the credit card number field      |
| `expiration` | The placeholder value for the credit card expiration field  |
| `cvv`        | The placeholder value for the credit card cvv field         |
| `postalCode` | The placeholder value for the credit card postal code field |

<code>{ number?: string; expiration?: string; cvv?: string; postalCode?: string }</code>

#### PaymentCardDetailsViewStyles

Options for styling the [PaymentCardDetailsView](#paymentcarddetailsview) component. All colors should be specified in hex format.

| Property           | Description                                                                                                                                                                                                                   |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `styles`           | React Native styles for this view. Default is `{ minHeight: 50 }`                                                                                                                                                             |
| `borderWidth`      | The width of the card view's border                                                                                                                                                                                           |
| `borderColor`      | The color of the card view's border                                                                                                                                                                                           |
| `cornerRadius`     | The corner radius of the card view's border                                                                                                                                                                                   |
| `backgroundColor`  | The background color for the card view _(Android Only: Requires API 27+)_                                                                                                                                                     |
| `textColor`        | The text color for user-entered text _(Android Only: Requires API 27+)_                                                                                                                                                       |
| `fontSize`         | The font size for all text input                                                                                                                                                                                              |
| `fontFamily`       | The font family used for text                                                                                                                                                                                                 |
| `placeholderColor` | The color for placeholder text _(Android Only: Requires API 27+)_                                                                                                                                                             |
| `cursorColor`      | The color for the cursor _(Android Only: Requires API 29+)_                                                                                                                                                                   |
| `errorTextColor`   | The color of the text inside the input fields if they are in an error state. Consider changing [`errorStyles.color`](#paymentcarddetailsviewprops) when changing this property _(Android Only: Requires API 27+)_             |
| `fontWeight`       | The stroke weight of the font in each of the fields. API 28+ can support all font weights. Lower API versions interpret a [FontWeight](#fontweight) of `700` or above as `bold` and below `700` as `regular` _(Android Only)_ |
| `italic`           | Determins if the font inside the fields should be italic style _(Android Only)_                                                                                                                                               |
| `textPaddingLeft`  | Padding (in pixels) for the left of the card input area. _(Android Only)_                                                                                                                                                     |
| `textPaddingRight` | Padding (in pixels) for the right of the card input area. _(Android Only)_                                                                                                                                                    |

<code>{
styles?: StyleProp\<ViewStyle>;
borderWidth?: number;
borderColor?: string;
cornerRadius?: number;
backgroundColor?: string;
textColor?: string;
fontSize?: number;
fontFamily?: string;
placeholderColor?: string;
cursorColor?: string;
errorTextColor?: string;
fontWeight?: [FontWeight](#fontweight);
italic?: boolean;
textPaddingLeft?: number;
textPaddingRight?: number;
}</code>

#### PaymentCardDetailsFormStyles

Options for styling the [PaymentCardDetailsForm](#paymentcarddetailsform) component. All colors should be specified in hex format.
| Property | Description |
| -------- | ----------- |
| `styles` | React Native styles for this view. _Default style in iOS is `{ minHeight: 190 }` and in Android it is `{ minHeight: 310 }`_ |
| `backgroundColor` | The background color of the form |
| `cursorColor` | The color of the cursor within the form |
| `borderWidth` | The width of the card view's border _(Android Only)_ |
| `borderColor` | The color of the card view's border _(Android Only)_ |
| `cornerRadius` | The corner radius of the card view's border _(Android Only)_ |
| `textColor` | The text color for user-entered text _(Android Only: Requires API 27+)_ |
| `fontSize` | The font size for all text input _(Android Only)_ |
| `fontFamily` | The font family used for text _(Android Only)_ |
| `placeholderColor` | The color for placeholder text _(Android Only: Requires API 27+)_ |
| `focusedPlaceholderColor` | The color for placeholder text _(Android Only: Requires API 27+)_ |
| `fontWeight` | The stroke weight of the font in each of the fields. API 28+ can support all font weights. Lower API versions interpret a [FontWeight](#fontweight) of `700` or above as `bold` and below `700` as `regular` _(Android Only)_ |
| `cardElevation` | The depth of the form view's shadow _(Android Only)_ |
| `dividerWidth` | The width of the form view's border _(Android Only)_ |
| `dividerColor` | The color of the form view's dividers _(Android Only)_ |
| `italic` | Determins if the font inside the fields should be italic style _(Android Only)_ |
| `textPaddingLeft` | Padding (in pixels) for the left of the form input area. _(Android Only)_ |
| `textPaddingRight` | Padding (in pixels) for the right of the form input area. _(Android Only)_ |

<code>{
styles?: StyleProp<ViewStyle>;
backgroundColor?: string;
cursorColor?: string;
borderColor?: string;
borderWidth?: number;
cornerRadius?: number;
textPaddingLeft?: number;
textPaddingRight?: number;
fieldDividerWidth?: number;
fieldDividerColor?: string;
cardElevation?: number;
textColor?: string;
placeholderColor?: string;
focusedPlaceholderColor?: string;
fontSize?: number;
fontFamily?: string;
fontWeight?: [FontWeight](#fontweight);
italic?: boolean;
};</code>

#### CardValidationStatus

Represents the validation state of a credit card component. This is used in the [`PaymentCardDetailsForm`](#paymentcarddetailsform) `onFormComplete` property and is extended in [`CardDetails`](#carddetails) to be used in the [`PaymentCardDetailsView`](#paymentcarddetailsview) `onCardChange` property.

| Property  | Description                                 |
| --------- | ------------------------------------------- |
| `isValid` | Whether or not the card is in a valid state |

<code>
{
  isValid: boolean;
}
</code>

#### PaymentCardCvvViewStyles

Options for styling the [PaymentCardCvvView](#paymentcardcvvview) component. All colors should be specified in hex format.

| Property           | Description                                                                                                                                                                                                                   |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `styles`           | React Native styles for this view. Default style is `{ minHeight: 45 }`                                                                                                                                                       |
| `borderWidth`      | The width of the input view's border                                                                                                                                                                                          |
| `borderColor`      | The color of the input view's border                                                                                                                                                                                          |
| `cornerRadius`     | The corner radius of the input view's border                                                                                                                                                                                  |
| `backgroundColor`  | The background color for the input view _(Android Only: Requires API 27+)_                                                                                                                                                    |
| `textColor`        | The text color for user-entered text _(Android Only: Requires API 27+)_                                                                                                                                                       |
| `fontSize`         | The font size for all text                                                                                                                                                                                                    |
| `fontFamily`       | The font family used for text                                                                                                                                                                                                 |
| `placeholderColor` | The color for placeholder text _(Android Only: Requires API 27+)_                                                                                                                                                             |
| `cursorColor`      | The color for the cursor _(Android Only: Requires API 29+)_                                                                                                                                                                   |
| `errorTextColor`   | The color of the text inside the input field if they are in an error state. Consider changing [`errorStyles.color`](#paymentcardcvvviewprops) when changing this property _(Android Only: Requires API 27+)_                  |
| `fontWeight`       | The stroke weight of the font in each of the fields. API 28+ can support all font weights. Lower API versions interpret a [FontWeight](#fontweight) of `700` or above as `bold` and below `700` as `regular` _(Android Only)_ |
| `italic`           | Determins if the font inside the field should be italic style _(Android Only)_                                                                                                                                                |
| `textPaddingLeft`  | Padding (in pixels) for the left of the card input area                                                                                                                                                                       |
| `textPaddingRight` | Padding (in pixels) for the right of the card input area                                                                                                                                                                      |
| `textAlign`        | The alignment of the text within the view. The value can be one of `left`, `center`, or `right`                                                                                                                               |

<code>{
styles?: StyleProp\<ViewStyle>;
borderWidth?: number;
borderColor?: string;
cornerRadius?: number;
backgroundColor?: string;
textColor?: string;
fontSize?: number;
fontFamily?: string;
placeholderColor?: string;
cursorColor?: string;
errorTextColor?: string;
fontWeight?: [FontWeight](#fontweight);
italic?: boolean;
textPaddingLeft?: number;
textPaddingRight?: number;
textAlign?: "left" | "center" | "right";
}</code>

#### CardDetails

Extends [`CardValidationStatus`](#cardvalidationstatus) and represents the state of the credit card component. This is used in the [`PaymentCardDetailsView`](#paymentcarddetailsview) `onCardChange` property.

| Property                   | Description                                                                                                                 |
| -------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| `isValid`                  | Whether or not the card is in a valid state _(See [CardValidationStatus](#cardvalidationstatus))_                           |
| `cardType`                 | The detected card type, based on user input _(See [CardType](#cardtype))_                                                   |
| `invalidFields`            | An array of fields that are in an invalid state _(See [CardField](#cardfield))_                                             |
| `emptyFields`              | An array of fields that are empty _(See [CardField](#cardfield))_                                                           |
| `errors.editedFieldsError` | An error message that is calculated by only looking at the state of fields that have been edited (received and lost focus). |
| `errors.allFieldsError`    | An error message that is calculated by looking at the state of all fields, regardless of whether they have been edited.     |

<code>
{
  isValid: boolean;
  cardType: CardType;
  invalidFields?: CardField[];
  emptyFields?: CardField[];
  errors?: {
    editedFieldsError?: string;
    allFieldsError?: string;
  }
}
</code>

#### CvvDetails

Represents the state of the CVV component. This is used in the [`PaymentCardCvvView`](#paymentcardcvvview) `onBlur`, `onCvvChange`, and `onFocus` properties.

| Property                    | Description                                                                                                                    |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| `state`                     | Provides full insight into the current state of the CVV security code input _(See [FieldState](#fieldstate))_                  |
| `errors.editedFieldError`   | An error message that is calculated by only looking at the state of the field if it has been edited (received and lost focus). |
| `errors.uneditedFieldError` | An error message that is calculated by looking at the state of the field, regardless of whether it has been edited.            |

<code>{
state: [FieldState](#fieldstate);
errors?: {
    editedFieldError?: string;
    uneditedFieldError?: string:
  }
}
</code>

#### CvvUpdateToken

CVV Update Token used for revalidating a stored credit card

| Property                | Description                                                                     |
| ----------------------- | ------------------------------------------------------------------------------- |
| `id`                    | The CVV update token id                                                         |
| `productionEnvironment` | Boolean value indicating if the token was generated in a production environment |

<code>{
id?: string;
productionEnvironment?: boolean;
}
</code>

#### PaymentMethodResult

Result type for payment method creation. Contains either a successful payment method or an error.

| Property | Description |
| -------- | ----------- |
| `paymentMethod` | The payment method, if creation was successful. Undefined if an error occurred. _(See [PaymentMethod](#paymentmethod))_ |
| `error` | Error details, if creation failed. Undefined if creation was successful. _(See [OloError](#oloerror))_ |

<code>{ paymentMethod?: <a href="#paymentmethod">PaymentMethod</a>; error?: <a href="#oloerror">OloError</a>; }</code>

#### CvvTokenResult

Result type for CVV update token creation. Contains either a successful token or an error.

| Property | Description |
| -------- | ----------- |
| `token` | The CVV update token, if creation was successful. Undefined if an error occurred. _(See [CvvUpdateToken](#cvvupdatetoken))_ |
| `error` | Error details, if creation failed. Undefined if creation was successful. _(See [OloError](#oloerror))_ |

<code>{ token?: <a href="#cvvupdatetoken">CvvUpdateToken</a>; error?: <a href="#oloerror">OloError</a>; }</code>

#### FieldState

Represents the entire state of a field

| Property     | Description                                                                             |
| ------------ | --------------------------------------------------------------------------------------- |
| `isValid`    | Whether or not the field is in a valid format                                           |
| `isFocused`  | Whether or not the field is currently being focused                                     |
| `isEmpty`    | Whether or not the field is empty                                                       |
| `wasEdited`  | Whether or not the field was edited at any point in time, even if it is currently empty |
| `wasFocused` | Whether or not the field was focused at any point                                       |

<code>{
isValid: boolean;
isFocused: boolean;
isEmpty: boolean;
wasEdited: boolean;
wasFocused: boolean;
}
</code>

#### CustomErrorMessages

Optional custom defined error messages to that can be displayed in place of default error messages. Any properties not defined will fall back to the default error messages.

| Property               | Description                                                                                                                               |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `number`               | An optional collection of custom error messages for when there is an error with the card number field _(See [CardField](#cardfield))_     |
| `expiration`           | An optional collection of custom error messages for when there is an error with the card expiration field _(See [CardField](#cardfield))_ |
| `cvv`                  | An optional collection of custom error messages for when there is an error with the card CVV field _(See [CardField](#cardfield))_        |
| `postalCode`           | An optional collection of custom error messages for when there is an error with the postal code field _(See [CardField](#cardfield))_     |
| `unsupportedCardError` | An optional custom error message for when the card type is unsupported by Olo.                                                            |

<code>
{
  number?: CustomFieldError;
  expiration?: CustomFieldError;
  cvv?: CustomFieldError;
  postalCode?: CustomFieldError;
  unsupportedCardError?: string;
}
</code>

#### CustomFieldError

Options for defining custom error messages for different error conditions.

| Property       | Description                                     |
| -------------- | ----------------------------------------------- |
| `emptyError`   | An error message for when the field is empty.   |
| `invalidError` | An error message for when the field is invalid. |

<code>
{
  emptyError?: string;
  invalidError?: string;
}
</code>

#### ApplePayButtonConfig

Options for customing a [DigitalWalletButton](#digitalwalletbutton) for Apple Pay.

| Property        | Default Value | Description                                                      | 
| --------------- | ------------- | ---------------------------------------------------------------- |
| `cornerRadius?` | 8             | The radius, in points, for the rounded corners of the button     |
| `style?`        | `black`       | The [style](#applepaybuttonstyle) of Apple Pay button to display |
| `type?`         | `checkout`    | The [type](#applepaybuttontype) of Apple Pay button to display   |

<code>{
  cornerRadius?: number;
  style?: [ApplePayButtonStyle](#applepaybuttonstyle);
  type?: [ApplePayButtonType](#applepaybuttontype);
}
</code>

#### GooglePayButtonConfig

Options for customing a [DigitalWalletButton](#digitalwalletbutton) for Google Pay.

| Property        | Default Value | Description                                                         | 
| --------------- | ------------- | ------------------------------------------------------------------- |
| `cornerRadius?` | 8             | The radius, in dp units, for the rounded corners of the button      |
| `theme?`        | `dark`        | The [theme](#googlepaybuttontheme) to use for the Google Pay button |
| `type?`         | `checkout`    | The [type](#googlepaybuttontype) of Google Pay button to display    |

<code>{
  cornerRadius?: number;
  theme?: [GooglePayButtonTheme](#googlepaybuttontheme);
  type?: [GooglePayButtonType](#googlepaybuttontype);
}
</code>

[[Back to Top]](#table-of-contents)

---

## Migration Guide

### v7.0.0

1. **Enable the New Architecture**: Follow React Native's [migration guide](https://reactnative.dev/docs/new-architecture-intro) to enable the new architecture in your app

2. **iOS Component Registration**: Add the `registerOloPayComponents()` call in your AppDelegate (see [Setup](#setup))

3. **Update Payment Method Creation**: Replace promise-based calls with callbacks:

   **Before (v6.x or older)**
   ```typescript
   const createPaymentMethod = async () => {
     try {
       const paymentMethod = await cardRef.current.createPaymentMethod();
       // Use paymentMethod to submit a basket using Olo's ordering API
     } catch (error) {
       // Handle error
     }
   };
   <PaymentCardDetailsView ref={cardRef} />
   <Button title="Submit Payment" onPress={createPaymentMethod} />
   ```

   **After (v7.x)**
   ```typescript
   const createPaymentMethod = () => {
     cardRef.current.createPaymentMethod();
   };
   const handlePaymentMethodResult = (result: PaymentMethodResult) => {
     if (result.error) {
       // Handle error
       return;
     }
     // Use paymentMethod to submit a basket using Olo's ordering API
     const paymentMethod = result.paymentMethod;
   };
   <PaymentCardDetailsView
     ref={cardRef}
     onPaymentMethodResult={handlePaymentMethodResult}
   />
   <Button title="Submit Payment" onPress={createPaymentMethod} />
   ```

4. **Update CVV Token Creation**: Replace promise-based calls with callbacks:

   **Before (v6.x or older)**
   ```typescript
   const createCvvUpdateToken = async () => {
     try {
       const cvvToken = await cvvRef.current.createCvvUpdateToken();
       // Use cvvToken for revalidating a stored credit card
     } catch (error) {
       // Handle error
     }
   };
   <PaymentCardCvvView ref={cvvRef} />
   <Button title="Submit CVV" onPress={createCvvUpdateToken} />
   ```

   **After (v7.x)**
   ```typescript
   const createCvvUpdateToken = () => {
     cvvRef.current.createCvvUpdateToken();
   };
   const handleCvvTokenResult = (result: CvvTokenResult) => {
     if (result.error) {
       // Handle error
       return;
     }
     // Use cvvToken for revalidating a stored credit card
     const cvvToken = result.token;
   };
   <PaymentCardCvvView
     ref={cvvRef}
     onCvvTokenResult={handleCvvTokenResult}
   />
   <Button title="Submit CVV" onPress={createCvvUpdateToken} />
   ```

[[Back to Top]](#table-of-contents)

---

## Known Issues

### Versions 7.0.0 & 7.0.1

Issues were discovered during the cutover to supporting the new architecture and were fixed in version `7.0.2` see [Changelog](#changelog) for details.

### Versions up to 5.0.0

When passing incorrect or invalid parameters, error messages may refer to native platform-specific types that do not exist in JavaScript or Typescript (e.g. `Double` instead of `Number`).

### Versions 2.0.0 Through 3.0.2

- [PaymentCardDetailsView](#paymentcarddetailsview): The following properties must be provided to prevent a crash: `cardStyles.errorTextColor`, `cardStyles.textColor`, and `cardStyles.placeholderColor`
- [PaymentCardCvvView](#paymentcardcvvview): The following properties must be provided to prevent a crash: `cvvStyles.errorTextColor`, `cvvStyles.textColor`, and `cvvStyles.placeholderColor`

[[Back to Top]](#table-of-contents)

---

<!--
CHANGELOG SECTION
-->

## Changelog

### v7.0.2 (Mar 11, 2026)

**Updates**
- [PaymentCardDetailsForm](#paymentcarddetailsform): Added `clear()` method to clear all card details on iOS

**Bug Fixes**
- [PaymentCardCvvView](#paymentcardcvvview):
  - On iOS:
    - Fixed return value for `onCvvChange`, `onFocus`, and `onBlur` callbacks
    - Fixed error messages showing prematurely
    - Fixed bug causing CVV details to persist across view sessions
- [PaymentCardDetailsForm](#paymentcarddetailsform):
  - On iOS:
    - Fixed bug causing the `onFormComplete` callback to be called when the entire form's valid state had not changed.
    - Fixed bug causing card details to persist across view sessions
- [PaymentCardDetailsView](#paymentcarddetailsview):
  - On iOS:
    - Fixed bug causing card details to persist across view sessions

### v7.0.1 (Feb 18, 2026)

**Bug Fixes**
- Fixed incorrect build headers path for iOS

### v7.0.0 (Jan 22, 2026)

**Breaking Changes**
- Removed support for React Native's old architecture
- Introduced support for [React Native's new architecture](https://reactnative.dev/architecture/landing-page)
- Payment method and CVV token creation now use callbacks instead of returning values directly from the native module
  - [PaymentCardDetailsView](#paymentcarddetailsview) and [PaymentCardDetailsForm](#paymentcarddetailsform): Use the `onPaymentMethodResult` callback _(See [PaymentMethodResult](#paymentmethodresult))_
  - [PaymentCardCvvView](#paymentcardcvvview): Use the `onCvvTokenResult` callback _(See [CvvTokenResult](#cvvtokenresult))_
- View methods (`focus`, `blur`, `clear`, `createPaymentMethod`, `createCvvUpdateToken`) now return `void` instead of `Promise<void>` since they execute synchronously
- iOS requires component registration in AppDelegate (see [Setup](#setup))
- Renamed `PromiseRejection` type to [OloError](#oloerror)
- Renamed `PromiseRejectionCode` enum to [OloErrorCode](#oloerrorcode)

**Updates**
- Added [PaymentMethodResult](#paymentmethodresult) type for handling payment method creation results
- Added [CvvTokenResult](#cvvtokenresult) type for handling CVV token creation results
- Optimized SDK initialization performance

### v6.0.0 (Oct 3, 2025)

**Breaking Changes**
- Android is now compiled with Kotlin 2.2.20
- Android `compileSdkVersion` is now v36

**Updates**
- Tested against React Native 0.81.4
- Tested against Expo SDK v54

**Dependency Updates**

**Android**
- Updated to [Olo Pay Android SDK v5.0.0](https://github.com/ololabs/olo-pay-android-sdk-releases/releases/tag/5.0.0)
- Updated to Kotlin v2.2.20
- Updated to Android Gradle Plugin v8.13.0
- Updated to Gradle v8.14.3
- Updated `targetSdkVersion` and `compileSdkVersion` to v36
- Updated to `androidx.core:core-ktx:1.17.0`
- Updated to `org.jetbrains.kotlinx:kotlinx-coroutines-android:1.10.2`
- Updated to `com.google.android.material:material:1.13.0`

**iOS**
- Updated to [Olo Pay iOS SDK v5.2.4](https://github.com/ololabs/olo-pay-ios-sdk-releases/releases/tag/5.2.4)

### v5.0.2 (July 24, 2025)

**Updates**
- Added support for Xcode 16.4

**Dependency Updates**

**iOS**
- Updated to [Olo Pay iOS SDK v5.2.2](https://github.com/ololabs/olo-pay-ios-sdk-releases/releases/tag/5.2.2)

### v5.0.1 (July 22, 2025)

**Updates**
- `JCB`, `DinersClub`, and `UnionPay` cards are now accepted and treated as `Discover` cards
- [PaymentMethod](#paymentmethod)
  - Added property `fullPhoneticName`
- [ApplePayConfig](#applepayconfig)
  - Added property `fullPhoneticNameRequired`

**Dependency Updates**

**Android**
- Updated to [Olo Pay Android SDK v4.1.1](https://github.com/ololabs/olo-pay-android-sdk-releases/releases/tag/4.1.1)

**iOS**
- Updated to [Olo Pay iOS SDK v5.2.1](https://github.com/ololabs/olo-pay-ios-sdk-releases/releases/tag/5.2.1)

### v5.0.0 (May 15, 2025)

**Overview**
- Digital wallets overhaul
  - New [DigitalWalletButton](#digitalwalletbutton) component
  - Apple Pay and Google Pay now both get configured/initialized when initializing the SDK
  - Digital wallet configurations for both Apple Pay and Google Pay can be updated after initialization
  - Support for displaying line items
  - Unified process for interacting with Apple Pay and Google Pay
- Simplified SDK setup process

**Updates**
- New Components
  - [DigitalWalletButton](#digitalwalletbutton)
- New Types/Enums/Interfaces:
  - [DigitalWalletConfig](#digitalwalletconfig)
  - [GooglePayCheckoutStatus](#googlepaycheckoutstatus)
- [OloPaySDK](#olopaysdk-module)
  - Added [updateDigitalWalletConfig](#updatedigitalwalletconfig) method to allow for changing digital wallet configurations at runtime
  - Added [createDigitalWalletPaymentMethod](#createdigitalwalletpaymentmethod)
- [GooglePayConfig](#GooglePayConfig)
  - Added `currencyMultiplier` property
- [PaymentCardDetailsView](#paymentcarddetailsview)
  - `focus()` method now takes an optional field parameter to enable programmatic focus of specific card input fields
- [PaymentCardDetailsForm](#paymentcarddetailsform)
  - `focus()` method now takes an optional field parameter to enable programmatic focus of specific card input fields
- `PromiseRejectionCode`
    - Added `applePayError`
    - Added `applePayTimeout`
    - Added `applePayEmptyMerchantId`
    - Added `googlePayNetworkError`
    - Added `googlePayDeveloperError`
    - Added `googlePayInternalError`
    - Added `googlePayInvalidSetup`
    - Added `digitalWalletUninitialized`
    - Added `digitalWalletNotReady`
    - Added `emptyCompanyLabel`
    - Added `invalidCountryCode`
    - Added `lineItemsTotalMismatch`
  
**Breaking Changes**
- [OloPaySDK](#olopaysdk-module)
  - Changed [initialize](#initialize) method signature
  - Changed [initialize](#initialize) method to initialize both the SDK and digital wallets
  - Removed `getDigitalWalletPaymentMethod` in favor of [createDigitalWalletPaymentMethod](#createdigitalwalletpaymentmethod)
  - Removed `initializeGooglePay` method in favor of [initialize](#initialize) or [updateDigitalWalletConfig](#updatedigitalwalletconfig)
  - Removed `changeGooglePayVendor` method in favor of [updateDigitalWalletConfig](#updatedigitalwalletconfig)
- [PaymentCardDetailsView](#paymentcarddetailsview)
  - Removed `isEnabled` prop in favor of more convential `disabled` prop
- [PaymentCardDetailsForm](#paymentcarddetailsform)
  - Removed `isEnabled` prop in favor of more convential `disabled` prop
- [PaymentCardCvvView](#paymentcardcvvview)
  - Removed `isEnabled` prop in favor of more convential `disabled` prop
- [ApplePayConfig](#applepayconfig)
  - Renamed `applePayMerchantId` property to `merchantId`
  - Moved properties common to Apple Pay and Google Pay into [DigitalWalletConfig](#digitalwalletconfig)
- `GooglePayInitializationOptions`
  - Renamed to [GooglePayConfig](#googlepayconfig)
  - Moved properties common to Apple Pay and Google Pay into [DigitalWalletConfig](#digitalwalletconfig)
  - Renamed `googlePayProductionEnvironment` to `productionEnvironment`
- [DigitalWalletPaymentMethodResult](#digitalwalletpaymentmethodresult)
  - `paymentMethod` property is now nullable
  - Removed `error` property
- `PromiseRejectionCode`
  - Removed `googlePayUninitialized`
  - Removed `googlePayNotReady`
- Removed Types/Enums/Interfaces
  - `AndroidInitializationOptions`
  - `ChangeGooglePayVendorOptions`
  - `DigitalWalletError`
  - `GooglePayError`
  - `DigitalWalletType`
  - `GooglePayErrorType`

**Dependency Updates**

**Android**
- Updated to [Olo Pay Android SDK v4.1.0](https://github.com/ololabs/olo-pay-android-sdk-releases/releases/tag/4.1.0)
- Updated Android Gradle Plugin to v8.10.0
- Updated Gradle to v8.11.1
- Updated to Kotlin v1.9.25
- Updated `minSdkVersion` to 24
- Updated `targetSdkVersion` and `compileSdkVersion` to 35 
- Updated `sourceCompatibility` to `JavaVersion.VERSION_17`
- Updated `targetCompatibility` to `JavaVersion.VERSION_17`
- Updated to `androidx.constraintlayout:constraintlayout:2.2.1`
- Udpated to `androidx.core:core-ktx:1.16.0`
- Updated to `org.jetbrains.kotlinx:kotlinx-coroutines-android:1.9.0`
- Updated to `com.google.android.material:material:1.12.0`

**iOS**
- Updated to [Olo Pay iOS SDK v5.2.0](https://github.com/ololabs/olo-pay-ios-sdk-releases/releases/tag/5.2.0)

### v4.0.1 (Mar 21, 2025)

**Updates**

- Fixed bug causing Olo Pay React Native to always pull down the latest Olo Pay iOS SDK dependency instead of the version
  that Olo Pay React Native was designed to work with, sometimes resulting in compiler and/or runtime errors.
  

### v4.0.0 (Dec 11, 2024)

**Breaking Changes**

- Removed `generalCardError` as an option when setting `CustomErrorMessages`

**Updates**

- Deprecated `OloPayInitializationConfig.freshInstall` parameter used when initializing the SDK
- [PaymentCardDetailsForm](#paymentcarddetailsform) was updated to allow for greater custom styling on Android - see [PaymentCardDetailsFormStyles](#paymentcarddetailsformstyles) for full list

**Bug Fixes**

- [PaymentCardDetailsView](#paymentcarddetailsview) - Fix bug that caused app chashes when `cardStyles.errorTextColor`, `cardStyles.textColor`, and `cardStyles.placeholderColor` were not set
- [PaymentCardCvvView](#paymentcardcvvview) - Fix bug that caused app chashes when `cvvStyles.errorTextColor`, `cvvStyles.textColor`, and `cvvStyles.placeholderColor` were not set
- Fixed a bug preventing Olo Pay SDK initialization without Apple Pay parameters
- Fixed a bug so that DP units are converted to PX units for more consistent UI across both platforms 
- Fixed bug to make custom error messages behave more consistently across both platforms

**Dependency Updates**

- Update to [Olo Pay Android SDK v3.1.2](https://github.com/ololabs/olo-pay-android-sdk-releases/releases/tag/3.1.2)
- Update to [Olo Pay iOS SDK v4.1.0](https://github.com/ololabs/olo-pay-ios-sdk-releases/releases/tag/4.1.0)

### v3.0.2 (June 28, 2024)

**Bug Fixes**

- Fix Google Pay crash bug when Google Pay initialization is interrupted by configuration changes

### v3.0.1 (June 4, 2024)

**Bug Fixes**

- Fix Google Pay crash bug when [`initialize(...)`](#initialize) is called multiple times

### v3.0.0 (Oct 31, 2023)

**Dependency Updates**

- Update to [Olo Pay Android SDK v3.0.0](https://github.com/ololabs/olo-pay-android-sdk-releases/releases/tag/v3.0.0-full)
- Update to [Olo Pay iOS SDK v4.0.0](https://github.com/ololabs/olo-pay-ios-sdk-releases/releases/tag/v4.0.0)

**Breaking Changes**

- All references to "CVC" have been replaced with "CVV"
- Removed `paddingTop` and `paddingBottom` from [PaymentCardDetailsViewStyles](#paymentcarddetailsviewstyles)
- Renamed `paddingLeft` to `textPaddingLeft` in [PaymentCardDetailsViewStyles](#paymentcarddetailsviewstyles)
- Renamed `paddingRight` to `textPaddingRight` in [PaymentCardDetailsViewStyles](#paymentcarddetailsviewstyles)
- Removed `PromiseRejectionCode` `incorrectNumber` and merged its use case with `invalidNumber`
- Removed `PromiseRejectionCode` `incorrectZip` and merged its use case with `invalidPostalCode`
- Removed `PromiseRejectionCode` `incorrectCvv` and merged its use case with `invalidCvv`

**Updates**

- Introduce [PaymentCardCvvView](#paymentcardcvvview) component to support Card Verification Value (CVV) tokenization
- Added `productionEnvironment` property to [PaymentMethod](#paymentmethod)
- Improved logic used to determine when to display errors on the [PaymentCardDetailsView](#paymentcarddetailsview) component
- Improved logic used to determine when to display errors on the [PaymentCardDetailsForm](#paymentcarddetailsform) component
- iOS-specific improvements to the sizing of the [PaymentCardDetailsView](#paymentcarddetailsview) component
- iOS-specific improvements to the sizing of the [PaymentCardDetailsForm](#paymentcarddetailsform) component
- Improved [PaymentCardDetailsView](#paymentcarddetailsview) error message when attempting to create a [PaymentMethod](#paymentmethod) when the component is empty

**Bugfixes**

- Fixed a bug preventing `onFocus` and `onBlur` from firing properly for [PaymentCardDetailsView](#paymentcarddetailsview) on Android
- Fixed bug with error message displaying when calling `clear()` on the [PaymentCardDetailsView](#paymentcarddetailsview)
- Fixed bug preventing `fontFamily` from being set properly on the [PaymentCardDetailsView](#paymentcarddetailsview) on Android.

### v2.0.1 (July 18, 2023)

**Dependency Updates**

- Update to [Olo Pay Android SDK v2.0.1](https://github.com/ololabs/olo-pay-android-sdk-releases/releases/tag/v2.0.1-full)

### v2.0.0 (July 14, 2023)

**Breaking Changes**

- Update to [Olo Pay Android SDK v2.0.0](https://github.com/ololabs/olo-pay-android-sdk-releases/releases/tag/v2.0.0-full)
- Update to [Olo Pay iOS SDK v3.0.0](https://github.com/ololabs/olo-pay-ios-sdk-releases/releases/tag/v3.0.0)

**Updates**

- Introduce [PaymentCardDetailsView](#paymentcarddetailsview) component to support manual credit card input
- Introduce [PaymentCardDetailsForm](#paymentcarddetailsform) component to support manual credit card input

### v1.0.2 (May 22, 2023)

**Bugfixes**

- Fix crash if negative amount is passed in to `getDigitalWalletPaymentMethod()`

### v1.0.1 (Mar 9, 2023)

**Bugfixes**

- Fix iOS installation issue
  **Updates**
- Added iOS setup documentation

### v1.0.0 (Feb 22, 2023)

- Initial release
- Uses [Olo Pay Android SDK v1.3.0](https://github.com/ololabs/olo-pay-android-sdk-releases/releases/tag/v1.3.0-full)
- Uses [Olo Pay iOS SDK v2.1.5](https://github.com/ololabs/olo-pay-ios-sdk-releases/releases/tag/v2.1.5)

[[Back to Top]](#table-of-contents)

---

<!--
# LICENSE SECTION
-->

## License

**Olo Pay Software Development Kit License Agreement**

Copyright © 2022 Olo Inc. All rights reserved.

Subject to the terms and conditions of the license, you are hereby granted a non-exclusive, worldwide, royalty-free license to (a) copy and modify the software in source code or binary form for your use in connection with the software services and interfaces provided by Olo, and (b) redistribute unmodified copies of the software to third parties. The above copyright notice and this license shall be included in or with all copies or substantial portions of the software.

Your use of this software is subject to the Olo APIs Terms of Use, available at https://www.olo.com/api-usage-terms. This license does not grant you permission to use the trade names, trademarks, service marks, or product names of Olo, except as required for reasonable and customary use in describing the origin of the software and reproducing the content of this license.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

[[Back to Top]](#table-of-contents)