Initialise Tyro React Native SDK

Tyro Initialisation

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

Method Parameters

liveMode

required

boolean

toggles between the live and sandbox environments

theme

string

See Style Guide page to learn more

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

styleProps

object

See Style Guide page to learn more

object

configuration options for wallet and credit card payments.

object

enabled	boolean Toggles whether Apple Pay is enabled. Defaults to false.
merchantIdentifier	string merchant identifier required for Apple Pay.
totalLabel	string the label required for Apple Pay to be displayed next to the amount.
supportedNetworks	Array of strings Optional array of supported card types for Apple Pay. Defaults to support all. Items Enum: "visa" "mastercard" "amex" "jcb" "maestro"

object

enabled	boolean Toggles whether Google Pay is enabled. Defaults to false.
merchantName	string The name of the merchant required for Google Pay.
supportedNetworks	Array of strings Optional array of supported card types for Google Pay. Defaults to support all. Items Enum: "visa" "mastercard" "amex" "jcb"

object

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

enabled	boolean Credit Card Form will be shown when true. Default is true.
supportedNetworks	Array 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.

Copy

Copied

// 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>
  );
}