@olo/pay-react-native

Table Of Contents

• About Olo Pay
• About the React Native SDK
• Installation
• Getting Started
• Handling Promise Rejections
• Events
• Components
  • PaymentCardDetailsView
  • PaymentCardDetailsForm
  • PaymentCardCvvView
  • DigitalWalletButton
• OloPaySDK Module
• Changelog
• License

About Olo Pay

Olo 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.

Use of the plugin is subject to the terms of the Olo Pay SDK License.

For more information about integrating Olo Pay into your payment solutions, refer to our Olo Pay Dev Portal Documentation (Note: requires an Olo Developer account).

Installation

Important: If using Expo, be sure to eject or run npx expo prebuild prior to installation

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

npm install @olo/pay-react-native

Android-Specific Install Steps

Supported Versions

• Minimum SDK Version:
  • The minimum supported Android SDK is API 24
  • The Android project's minSdkVersion must be set to 24 or higher
• Compile SDK Version:
  • The Olo Pay SDK is compiled against API 35
  • It is recommended to set the Android project's compileSdkVersion to 35 or higher
• Gradle:
  • The SDK is built with Gradle v8.11.1 and Android Gradle Plugin v8.10.0
  • If the Android project does not compile, the Android Gradle Plugin and/or Gradle versions may need to be updated

Components

In order to use the PaymentCardFormView you need to install and configure Material Components theme in your app.

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

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

1. Set the appropriate style in your styles.xml file

<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight">
    <!-- ... -->
</style>

iOS-Specific Install Steps

Supported Versions

• Minimum iOS Version:
  • The minimum supported version is iOS 14

In you app's Podfile:

• Add the following lines at the top:

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

• Ensure that ios.developmentTarget 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:

pod install

Updating From a Previous Version

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

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:

rm -rf Pods
pod update

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

Known Issues

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: The following properties must be provided to prevent a crash: cardStyles.errorTextColor, cardStyles.textColor, and cardStyles.placeholderColor
• PaymentCardCvvView: The following properties must be provided to prevent a crash: cvvStyles.errorTextColor, cvvStyles.textColor, and cvvStyles.placeholderColor

[Back to Top]

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 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(...)).
2. Create the PaymentMethod.
   • Credit Card Components
     1. Add a component to the App's UI (See PaymentCardDetailsView and PaymentCardDetailsForm)
     2. Use the createPaymentMethod() function on the component to get a PaymentMethod instance
   • Digital Wallets (Apple Pay & Google Pay)
     1. Wait for DigitalWalletReadyEvent to indicate when digital wallet payments can be processed.
     2. Create a payment method (see createDigitalWalletPaymentMethod(...)).
3. Submit the order to Olo's Ordering API using the 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 component will provide a 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(...)).
2. Create the CvvUpdateToken.
   1. Add the PaymentCardCvvView component to the App's UI.
   2. Use the createCvvUpdateToken() function on the component to get a CvvUpdateToken instance
3. Submit the order to Olo's Ordering API using the CvvUpdateToken details.

[Back to Top]

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 PromiseRejectionCode enum and a PromiseRejection type for handling promise rejection errors.

Example

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

[Back to Top]

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 object. Attempting to create a PaymentMethod via 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 or 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:

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]

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 provides customization for the card component.

{ componentStyles?: StyleProp\<ViewStyle>; errorStyles?: StyleProp\<TextStyle>; cardStyles?: PaymentCardDetailsViewStyles; viewProps?: ViewProps; postalCodeEnabled?: boolean; disabled?: boolean; displayErrorMessages?: boolean; placeholders?: PaymentCardDetailsPlaceholders; onCardChange?(card: CardDetails): void; onFocus?(): void; onBlur?(): void; onFocusField?(field: CardField): void; customErrorMessages?: CustomErrorMessages; }

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:

<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 code below for details.

focus()

focus(field?: CardField) => Promise<void>

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

If the promise is rejected, the code property on the returned error will be PromiseRejectionCode.viewNotFound

blur()

blur() => Promise<void>

Clears focus on the PaymentCardDetailsView component and hides the keyboard. If the promise is rejected, the code property on the returned error will be PromiseRejectionCode.viewNotFound

clear()

clear() => Promise<void>

Clears all card details entered in the PaymentCardDetailsView component. If the promise is rejected, the code property on the returned error will be PromiseRejectionCode.viewNotFound

createPaymentMethod()

createPaymentMethod() => Promise<PaymentMethod>

Attempts to create a payment method based on the entered card details. If successful, returns a PaymentMethod instance.

If the promise is rejected, possible values of the code property on the returned error will be one of:

• PromiseRejectionCode.viewNotFound
• PromiseRejectionCode.invalidNumber
• PromiseRejectionCode.invalidExpiration
• PromiseRejectionCode.invalidCvv
• PromiseRejectionCode.invalidPostalCode
• PromiseRejectionCode.expiredCard
• PromiseRejectionCode.cardDeclined
• PromiseRejectionCode.unknownCardError
• PromiseRejectionCode.processingError
• PromiseRejectionCode.connectionError
• PromiseRejectionCode.invalidRequest
• PromiseRejectionCode.apiError
• PromiseRejectionCode.cancellationError
• PromiseRejectionCode.authenticationError
• PromiseRejectionCode.generalError

PaymentCardDetailsView Example

import {
  PaymentCardDetailsView,
  PaymentCardDetailsViewMethods,
} 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 createPaymentMethod = async () => {
    try {
      if (!cardRef.current) {
        return;
      }

      let paymentMethod = await cardRef.current.createPaymentMethod();
      // Use the payment method to submit a basket using Olo's ordering API
    } catch (error) {
      // Handle the promise rejection
    }
  };

  // Styling omitted for sake of example simplicity
  return (
    <View>
      <PaymentCardDetailsView displayErrorMessages={true} ref={cardRef} />
      <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 provides additional properties defined in the following table

{ cardStyles?: PaymentCardDetailsFormStyles; componentStyles?: StyleProp\<ViewStyle>; disabled?: boolean; onFormComplete?(cardValidationStatus: CardValidationStatus): void; viewProps?: ViewProps; placeholders?: PaymentCardDetailsPlaceholders; }

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 code below for details.

focus()

focus(field?: CardField) => Promise<void>

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

If the promise is rejected, the code property on the returned error will be PromiseRejectionCode.viewNotFound

blur()

blur() => Promise<void>

Clears focus on the PaymentCardDetailsForm component and hides the keyboard. If the promise is rejected, the code property on the returned error will be PromiseRejectionCode.viewNotFound

clear() (Android Only)

clear() => Promise<void>

Clears all card details entered in the PaymentCardDetailsForm component. If the promise is rejected, the code property on the returned error will be PromiseRejectionCode.viewNotFound

createPaymentMethod()

createPaymentMethod() => Promise<PaymentMethod>

Attempts to create a payment method based on the entered card details. If successful, returns a PaymentMethod instance.

If the promise is rejected, possible values of the code property on the returned error will be one of:

• PromiseRejectionCode.viewNotFound
• PromiseRejectionCode.isValid
• PromiseRejectionCode.invalidNumber
• PromiseRejectionCode.invalidExpMonth
• PromiseRejectionCode.invalidExpYear
• PromiseRejectionCode.invalidCvv
• PromiseRejectionCode.invalidPostalCode
• PromiseRejectionCode.expiredCard
• PromiseRejectionCode.cardDeclined
• PromiseRejectionCode.unknownCardError
• PromiseRejectionCode.processingError
• PromiseRejectionCode.connectionError
• PromiseRejectionCode.invalidRequestError
• PromiseRejectionCode.apiError
• PromiseRejectionCode.cancellationError
• PromiseRejectionCode.authenticationError
• PromiseRejectionCode.invalidCardDetails
• PromiseRejectionCode.generalError

PaymentCardDetailsForm Example

import { PaymentCardDetailsForm, PaymentCardDetailsFormMethods } 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 createPaymentMethod = async() => {
    try {
      if (!cardRef.current) {
        return;
      }

      let paymentMethod = await cardRef.current.createPaymentMethod();
      // Use the payment method to submit a basket using Olo's ordering API
    } catch (error) {
      // Handle the promise rejection
    }
  };

  // Styling omitted for sake of example simplicity
  return (
    <View>
      <PaymentCardDetailsForm
        ref={cardRef} />
      <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

{ componentStyles?: StyleProp\<ViewStyle>;
customErrorMessages?: CustomFieldError;
cvvStyles?: StyleProp\<ViewStyle>;
displayErrorMessages?: boolean;
errorStyles?: StyleProp\<ViewStyle>;
disabled?: boolean: onBlur(details: CvvDetails)?: void; onCvvChange(details: CvvDetails)?: void; onFocus(details: CvvDetails)?: void; placeholder?: string; viewProps?: ViewProps;
}

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:

<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 code below for details.

focus()

focus() => Promise<void>

Puts focus on the PaymentCardCvvView component and displays the keyboard. If the promise is rejected, the code property on the returned error will be PromiseRejectionCode.viewNotFound

blur()

blur() => Promise<void>

Clears focus on the PaymentCardCvvView component and hides the keyboard. If the promise is rejected, the code property on the returned error will be PromiseRejectionCode.viewNotFound

clear()

clear() => Promise<void>

Clears all security code details entered in the PaymentCardCvvView component. If the promise is rejected, the code property on the returned error will be PromiseRejectionCode.viewNotFound

createCvvUpdateToken()

createCvvUpdateToken() => Promise<CvvUpdateToken>

Attempts to create a CVV update token based on the entered security code details. If successful, returns a CvvUpdateToken instance.

If the promise is rejected, possible values of the code property on the returned error will be one of:

• PromiseRejectionCode.viewNotFound
• PromiseRejectionCode.invalidCvv
• PromiseRejectionCode.processingError
• PromiseRejectionCode.connectionError
• PromiseRejectionCode.invalidRequest
• PromiseRejectionCode.apiError
• PromiseRejectionCode.cancellationError
• PromiseRejectionCode.authenticationError
• PromiseRejectionCode.generalError

PaymentCardCvvView Example

import {
  PaymentCardCvvView,
  PaymentCardCvvViewMethods,
} 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 createCvvUpdateToken = async () => {
    try {
      if (!cvvRef.current) {
        return;
      }

      let cvvUpdateToken = await cvvRef.current.createCvvUpdateToken();
      // Use the CVV update token for revalidating a stored credit card
    } catch (error) {
      // Handle the promise rejection
    }
  };

  // Styling omitted for sake of example simplicity
  return (
    <View>
      <PaymentCardCvvView displayErrorMessages={true} ref={cvvRef} />
      <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

{ applePayConfig?: ApplePayButtonConfig; googlePayConfig?: GooglePayButtonConfig; disabled?: boolean; onPress(): void; styles?: StyleProp\<ViewStyle\>; }

DigitalWalletButton Example

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]

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.

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

• initialize(...)
• updateDigitalWalletConfig(...)
• createDigitalWalletPaymentMethod(...)
• isInitialized()
• isDigitalWalletInitialized()
• isDigitalWalletReady()
• Type Aliases
• Enums

</docgen-index>

Methods

<docgen-api>

initialize(...)

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 is provided, when digital wallets become ready, a DigitalWalletReadyEvent will be emitted. If digital wallets are not configured and initialized here, this can be done later by calling 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:

• PromiseRejectionCode.missingParameter
• PromiseRejectionCode.invalidParameter
• PromiseRejectionCode.googlePayInvalidSetup (Android only)
• PromiseRejectionCode.unexpectedError (Android only)

updateDigitalWalletConfig(...)

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 to be emitted with a value of false. Once the new configuration is ready to be used, the 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).

If the promise is rejected, the code property of the returned error object will be one of:

• PromiseRejectionCode.missingParameter
• PromiseRejectionCode.invalidParameter
• PromiseRejectionCode.sdkUninitialized
• PromiseRejectionCode.googlePayInvalidSetup (Android only)
• PromiseRejectionCode.unexpectedError (Android only)

createDigitalWalletPaymentMethod(...)

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:

• PromiseRejectionCode.sdkUninitialized
• PromiseRejectionCode.digitalWalletUninitialized
• PromiseRejectionCode.digitalWalletNotReady
• PromiseRejectionCode.invalidParameter
• PromiseRejectionCode.missingParameter
• PromiseRejectionCode.emptyCompanyLabel
• PromiseRejectionCode.invalidCountyCode
• PromiseRejectionCode.lineItemsTotalMismatch
• PromiseRejectionCode.applePayEmptyMerchantId (iOS only)
• PromiseRejectionCode.applePayUnsupported (iOS only)
• PromiseRejectionCode.applePayError (iOS only)
• PromiseRejectionCode.applePayTimeout (iOS only)
• PromiseRejectionCode.googlePayNetworkError (Android only)
• PromiseRejectionCode.googlePayDeveloperError (Android only)
• PromiseRejectionCode.googlePayInternalError (Android only)
• PromiseRejectionCode.unexpectedError (Android only)
• PromiseRejectionCode.generalError

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
}

Returns: Promise<DigitalWalletPaymentMethodResult>

isInitialized()

isInitialized() => Promise<InitializationStatus>

Check if the Olo Pay SDK has been initialized

Returns: Promise<InitializationStatus>

isDigitalWalletInitialized()

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: Promise<InitializationStatus>

isDigitalWalletReady()

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: Promise<DigitalWalletStatus>

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 | 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 | - |

{ companyLabel: string; countryCode?: string; currencyCode?: CurrencyCode; emailRequired?: boolean; phoneNumberRequired?: boolean; fullNameRequired?: boolean; fullBillingAddressRequired?: boolean; initializeApplePay: boolean; initializeGooglePay: boolean; applePayConfig?: ApplePayConfig; googlePayConfig?: GooglePayConfig; }

CurrencyCode

Type alias representing currency codes supported by Olo Pay.

'USD' | 'CAD'

ApplePayConfig

Options for initializing Apple Pay | Property | Description | | -------- | ----------- | | merchantId | The merchant id registered with Apple for Apple Pay |

{ merchantId: string; }

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 |

{ productionEnvironment?: boolean; existingPaymentMethodRequired?: boolean; currencyMultiplier?: number; }

DigitalWalletPaymentMethodResult

Type alias representing a digital wallet payment method result.

{ paymentMethod?: PaymentMethod; }

PaymentMethod

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

{ id: string; last4: string; cardType: CardType; expMonth: number; expYear: number; postalCode: string; countryCode: string; isDigitalWallet: boolean; productionEnvironment: boolean; email: string; digitalWalletCardDescription: string; billingAddress: Address; fullName: string; phoneNumber: string; }

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.

{ address1: string; address2: string; address3: string; locality: string; postalCode: string; countryCode: string; administrativeArea: string; }

DigitalWalletPaymentRequestOptions

Type alias representing options for a digital wallet payment method request

GooglePayPaymentRequestOptions | ApplePayPaymentRequestOptions

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 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 |

{ amount: number; checkoutStatus?: GooglePayCheckoutStatus; totalPriceLabel?: string; lineItems?: LineItem[]; validateLineItems?: boolean; }

LineItem

Represents a line item in a digital wallet transaction

{ label: string; amount: number; type: LineItemType; status?: LineItemStatus; }

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 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 |

{ amount: number; lineItems?: LineItem[]; validateLineItems?: boolean; }

InitializationStatus

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

{ isInitialized: boolean; }

DigitalWalletStatus

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

{ isReady: boolean; }

Enums

CardType

GooglePayCheckoutStatus

LineItemType

LineItemStatus

</docgen-api>

PromiseRejectionCode

CardField

Represents the different input fields of the PaymentCardDetailsView and PaymentCardDetailsForm components

FontWeight

Options for determining the weight of the font.

ApplePayButtonStyle

Options representing different visual styles available for Apple Pay when used with a DigitalWalletButton. Values map directly to Apple's PKPaymentButtonStyle.

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

ApplePayButtonType

Options representing different types of Apple Pay buttons that can be displayed with a DigitalWalletButton. Values map directly to Apple's PKPaymentButtonType.

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