Initialise Tyro React Native SDK

Tyro Initialisation

You can initialise the TyroSDK using our provider component as seen below.

Method Parameters

liveModebooleanrequired

toggles between the live and sandbox environments

themestring

See Style Guide page to learn more

Enum"default""dark""sharp""minimal"

stylePropsobject

See Style Guide page to learn more

optionsobject

configuration options for wallet and credit card payments.

options.applePayobject

options.applePay.enabledboolean

Toggles whether Apple Pay is enabled. Defaults to false.

options.applePay.merchantIdentifierstring

merchant identifier required for Apple Pay.

options.applePay.totalLabelstring

the label required for Apple Pay to be displayed next to the amount.

options.applePay.supportedNetworksArray of strings

Optional array of supported card types for Apple Pay. Defaults to support all.

Items Enum"visa""mastercard""amex""jcb""maestro"

options.googlePayobject

options.googlePay.enabledboolean

Toggles whether Google Pay is enabled. Defaults to false.

options.googlePay.merchantNamestring

The name of the merchant required for Google Pay.

options.googlePay.supportedNetworksArray of strings

Optional array of supported card types for Google Pay. Defaults to support all.

Items Enum"visa""mastercard""amex""jcb"

options.creditCardFormobject

An optional object containing properties for customizing the Credit Card Form.

options.creditCardForm.enabledboolean

Credit Card Form will be shown when true. Default is true.

options.creditCardForm.supportedNetworksArray of strings

Optional array of supported card types for the credit card form. Defaults to support all, and may be limited by your merchant account.

Items Enum"visa""mastercard""amex""jcb""maestro""diners"

TyroProvider

The TyroProvider component is a root level component and accepts the previously described method parameters as props.

This component also optionally supports a styleProp object to customize the appearance.

Please refer to the Style Guide for detailed information about appearance customizations.

// example javascript code for using TyroProvider component
import { TyroProvider } from "@tyro/tyro-pay-api-react-native";

const providerOptions = {
  applePay: {
    enabled: true,
    merchantId: '123456789',
    supportedNetworks: ['visa', 'mastercard'],
  },
  googlePay: {
    enabled: true,
    merchantName: 'The merchant name',
    supportedNetworks: ['visa', 'mastercard'],
  },
  creditCardForm: {
    enabled: true,
    supportedNetworks: ['visa', 'mastercard'],
  },
}

function App() {
  return (
    <TyroProvider
      options={liveMode: false, options: providerOptions}
    >
      // Your App Checkout Code wrapped here
    </TyroProvider>
  );
}