# Initialise Tyro React Native SDK

# Tyro Initialisation

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

# Method Parameters


```json
{
  "$ref": "#/components/schemas/provider-options",
  "components": {
    "schemas": {
      "provider-options": {
        "type": "object",
        "properties": {
          "liveMode": {
            "type": "boolean",
            "description": "toggles between the live and sandbox environments"
          },
          "theme": {
            "type": "string",
            "enum": [
              "default",
              "dark",
              "sharp",
              "minimal"
            ],
            "description": "See Style Guide page to learn more"
          },
          "styleProps": {
            "type": "object",
            "description": "See Style Guide page to learn more"
          },
          "options": {
            "type": "object",
            "description": "configuration options for wallet and credit card payments.",
            "properties": {
              "applePay": {
                "type": "object",
                "properties": {
                  "enabled": {
                    "type": "boolean",
                    "description": "Toggles whether Apple Pay is enabled. Defaults to false."
                  },
                  "merchantIdentifier": {
                    "type": "string",
                    "description": "merchant identifier required for Apple Pay."
                  },
                  "totalLabel": {
                    "type": "string",
                    "description": "the label required for Apple Pay to be displayed next to the amount."
                  },
                  "supportedNetworks": {
                    "type": "array",
                    "description": "Optional array of supported card types for Apple Pay. Defaults to support all.",
                    "items": {
                      "type": "string",
                      "enum": [
                        "visa",
                        "mastercard",
                        "amex",
                        "jcb",
                        "maestro"
                      ]
                    }
                  }
                }
              },
              "googlePay": {
                "type": "object",
                "properties": {
                  "enabled": {
                    "type": "boolean",
                    "description": "Toggles whether Google Pay is enabled. Defaults to false."
                  },
                  "merchantName": {
                    "type": "string",
                    "description": "The name of the merchant required for Google Pay."
                  },
                  "supportedNetworks": {
                    "type": "array",
                    "description": "Optional array of supported card types for Google Pay. Defaults to support all.",
                    "items": {
                      "type": "string",
                      "enum": [
                        "visa",
                        "mastercard",
                        "amex",
                        "jcb"
                      ]
                    }
                  }
                }
              },
              "creditCardForm": {
                "type": "object",
                "description": "An optional object containing properties for customizing the Credit Card Form.",
                "properties": {
                  "enabled": {
                    "type": "boolean",
                    "description": "Credit Card Form will be shown when true. Default is true."
                  },
                  "supportedNetworks": {
                    "type": "array",
                    "description": "Optional array of supported card types for the credit card form. Defaults to support all, and may be limited by your merchant account.",
                    "items": {
                      "type": "string",
                      "enum": [
                        "visa",
                        "mastercard",
                        "amex",
                        "jcb",
                        "maestro",
                        "diners"
                      ]
                    }
                  }
                }
              }
            }
          }
        },
        "required": [
          "liveMode"
        ]
      }
    }
  }
}
```

# 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](/app/apis/pay/tyro-react-native/style-guide) for detailed information about appearance customizations.


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