---
title: React Native
slug: react-native
docTags: 
createdAt: 2024-06-12T10:31:25.615Z
---

# Integrating React Native with Judopay

## Prerequisites

- You have set up your Judopay account.
  - Sign up for your [sandbox account](https://www.judopay.com/apply-sandbox-account), to receive access to your Judopay dashboard and the sandbox environment.
- Your judoIds and tokens are configured and enabled as appropriate.
  - For more information on permissions, see [Permissions](docId\:S_8hOAMytkgY13t0P657-).
- You have the development environment set up for React Native, [here.](https://reactnative.dev/docs/environment-setup)

:::hint{type="info"}
For Mobile apps, we recommend using [payment session authentication](docId\:ylKW5coh5NQnfQ3j_Wjk2).
:::

The Judopay SDK for React Native is available as a node package and can be added to the project via **npm **or **yarn**.

:::hint{type="info"}
Judopay's React Native examples use TypeScript, however you can also use JavaScript.
:::

***

## Adding and Initialising React Native

To add the Judopay React Native SDK to your app:

1. Enter the following line into the terminal:
   `` `npm install judokit-react-native` or, `yarn add judokit-react-native` ``

Below is an example of a **package.json** file with the Judopay SDK dependency:

:::BlockQuote
\{
 "name": "my-app",
 "version": "1.0.0",
 "scripts": \{
 ...
 },
 "dependencies": \{
 "judo-react-native": "4.0.0",
 ...
 },
 "devDependencies": \{
 ...
 },
 ...
}
:::

To initialise the Judopay React Native SDK:

1. Import the JudoPay class from the judokit-react-native package:
   `` import JudoPay from 'judokit-react-native'` ``
2. Provide your token and secret OR paymentSession:
   `` `const judoPay = new JudoPay({token: "my-token", secret: "my-secret"})`  ``
   Or,
   `` `const judoPay = new JudoPay({token: "my-token", paymentSession: "my-payment-session"})` ``

   You can generate a payment session using one of our [Server SDKs](docId\:mZCNx_MB0NESPjB4MjpZ4), or by making a call to our [Transaction API.](https://docs.judopay.com/api-reference/index.html#/Payment%20Sessions/post_paymentsession)

:::hint{type="warning"}
Merchants operating in specific money movement and financial services categories, as defined by the card schemes **must include** additional data in the [payment session](docId\:ylKW5coh5NQnfQ3j_Wjk2).
For more information, see [Account Funding Transactions](docId:5ol_pTSGBHVGKwJwD0gHg).
:::

1. Set the SDK in **sandbox **mode:
   `` `judoPay.isSandboxed = true` ``

***

## Making a Transaction

The method for making a transaction and configuring the flow:

:::CodeblockTabs
Making a Transaction

```typescript
async invokeTransaction(
    type: JudoTransactionType,
    configuration: JudoConfiguration
): Promise<JudoResponse>
```
:::

| Parameter                              | Description                                              |
| -------------------------------------- | -------------------------------------------------------- |
| `type`<br />JudoTransactionType        | An enum value that describes the transaction type.       |
| `configuration`<br />JudoConfiguration | A configuration object that configures the payment flow. |

The response is handled via a Promise which resolves to a JudoResponse.

**To make a transaction**:

:::CodeblockTabs
Transaction Example

```typescript
import JudoPay, {JudoAuthorization, JudoReference, JudoAmount, JudoConfiguration, JudoTransactionType} from 'judokit-react-native'

const authorization: JudoAuthorization = {
  token: "my-token",
  paymentSession: "payment-session",
}

const reference: JudoReference = {
  consumerReference: 'consumer-ref',
}

const amount: JudoAmount = {
  value: '0.05',
  currency: 'GBP',
}

const configuration: JudoConfiguration = {
  judoId: 'my-judo-id',
  amount,
  reference,
}

try {
  const judo = new JudoPay(authorization)
  const response = await judo.invokeTransaction(JudoTransactionType.Payment, configuration)

  if (response != null) {
      console.log('Receipt', JSON.stringify(response))
  } else {
    console.error('Error', "invokeTransaction returned null response")
  }
} catch (error) {
    console.error(error)
}
```
:::

***

## React Native Server to Server Transactions

This feature is intended to allow the merchant to acces&#x73;**&#x20;cardTokens** stored securely by the Mobile SDK, to then use the cardToken to make a server-to-server transaction using our [Server SDK Integration](docId\:mZCNx_MB0NESPjB4MjpZ4), or our [Transaction API](https://docs.judopay.com/api-reference/index.html#).

This is typically intended for scenarios where a merchant might want to process &#x61;**&#x20;Merchant Initiated Transaction** using the card details stored by the consumer.

### Specify a Server to Server Transaction

Set the **JudoTransactionMode&#x20;**&#x74;o **ServerToServer&#x20;**&#x77;hen calling the Judo methods:

:::BlockQuote
judo.invokePaymentMethodScreen(JudoTransactionMode.ServerToServer, configuration)
&#x20;.then((response) => \{/\* Handle response \*/})
&#x20;.catch((error) => \{/\* Handle error \*/})
:::

### Specify an Apple Pay™ Server to Server Transaction

:::BlockQuote
&#x20;judo.invokeApplePay(JudoTransactionMode.ServerToServer, configuration)
&#x20;.then((response) => \{/\* Handle response \*/})
:::

### Specify a Google Pay™ Server to Server Transaction

:::BlockQuote
judo.invokeGooglePay(JudoTransactionMode.ServerToServer, configuration)
&#x20;.then((response) => \{/\* Handle response \*/})
:::

***

### Token Payments

If you are building your own card wallet, and not using a UI you can make a `/preauth` or `/payment` using a stored **card token**.

To make a token payment or pre-auth token payment:

1. Use the `/savecard` endpoint to return a card token.
   For details on endpoints, see [Transaction API Reference](https://docs.judopay.com/api-reference/index.html#/).

The method signature is as follows:

:::BlockQuote
public async performTokenTransaction(
&#x20;mode: JudoTransactionMode,
&#x20;configuration: JudoConfiguration,
&#x20;cardToken: string,
&#x20;securityCode: string,
&#x20;cardholderName: string,
&#x20;cardScheme: string
): Promise\<JudoResponse>;
:::

| **Parameter**                          | **Description**                                                                |
| -------------------------------------- | ------------------------------------------------------------------------------ |
| `mode`<br />JudoTransactionMode        | A value used to specify either a pre-auth or payment.                          |
| `configuration`<br />JudoConfiguration | An object used to configure the payment flow.                                  |
| `cardToken`<br />String                | The card token used for the token transaction.                                 |
| `securityCode`<br />String             | The saved card token security code.                                            |
| `cardholderName`<br />String           | The saved card token cardholder name.                                          |
| `cardScheme`<br />String               | The saved card token scheme name, for example:<br />* Visa
* Mastercard
* Amex |

The result is a **JudoResponse&#x20;**&#x6F;bject containing the transaction details:

:::CodeblockTabs
Response Example

```typescript
try {
    const judo: Judo = new JudoPay('myToken', 'mySecret')
    const configuration: JudoConfiguration = {
        judoId: 'myJudoId',
        amount: amount,
        reference: reference
    }
    const response = await judo.performTokenTransaction(
        JudoTransactionMode.Payment,
        configuration,
        'card token...',
        '123',
        'John Doe',
        'Visa'
        )
// Handle response
    } catch (exception) {
// Handle exception
}
```
:::

***

## 3D Secure 2 for React Native

**JudoKit-ReactNative** supports 3D Secure 2 (EMV 3DS).

:::hint{type="info"}
3D Secure 2 is available in JudoKit React Native **version 3.0.0** or higher, and is available on [Github](https://github.com/Judopay/JudoKit-ReactNative/releases/tag/v3.4.0).
:::

:::CodeblockTabs
3D Secure 2 Payment Example

```typescript
const uiConfiguration: JudoUIConfiguration = {
  isAVSEnabled: false,
  shouldPaymentMethodsVerifySecurityCode: false,
  shouldPaymentButtonDisplayAmount: false,
  shouldPaymentMethodsDisplayAmount: false,

  // sets whether the billing information screen should be presented to the consumer
  shouldAskForBillingInformation: true
}

// If you don't want to present the billing info screen to the consumer, set the address instead:
const cardAddress: JudoAddress = {
  line1: 'My house',
  line2: 'My street'
  town: 'My town',
  postCode: 'TR14 8PA',
  countryCode: 382,
}

const judo: JudoConfiguration = {
  judoId: '123456',
  amount,
  reference,
  paymentMethods: JudoPaymentMethod.Card,
  supportedCardNetworks: JudoCardNetwork.Visa,

  uiConfiguration,
  cardAddress,

  // sets the value for challenge request indicator,
  // possible values:
  // ChallengeRequestIndicator.NoPreference
  // ChallengeRequestIndicator.NoChallenge
  // ChallengeRequestIndicator.ChallengePreferred
  // ChallengeRequestIndicator.ChallengeAsMandate
  challengeRequestIndicator: ChallengeRequestIndicator.ChallengeAsMandate,

  // sets the value for SCA exemption,
  // possible values:
  // ScaExemption.LowValue
  // ScaExemption.SecureCorporate
  // ScaExemption.TrustedBeneficiary
  // ScaExemption.TransactionRiskAnalysis
  scaExemption: ScaExemption.LowValue,
  
  // email address
  emailAddress: 'email@me.com',
  
  // sets the maximum timeout for 3DS 2.0 transactions in minutes,
  // always use 2 characters when setting the timeout
  threeDSTwoMaxTimeout: 30,

  // sets phone number country code
  phoneCountryCode: '44',

  // phone number
  mobileNumber: '0799999999',
}
```
:::

***

## Customising the Payment Experience

::::ExpandableHeading
### Configuring the React Native Payment Flow

Every transaction requires a **JudoConfiguration** object to be passed as a parameter. The JudoConfiguration object sets all the required parameters for configuring the payment flow, including all optional parameters to customise the payment experience.

To configure the payment flow:

Import:

- JudoConfiguration
- JudoAmount
- JudoReference

from th&#x65;**&#x20;judokit-react-native** package:

:::BlockQuote
import JudoPay, \{
&#x20;JudoConfiguration,
&#x20;JudoAmount,
&#x20;JudoReference
&#x20;}&#x20;
from 'judokit-react-native'
:::


::::

::::ExpandableHeading
### UI Configuration

You can customise the payment experience for the consumer by configuring the following UI behaviour properties in the **JudoUIConfiguration** object:

The JudoUIConfiguration object allows you to:

- Enable | disable the Address Verification Service
- Enable | disable consumers entering the CVV/CV2 code
- Show | hide the amount in the payment button
- Show | hide the amount in the Payments Widget
- Enable | disable consumers entering their billing information
- Set a custom theme

To create the **JudoUIConfiguration&#x20;**&#x6F;bject:

:::BlockQuote
const uiConfiguration: JudoUIConfiguration = \{
&#x20;isAVSEnabled: false,
&#x20;shouldPaymentMethodsVerifySecurityCode: true,
&#x20;shouldPaymentButtonDisplayAmount: true,
&#x20;shouldPaymentMethodsDisplayAmount: true,
&#x20;shouldAskForBillingInformation: true,
&#x20;theme: theme,
}
const configuration: JudoConfiguration = \{
...
uiConfiguration: uiConfiguration,
...
:::

| **Parameter**                                                                                    | **Description**                                                                                                                                                      |
| ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `isAVSEnabled`<br />Boolean<br /><font color="#ef5b2e">Required</font>                           | Enable \| disable the Address Verification Service when making card transactions.<br />**Default =** **False**                                                        |
| `shouldPaymentMethodsVerifySecurityCode`<br />Boolean<br /><font color="#ef5b2e">Required</font> | Enable \| disable the merchant entering the CV2 code for every Token Payment \| Pre-auth transaction in the Payment Method Selection screen.<br />**Default = True** |
| `shouldPaymentButtonDisplayAmount`<br />Boolean<br /><font color="#ef5b2e">Required</font>       | Show \| hide the transaction amount on the Payment \| Pre-auth button.<br />**Default = False**                                                                      |
| `shouldPaymentMethodsDisplayAmount`<br />Boolean<br /><font color="#ef5b2e">Required</font>      | Show \| hide the transaction amount from the Payments Widget.<br />**Default = True**                                                                                |
| `shouldAskForBillingInformation`<br />Boolean<br /><font color="#42cbd4">Optional</font>         | Show \| hide the billing information screen.<br />**Default = False**                                                                                                |
| `theme`<br />Object<br /><font color="#42cbd4">Optional</font>                                   | Customise various elements of the payment screen.<br />For example:<br />* bodyFont
* bodySize
* buttonColor
* buttonTitleColor                                      |




::::

::::ExpandableHeading
### Setting up an Incremental Authorisation

The incremental authorisation feature allows you to increment the value of your original pre-authorisation for scenarios where you need to charge your customer a higher total amount.

By **incrementing the pre-authorisation** value, you will be able to capture the total amount that you wish to charge your customer when you are ready.

:::hint{type="warning"}
This feature is not available with all acquirers.
Check with our customer service team, or your account manager for your eligibility to use this.
:::

- The `isAllowIncrement` flag is a part of the main **judo-configuration** config object, and can be set directly in the configuration object.
- Set the `isAllowIncrement` flag t&#x6F;**&#x20;true**.
  - If present = it is automatically applied for preAuth requests.
  - If no value is provided = then **false&#x20;**&#x69;s set by default.

Example:

:::BlockQuote
val configuration: JudoConfiguration = \{
&#x20;...
&#x20;isAllowIncrement: true,
};
:::


::::

::::ExpandableHeading
### Voiding an Incremental Authorisation

Each incremental authorisation generates its own `receiptId`.&#x20;

If an authorisation has been incremented, any subsequent void request **must&#x20;**&#x72;eference the `receiptId` of the **original pre-authorisation** transaction.&#x20;

:::hint{type="warning"}
Using the `receiptId` returned following an incremental authorisation will result in an **error**.
:::

The void amount **must&#x20;**&#x62;e the sum of the original authorisation amount and all successful increments.&#x20;
Any attempt to process a **partial void**, the sum of any but **not all authorisations** and increments, will result in an **error**.

For example:

- Initial preAuth: £100
- `incrementalAuth` request amount: £20
- `incrementalAuth` request amount: £30
- Total authorised amount after increments: £150


To void this transaction:

1. Use the `receiptId` of the Initial preAuth.
2. Submit a void request for **£150**.
::::

::::ExpandableHeading
### Setting up the Transaction Amount

To set up the transaction amount:

:::CodeblockTabs
Setting up Transaction Amount Example

```typescript
//From the imported JudoAmount interface:

interface JudoAmount {
    value: string,
    currency: string,
}

//Create a new variable that implements the JudoAmount interface

//Add the variable to the configuration object:

const amount: JudoAmount = {
  value: '999.99',
  currency: 'GBP'
}
```
:::


::::

::::ExpandableHeading
### Setting the Primary Account Details

:::hint{type="info"}
To set the primary account details when using an alternative payment method, see [Adding Payment Methods](docId\:Ur8QJJ7TjDXYHf4e5aojP).&#x20;
:::

It is **mandatory&#x20;**&#x66;or merchants who have an MCC code of **6012**,**&#x20;6051&#x20;**&#x61;nd **7299&#x20;**&#x74;o submit additional Information about the primary account holder in **primaryAccountDetails&#x20;**&#x70;roperty for payment pre-authorisation.

:::BlockQuote
interface JudoAccountDetails \{
&#x20;name?: string,
&#x20;accountNumber?: string,
&#x20;dateOfBirth?: string,
&#x20;postCode?: string,
}
:::

To set the primary account details to be sent with the transaction:

:::BlockQuote
const myAccountDetails: JudoAccountDetails = \{
&#x20;accountNumber: '4015434234',
&#x20;name: 'test-account-name',
}

const configuration: JudoConfiguration = \{
&#x20;...
&#x20;primaryAccountDetails: myAccountDetails,
&#x20;...
}
:::

:::hint{type="info"}
The above properties are **optional**, so set only the ones you need.
:::


::::

::::ExpandableHeading
### Changing Default Supported Card Networks

To change the default supported card networks:

1. Set your own **supportedCardNetworks** value.

:::BlockQuote
enum JudoCardNetwork \{
&#x20;Visa = 1 \<\< 0,
&#x20;Mastercard = 1 \<\< 1,
&#x20;Maestro = 1 \<\< 2,
&#x20;Amex = 1 \<\< 3,
&#x20;ChinaUnionPay = 1 \<\< 4,
&#x20;JCB = 1 \<\< 5,
&#x20;Discover = 1 \<\< 6,
&#x20;DinersClub = 1 \<\< 7,
&#x20;All = 1 \<\< 8,
}
:::

For the purpose of this exercise, Visa and MasterCard are set as the only supported card networks:
`const cardNetworks = JudoCardNetwork.Visa | JudoCardNetwork.Mastercard`

To explicitly set **all&#x20;**&#x63;ard networks to be supported, instead of using the **| operator** to combine all the card networks, set:
`const cardNetworks = JudoCardNetwork.All`


::::

::::ExpandableHeading
### Setting a Card Address

:::hint{type="info"}
To set the card address when using an alternative payment method, see [Adding Payment Methods](docId\:Ur8QJJ7TjDXYHf4e5aojP).
:::

To send additional card address details with the transaction:

1. Set the **cardAddress&#x20;**&#x70;arameter in the **JudoConfiguration&#x20;**&#x6F;bject:

:::BlockQuote
const myCardAddress: JudoAddress = \{
&#x20;line1: 'My Example Street 42',
&#x20;postCode: 'EX4 MPL3',
&#x20;town: 'Example Town',
&#x20;countryCode: 832,
}

const configuration: JudoConfiguration = \{
&#x20;...
&#x20;cardAddress: myCardAddress
&#x20;...
}
:::

&#x20;
::::

::::ExpandableHeading
### Changing the Default Payment Methods

By default, **all&#x20;**&#x70;ayment methods are displayed in the Payments Widget (as long as the required parameters are set).
As a merchant, you have flexibility over which payment methods to support.

1. Change the **paymentMethods** property to the **JudoPaymentMethod** value in the **JudoConfiguration** instance:

An example of the JudoPaymentMethod:

:::BlockQuote
&#x20;enum JudoPaymentMethod \{
&#x20;Card = 1 \<\< 0,
&#x20;ApplePay = 1 \<\< 1,
&#x20;GooglePay = 1 \<\< 2,
&#x20;PayByBankApp = 1 \<\< 4,
&#x20;All = 1 \<\< 5,
}
:::

You can set multiple values using the **| operator**.
For the purpose of this exercise, Card and Apple Pay™ are set as available payment methods:
`const myPaymentMethods = JudoPaymentMethod.Card | JudoPaymentMethod.ApplePay`


To explicitly state **all&#x20;**&#x70;ayment methods are to be displayed, instead of using th&#x65;**&#x20;| operator** to combine all the payment methods, set:&#x20;
`const myPaymentMethods = JudoPaymentMethod.All`
::::

::::::ExpandableHeading
### Adding a New Language

You can:

- Add any language you need.
- Override some or all of the translations of an existing language.
  **The Judokit React Native SDK supports: en (default), fr, es.**

For your React Native project (the wrapper for the Android and iOS SDKs), language translations can override the strings using the standard Android and iOS localisation processes.

**Use Existing Translations**

1. To use or test one of Judopay's default language transalations, simply change the language on your:
   1. &#x20;**Android**:&#x20;
      1. `Settings → System → Language & input → Languages`
   2. **iOS**:
      1. `Settings → General → Language & Region → iPhone Language`

The translation will be applied automatically.

***

**Override Existing Translations**

To override existing translations, follow the Android or iOS localisation modifying steps below:

:::::Tabs
::::Tab{title="Android"}
1. Identify the SDK String Keys.
   The SDK uses string resources defined in its **strings.xml** file.&#x20;
   You can find the list of all String Keys below.
2. To modify the value of an existing string, add a new one with the same key to the strings.xml file in your Android project.&#x20;
   You will find this located in the "res/values directory".&#x20;
   This will override the SDK value of this string.

:::hint{type="warning"}
If your app **supports multiple languages**, ensure you add translations for the overridden string in the appropriate values `<language_code>` folders.&#x20;
For example values-fr for French or values-es for Spanish.
:::
::::

::::Tab{title="iOS"}
1. Identify the SDK String Keys.
   The SDK uses string resources defined in its **Localizable.strings** file.&#x20;
   You can find the list of all String Keys below.
2. To modify the value of an existing string, add a new one with the same key to the Localizable.strings file in your iOS project.&#x20;
   This will override the SDK value of this string,

:::hint{type="warning"}
If your app **supports multiple languages**, ensure you add translations for the overridden string in the corresponding .lproj directories.
For example: fr.lproj for French, es.lproj for Spanish.&#x20;

Also, remember to declare any new language in "`Project > Info > Localizations`". This will ensure the translation is recognised by the framework.
:::
::::
:::::

***

**To add a new language**

To add a new language, follow the Android or iOS steps below:

:::::Tabs
::::Tab{title="Android"}
1. Identify the SDK String Keys and prepare the translations for all values in the language you wish to add or override.
   You can find the list of all String Keys below.
2. In your app’s "res/values directory", create a new folder for the language you want to add.
   1. Make sure you use the correct language and region codes, for example:
      1. ‘**values-es**’ for Spanish
      2. ‘**values-zh-rCN**’ for Simplified Chinese
3. Inside the new language folder, create a **strings.xml** file if one does not already exist.
4. Within the newly created **strings.xml** ensure you provide the translations for **all&#x20;**&#x53;tring Keys used by the SDK, otherwise the translation may end up incomplete.

:::hint{type="warning"}
When overriding or adding new String Keys, be careful to avoid **String Key conflicts** between the SDK and your app.
Any matching Key will cause your app’s value to override the SDK's default value, which could potentially lead to unintended behaviour, or mismatched translations.
:::
::::

::::Tab{title="iOS"}
1. Identify the SDK String Keys and prepare the translations for all values in the language you wish to add or override.
   You can find the list of all String Keys below.
2. In your app’s project directory, create a new .lproj folder for the language you want to add.&#x20;
   1. Ensure you use the correct language and region codes.&#x20;
      For example:
      1. **es.lproj** for Spanish
      2. **zh-Hans.lproj** for Simplified Chinese.
3. Inside the new language folder, create a **Localizable.strings** file if one does not already exist.
4. Within the newly created Localizable.strings file ensure you provide the translations for **all&#x20;**&#x53;tring Keys used by the SDK, otherwise the translation may end up incomplete.
5. Declare the new language in: "`Project > Info > Localizations`".
   This will ensure the translation is recognised by the framework.

:::hint{type="warning"}
When overriding or adding new String Keys, be careful to avoid **String Key conflicts** between the SDK and your app.
Any matching Key will cause your app’s value to override the SDK's default value, which could potentially lead to unintended behaviour, or mismatched translations.
:::
::::
:::::

**String Keys**

:::::Tabs
::::Tab{title="Android SDK String Keys"}
:::BlockQuote
\<string name="add\_address\_line">Add address line (optional)\</string>
\<string name="add\_card">Add card\</string>
\<string name="address\_line\_1\_hint">Address line 1\</string>
\<string name="address\_line\_2\_hint">Address line 2\</string>
\<string name="address\_line\_3\_hint">Address line 3\</string>
\<string name="back">Back\</string>
\<string name="billing\_details\_title">Billing Details\</string>
\<string name="button\_done">Done\</string>
\<string name="button\_edit">Edit\</string>
\<string name="button\_scan\_card">Scan card\</string>
\<string name="cancel">Cancel\</string>
\<string name="ca\_province\_hint">Province or territory\</string>
\<string name="card\_holder\_hint">Cardholder Name\</string>
\<string name="card\_holder\_name\_required">Cardholder Name is required\</string>
\<string name="card\_holder\_name\_special\_chars">Cardholder Name can't contain numbers or special characters\</string>
\<string name="card\_holder\_name\_too\_short">Cardholder Name can't be less than 4 characters\</string>
\<string name="card\_number\_hint">Card number\</string>
\<string name="card\_subtitle">Ending\</string>
\<string name="cards">Cards\</string>
\<string name="check\_amex\_security\_code">Check your CID\</string>
\<string name="check\_card">Check Card\</string>
\<string name="check\_card\_number">Invalid card number\</string>
\<string name="check\_china\_union\_pay\_security\_code">Check your CVN2\</string>
\<string name="check\_cvv">Check your CVV\</string>
\<string name="check\_expiry\_date">Check expiry date\</string>
\<string name="check\_jcb\_security\_code">Check your CAV2\</string>
\<string name="check\_mastercard\_security\_code">Check your CVC2\</string>
\<string name="check\_visa\_security\_code">Check your CVV2\</string>
\<string name="choose\_payment\_method">Choose a Payment Method\</string>
\<string name="city\_hint">City\</string>
\<string name="close">Close\</string>
\<string name="connected\_cards">Connected Cards\</string>
\<string name="continue\_text">Continue\</string>
\<string name="country\_canada">Canada\</string>
\<string name="country\_hint">Country\</string>
\<string name="country\_other">Other\</string>
\<string name="country\_uk">UK\</string>
\<string name="country\_usa">USA\</string>
\<string name="customize\_card">Customise Card\</string>
\<string name="cvv\_hint">CVV\</string>
\<string name="date\_hint">MM/YY\</string>
\<string name="default\_amex\_card\_title">My American Express Card\</string>
\<string name="default\_chinaunionpay\_card\_title">My China Union Pay Card\</string>
\<string name="default\_dinnersclub\_card\_title">My Diners Club Card\</string>
\<string name="default\_discover\_card\_title">My Discover Card\</string>
\<string name="default\_jcb\_card\_title">My JCB Card\</string>
\<string name="default\_maestro\_card\_title">My Maestro Card\</string>
\<string name="default\_mastercard\_card\_title">My MasterCard Card\</string>
\<string name="default\_visa\_card\_title">My VISA Card\</string>
\<string name="delete">Delete\</string>
\<string name="delete\_card\_alert\_message">Are you sure you want to delete this card from your wallet?\</string>
\<string name="delete\_card\_alert\_title">Delete Card?\</string>
\<string name="dismiss">Dismiss\</string>
\<string name="email\_hint">Email\</string>
\<string name="error\_amex\_not\_supported">American Express is not supported\</string>
\<string name="error\_card\_title\_too\_long">Card Name cannot be longer than %1$d characters\</string>
\<string name="error\_country\_should\_not\_be\_empty">Please select a country\</string>
\<string name="error\_diners\_club\_not\_supported">Diners Club is not supported\</string>
\<string name="error\_discover\_not\_supported">Discover is not supported\</string>
\<string name="error\_jcb\_not\_supported">JCB is not supported\</string>
\<string name="error\_maestro\_not\_supported">Maestro is not supported\</string>
\<string name="error\_mastercard\_not\_supported">Mastercard is not supported\</string>
\<string name="error\_province\_territory\_should\_not\_be\_empty">Please select a province or territory\</string>
\<string name="error\_state\_should\_not\_be\_empty">Please select a state\</string>
\<string name="error\_union\_pay\_not\_supported">China UnionPay is not supported\</string>
\<string name="error\_unknown\_not\_supported">Unknown Card Network is not supported\</string>
\<string name="error\_visa\_not\_supported">Visa is not supported\</string>
\<string name="expire\_soon">Expire soon\</string>
\<string name="expired">Expired\</string>
\<string name="invalid\_address">Please enter a valid address\</string>
\<string name="invalid\_city">Please enter a valid city\</string>
\<string name="invalid\_email\_address">Please enter a valid email\</string>
\<string name="invalid\_mobile\_number">Please enter a valid mobile number\</string>
\<string name="invalid\_phone\_country\_code">Please enter a valid country code\</string>
\<string name="invalid\_postcode">Invalid postcode entered\</string>
\<string name="invalid\_zip\_code">Invalid ZIP code entered\</string>
\<string name="is\_expired">Is expired\</string>
\<string name="mobile\_number\_hint">Mobile number\</string>
\<string name="no">No\</string>
\<string name="no\_cards\_added">You didn’t add any cards yet. Add one right now or use any of the payment methods below\</string>
\<string name="no\_connected\_cards">You didn't connect any cards yet\</string>
\<string name="ok">Ok\</string>
\<string name="pay\_amount">Pay %1$s\</string>
\<string name="pay\_now">Pay Now\</string>
\<string name="phone\_country\_code\_hint">+()\</string>
\<string name="post\_code\_hint">Postcode\</string>
\<string name="processing">Transaction pending…\</string>
\<string name="register\_card">Register Card\</string>
\<string name="retry">Retry\</string>
\<string name="save">Save\</string>
\<string name="save\_as\_default\_payment\_method">Save as default payment method\</string>
\<string name="save\_card">Save Card\</string>
\<string name="scan\_card\_confirm">Got it\</string>
\<string name="scan\_card\_go\_to\_settings">Go to Settings\</string>
\<string name="scan\_card\_no\_permission\_message">Permissions must be granted in order to use the scan card functionality. Please go to Settings and toggle Camera on\</string>
\<string name="scan\_card\_no\_permission\_title">Camera permissions not granted\</string>
\<string name="secure\_checkout">Secure Checkout\</string>
\<string name="secure\_server\_transmission">Your card details are encrypted using TLS before transmission to our secure payment service provider.\</string>
\<string name="there\_is\_a\_delay">This is taking longer than expected. Please wait…\</string>
\<string name="three\_d\_secure\_check">3D Secure Check\</string>
\<string name="transaction\_successful">Transaction success!\</string>
\<string name="transaction\_unsuccessful">Transaction unsuccessful - please try again\</string>
\<string name="unable\_to\_process\_request\_error\_title">Unable to process\</string>
\<string name="us\_state\_hint">State\</string>
\<string name="will\_expire\_soon">will expire soon\</string>
\<string name="yes">Yes\</string>
\<string name="you\_will\_pay">You will pay\</string>
:::
::::

::::Tab{title="iOS SDK String Keys"}
:::BlockQuote
"add\_card" = "Add card";
"apple\_pay" = "Apple Pay";
"button\_done" = "DONE";
"button\_edit" = "Edit";
"button\_scan\_card" = "Scan card";
"button\_add\_address\_line\_card" = "+ Add address line (optional)";
"cancel" = "Cancel";
"back" = "Back";
"card\_holder\_email\_hint" = "Email";
"card\_holder\_hint" = "Cardholder Name";
"card\_holder\_country\_hint" = "Country";
"card\_holder\_state\_hint" = "State";
"card\_holder\_province\_hint" = "Province or territory";
"card\_holder\_phone\_hint" = "Mobile number";
"card\_holder\_city\_hint" = "City";
"card\_holder\_adress\_line\_hint" = "Address line";
"card\_number\_hint" = "Card Number";
"card\_subtitle" = "Ending";
"cards" = "Cards";
"check\_card" = "Check Card";
"check\_expiry\_date" = "Check expiry date";
"choose\_payment\_method" = "Choose a Payment Method";
"connected\_cards" = "Connected cards";
"country\_canada" = "Canada";
"country\_other" = "Other";
"country\_uk" = "UK";
"country\_usa" = "USA";
"customize\_card" = "Customise Card";
"default\_amex\_card\_title" = "My American Express Card";
"default\_chinaunionpay\_card\_title" = "My China Union Pay Card";
"default\_dinersclub\_card\_title" = "My Diners Club Card";
"default\_discover\_card\_title" = "My Discover Card";
"default\_jcb\_card\_title" = "My JCB Card";
"default\_maestro\_card\_title" = "My Maestro Card";
"default\_mastercard\_card\_title" = "My MasterCard Card";
"default\_visa\_card\_title" = "My VISA Card";
"delete" = "Delete";
"delete\_card\_alert\_message" = "Are you sure you want to delete this card from your wallet?";
"delete\_card\_alert\_title" = "Delete Card?";
"dismiss" = "Dismiss";
"error" = "Error";
"enter\_card\_title" = "Enter a card title...";
"error\_card\_title\_too\_long" = "Card Name cannot be longer than 28 characters";
"error\_invalid\_card\_number\_desc" = "Invalid card number";
"error\_unsupported\_card\_desc" = " is not supported";
"expire\_soon" = "Expire soon";
"expired" = "Expired";
"expiry\_date" = "MM/YY";
"invalid\_expiry\_date\_value" = "Invalid date value entered";
"invalid\_email\_value" = "Invalid email entered";
"invalid\_phone\_code\_value" = "Invalid phone code entered";
"invalid\_phone\_value" = "Invalid phone entered";
"invalid\_postcode" = "Invalid postcode entered";
"invalid\_zip\_code" = "Invalid ZIP code entered";
"invalid\_email\_address" = "Please enter a valid email";
"invalid\_state\_should\_not\_be\_empty" = "Please select a state";
"invalid\_province\_territory\_should\_not\_be\_empty" = "Please select a province or territory";
"invalid\_address" = "Please enter a valid address";
"invalid\_mobile\_number" = "Please enter a valid mobile number";
"invalid\_city" = "Please enter a valid city";
"is\_expired" = "Is expired";
"no\_cards\_added" = "You didn’t add any cards yet. Add one right now or use any of the payment methods below";
"no\_connected\_cards" = "You didn't connect any cards yet";
"ok" = "Ok";
"pay\_amount" = "Pay %@";
"pay\_now" = "Pay Now";
"continue" = "Continue";
"post\_code\_hint" = "Postcode";
"email\_hint" = "Email";
"phone\_country\_code\_hint" = "+()";
"mobile\_number\_hint" = "Mobile number";
"address\_line\_1\_hint" = "Address line 1";
"address\_line\_2\_hint" = "Address line 2";
"address\_line\_3\_hint" = "Address line 3";
"city\_hint" = "City";
"processing" = "Transaction pending...";
"register\_card" = "Register Card";
"retry" = "Retry";
"save" = "Save";
"save\_as\_default\_payment\_method" = "Save as default payment method";
"save\_card" = "Save Card";
"scan\_card\_confirm" = "Got it";
"scan\_card\_go\_to\_settings" = "Go to Settings";
"scan\_card\_hint\_subtitle" = "We will do our best to scan it";
"scan\_card\_hint\_title" = "Position card in this frame";
"scan\_card\_no\_permission\_message" = "Permissions must be granted in order to use the scan card functionality. Please go to Settings and toggle Camera on";
"scan\_card\_no\_permission\_title" = "Camera permissions not granted";
"scan\_card\_restricted\_message" = "Scan camera functionality is not available due to restriction on your device";
"scan\_card\_restricted\_title" = "Camera access restricted";
"scan\_card\_simulator\_title" = "Camera not available on iOS simulators";
"secure\_server\_transmission" = "Your card details are encrypted using TLS before transmission to our secure payment service provider.";
"three\_d\_secure\_check" = "3D Secure Check";
"transaction\_delayed" = "This is taking longer than expected...";
"transaction\_successful" = "Transaction success!";
"transaction\_timeout" = "Transaction timed out!";
"transaction\_unsuccessful" = "Card transaction unsuccessful - please try again";
"unknown\_card\_network" = "Unknown card network";
"will\_expire\_soon" = "It will expire soon";
"you\_will\_pay" = "You will pay";
"error\_apple\_pay\_not\_supported\_desc" = "Apple Pay is not supported on this device.";
"error\_apple\_pay\_not\_supported\_reason" = "An Apple Pay transaction was attempted on a device that either does not support, or does not have Apple Pay set up.";
"error\_request\_failed\_desc" = "The request has failed or responded without data.";
"error\_request\_failed\_reason" = "The transaction response returned without any data or there was an error while forming the request.";
"error\_request\_timeout\_desc" = "The request has timed out.";
"error\_request\_timeout\_reason" = "The request failed to complete in the allocated time frame.";
"error\_json\_serialization\_desc" = "The response data could not be serialized into a JSON.";
"error\_json\_serialization\_reason" = "The server responded with an invalid data format.";
"error\_user\_cancelled\_desc" = "The transaction was cancelled by the user.";
"error\_user\_cancelled\_reason" = "The user closed the transaction flow without completing the transaction.";
"error\_internet\_connection\_desc" = "No internet connection found.";
"error\_internet\_connection\_reason" = "The request could not be sent due to no internet connection.";
"error\_invalid\_card\_number\_reason" = "The number entered is not a valid card number or is not supported by the SDK.";
"error\_unsupported\_card\_reason" = "The number entered belongs to a card network that is not allowed by the merchant.";
"error\_response\_parse\_desc" = "Unexpected response format returned.";
"error\_response\_parse\_reason" = "The response did not contain some of the required parameters needed to complete the transaction.";
"error\_no\_message\_desc" = "The request has failed with no underlying message.";
"error\_no\_message\_reason" = "The server responded with an error.";
"error\_apple\_pay\_missing\_items\_desc" = "The Apple Pay configuration must have at least one payment item.";
"error\_apple\_pay\_missing\_items\_reason" = "The Payment Items array of the Apple Pay configuration is either empty or missing.";
"error\_apple\_pay\_missing\_shipping\_desc" = "The Apple Pay configuration must have at least one shipping method.";
"error\_apple\_pay\_missing\_shipping\_reason" = "Shipping methods must be set if the required shipping contact fields are specified.";
"error\_judo\_id\_missing\_desc" = "The Judo ID parameter cannot be null or empty.";
"error\_judo\_id\_missing\_reason" = "The required Judo ID parameter has not been set in the Judo configuration.";
"error\_invalid\_judo\_id\_desc" = "The Judo ID entered is invalid.";
"error\_invalid\_judo\_id\_reason" = "The specified Judo ID parameter has an incorrect format.";
"error\_currency\_missing\_desc" = "Currency cannot be null or empty.";
"error\_currency\_missing\_reason" = "The required Currency parameter has not been set in the Judo configuration.";
"error\_invalid\_currency\_desc" = "The specified currency code is not supported.";
"error\_invalid\_currency\_reason" = "The currency code entered is either not a valid ISO 4217 code or is not supported by the SDK.";
"error\_apple\_pay\_merchant\_id\_missing\_desc" = "The Apple Pay merchant ID cannot be null or empty.";
"error\_apple\_pay\_merchant\_id\_missing\_reason" = "Apple Pay needs a valid merchant ID to be able to identify your transaction.";
"error\_invalid\_country\_code\_desc" = "The specified country code is not supported.";
"error\_invalid\_country\_code\_reason" = "The country code entered is either not a valid ISO 3166 2-letter code or is not supported by the SDK.";
"error\_apple\_pay\_config\_missing\_desc" = "The Apple Pay transaction has not been configured.";
"error\_apple\_pay\_config\_missing\_reason" = "No Apple Pay configuration was found in your Judo configuration object.";
"error\_invalid\_amount\_desc" = "The amount specified should be a positive number.";
"error\_invalid\_amount\_reason" = "The amount parameter has either not been set or has an incorrect format.";
"error\_invalid\_consumer\_ref\_desc" = "The consumer reference entered is invalid.";
"error\_invalid\_consumer\_ref\_reason" = "The consumer reference parameter has either not been set or has an incorrect format.";
"error\_invalid\_token\_payment\_transaction\_type\_desc" = "Token payments transactions only support JPTransactionTypePayment and JPTransactionTypePreAuth as the transaction type.";
"error\_invalid\_token\_payment\_transaction\_type\_reason" = "Invalid transaction type passed to token payment transaction configuration.";
"error\_preauth\_properties\_conflict\_desc" = "Both delayedAuthorisation and allowIncrement flags can't be set to true.";
"error\_preauth\_properties\_conflict\_reason" = "Preauth properties conflict";
"error\_recommendation\_server\_prevented\_transaction\_desc" = "The recommendation server has prevented this transaction.";
"error\_recommendation\_server\_prevented\_transaction\_reason" = "It appears that the transaction you attempted to make has been blocked by the recommendation server.";
"error\_recommendation\_server\_request\_failed\_desc" = "There was an error when retrieving the recommendation response.";
"error\_recommendation\_server\_request\_failed\_reason" = "We are unable to process this request as there was an error when retrieving the recommendation response.";
"error\_recommendation\_invalid\_authorization\_type\_desc" = "Payment session is required for using the recommendation feature.";
"error\_recommendation\_invalid\_authorization\_type\_reason" = "To use the recommendation feature, it is mandatory to have a payment session.";
"error\_recommendation\_invalid\_URL\_desc" = "The URL field in the recommendation configuration is required.";
"error\_recommendation\_invalid\_URL\_reason" = "It is mandatory to provide a URL in the recommendation configuration.";
"error\_recommendation\_invalid\_rsa\_public\_key\_desc" = "The RSAPublicKey field in the recommendation configuration is required.";
"error\_recommendation\_invalid\_rsa\_public\_key\_reason" = "It is mandatory to provide a RSAPublicKey in the recommendation configuration.";
"error\_recommendation\_invalid\_timeout\_desc" = "The timeout value provided in the recommendation configuration must be a number.";
"error\_recommendation\_invalid\_timeout\_reason" = "The timeout in the recommendation configuration should be an instance of NSNumber.";
"error\_missing\_recurring\_description\_desc" = "Recurring Payment description cannot be null";
"error\_missing\_recurring\_description\_reason" = "The required Recurring Payment parameter has not been set in the Apple Pay configuration.";
"error\_missing\_recurring\_management\_url\_desc" = "Recurring Payment management URL cannot be null";
"error\_missing\_recurring\_management\_url\_reason" = "The required Recurring Payment parameter has not been set in the Apple Pay configuration.";
"error\_missing\_recurring\_regular\_billing\_desc" = "Recurring Payment regular billing cannot be null";
"error\_missing\_recurring\_regular\_billing\_reason" = "The required Recurring Payment configuration sub-object is missing.";
"error\_missing\_recurring\_amount\_desc" = "Recurring Payment amount cannot be null";
"error\_missing\_recurring\_amount\_reason" = "The required Recurring Payment parameter has not been set in the Apple Pay configuration.";
"error\_missing\_recurring\_label\_desc" = "Recurring Payment label cannot be null";
"error\_missing\_recurring\_label\_reason" = "The required Recurring Payment parameter has not been set in the Apple Pay configuration.";
"continue\_text" = "Continue";
"add\_address\_line" = "Add address line (optional)";
"billing\_details\_title" = "Billing Details";
"back" = "Back";
"card\_holder\_name\_required" = "Cardholder Name is required";
"card\_holder\_name\_too\_short" = "Cardholder Name can't be less than 4 characters";
"card\_holder\_name\_special\_chars" = "Cardholder Name can't contain numbers or special characters";
"check\_security\_code" = "Check your ";
:::
::::
:::::
::::::

::::ExpandableHeading
### React Native Styles and Themes

:::hint{type="info"}
To make custom fonts work, they must be added to your client app first.
:::

**Styling**
The JudoTheme property handles the:

- Font families
- Font sizes
- Font colors

:::hint{type="warning"}
Please note this will only apply styles and themes to the **iOS&#x20;**&#x70;latform.
:::

***

**Custom Fonts**

:::BlockQuote
const theme: JudoTheme = \{&#x20;
largeTitleFont: "Quicksand-Bold",&#x20;
largeTitleSize: 18,&#x20;
titleFont: "Quicksand-Italic",&#x20;
titleSize: 16,&#x20;
headlineFont: "Quicksand-Regular",&#x20;
headlineSize: 15,&#x20;
headlineLightFont: "Quicksand-Regular",&#x20;
headlineLightSize: 15,&#x20;
bodyFont: "Quicksand-Regular",&#x20;
bodySize: 15,&#x20;
bodyBoldFont: "Quicksand-Bold",&#x20;
bodyBoldSize: 17,&#x20;
captionFont: "Quicksand-Regular",&#x20;
captionSize: 18,&#x20;
captionBoldFont: "Quicksand-Light",&#x20;
captionBoldSize: 16,&#x20;
jpBlackColor: "#262626",&#x20;
jpDarkGrayColor: "#999999",&#x20;
jpGrayColor: "#E5E5E5",&#x20;
jpLightGrayColor: "#F6F6F6",&#x20;
jpRedColor: "#E21900",&#x20;
jpWhiteColor: "#FFFFFF",&#x20;
buttonColor: "#999999",&#x20;
buttonTitleColor: "#000000",&#x20;
backButtonImage: "back-button.png",&#x20;
buttonCornerRadius: 5&#x20;
}&#x20;
:::

An example of a complete custom theme:

:::BlockQuote
&#x20;const myTheme: JudoTheme = \{
&#x20;largeTitleFont: 'Avenir',
&#x20;largeTitleSize: 20,
&#x20;buttonColor: '#FFFFFF',
&#x20;buttonCornerRadius: 4.0,
&#x20;backButtonImage: 'my-custom-icon-filename'
}

const uiConfiguration: JudoUIConfiguration \{
&#x20;...,
&#x20;theme: myTheme,
&#x20;...,
}

const configuration: JudoConfiguration = \{
&#x20;...,
&#x20;uiConfiguration: uiConfiguration,
&#x20;…
}
:::

&#x20;
::::

::::ExpandableHeading
### Payments Widget

To set up the Payments Widget for React Native:

1. Set up the **JudoConfiguration&#x20;**&#x69;nstance:

:::BlockQuote
const configuration: JudoConfiguration = \{
...
&#x20;paymentMethods: JudoPaymentMethods.All,
&#x20;applePayConfiguration: applePayConfiguration,
&#x20;googlePayConfiguration: googlePayConfiguration,
...
}
judo.invokePaymentMethodScreen(JudoTransactionMode.Payment, configuration)
&#x20;.then((response) => \{/\* Handle response \*/})
&#x20;.catch((error) => \{/\* Handle error \*/})
:::


::::

::::ExpandableHeading
### Setting up the Transaction Reference

Setting up the transaction reference enables you to also set up your **consumerReference&#x20;**&#x61;nd **paymentReference&#x20;**&#x77;hich are included within the transaction.
These references help you to **identify&#x20;**&#x79;our consumer and transaction.

To set up the transaction reference:

1. From the imported JudoReference interface:

:::BlockQuote
interface JudoReference \{
&#x20;consumerReference: string,
&#x20;paymentReference?: string,
&#x20;metadata?: Record\<string, string>,
}
:::

&#x20;   2\. Use the interface to set your **consumerReference**.
&#x20;   A unique reference to identify your consumer.

&#x20;   3\. You can also set optional fields, for example:

1. **paymentReference**:
   A unique payment reference for the transaction.
2. &#x20;**metaData**:
   Any additional organisation or system details
   to be included in the transaction.

For example a **consumerReference&#x20;**&#x69;s set:

:::BlockQuote
const reference: JudoReference = \{
&#x20;consumerReference: 'my-consumer-reference'
}
:::

&#x20;For the purpose of this exercise, the:

- amount
- reference
- judoID

are set in the **JudoConfiguration&#x20;**&#x69;nstance:

:::BlockQuote
const configuration: JudoConfiguration = \{
&#x20;judoId: 'my-judo-id',
&#x20;amount: amount,
&#x20;reference: reference,
}
:::

All the required parameters are now set up, and ready to make a transaction.

&#x20;A complete **JudoConfiguration&#x20;**&#x65;xample:

:::BlockQuote
import \{ JudoAmount, JudoReference, JudoConfiguration } from 'judokit-react-native'

const amount: JudoAmount = \{
&#x20;value: '1.00',
&#x20;currency: 'GBP',
}
const reference: JudoReference = \{
&#x20;consumerReference: 'myConsumerReference',
&#x20;paymentReference: 'myPaymentReference',
&#x20;metadata: \{
&#x20;'metadatakey': 'metadataValue',
&#x20;'metadatakey2': 'metadataValue',
&#x20;}
}
const configuration: JudoConfiguration = \{
&#x20;judoId: 'my-judo-id',
&#x20;amount: amount,
&#x20;reference: reference,
}
:::



::::

***

## Adding Payment Methods

:::hint{type="warning"}
Before you can process Apple Pay™ payments with Judopay, you will need to set up Apple Pay™.
Apple Pay™ is not supported on all Apple devices.
:::

### Prerequisite

- You have set up your Apple Pay™ Developer Account to get your Merchant IDs.
  For more details, see [Configuring Apple Pay for iOS](docId:09p1crU0CbxJkzEa-0ZPI).

Before invoking any Apple Pay™ functionality within your app, test if it is supported on the device by performing these checks:

- **Use PKPaymentAuthorizationViewController canMakePayments**
  - Checks if the device supports Apple Pay™ and has it enabled.
  - Queries both the device hardware and whether Apple Pay™ is enabled in the user’s region.
- **Use PKPaymentAuthorizationViewController canMakePaymentsUsingNetworks**
  - A more detailed check to query whether a user has a registered card with particular card schemes.
  - Useful if you do not accept all card types.

Both methods are explained in the Apple developer documentation [here](https://developer.apple.com/documentation/passkit/pkpaymentauthorizationviewcontroller).

::::ExpandableHeading
### Integrating Apple Pay™ for React Native

**Step One: Configure Apple Pay™**

- Create an **applePayConfiguration&#x20;**&#x69;nstance:

:::BlockQuote
const applePayConfiguration: JudoApplePayConfiguration = \{
&#x20;merchantId: 'my-merchant-id',
&#x20;countryCode: 'GB',
&#x20;paymentSummaryItems: \[item],
&#x20;requiredBillingContactFields: JudoContactField.Name | JudoContactField.Email,
&#x20;requiredShippingContactFields: JudoContactField.All,
&#x20;shippingMethods: \[delivery],
&#x20;shippingType: JudoShippingType.Delivery,
&#x20;returnedInfo: JudoReturnedInfo.All,
&#x20;recurringPaymentRequest?: JudoApplePayRecurringPaymentRequest,
}
:::

| **Parameter**                                                                                    | **Description**                                                                                                                                                                                                                            |
| ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `merchantId`<br />String<br /><font color="#ef5b2e">Required</font>                              | Your Apple Pay™ merchant ID.This confirms you are able to accept payments.                                                                                                                                                                 |
| `countryCode`<br />String<br /><font color="#ef5b2e">Required</font>                             | An ISO 3166-1 Alpha-2 country code.                                                                                                                                                                                                        |
| `paymentSummaryItems`<br />String<br /><font color="#ef5b2e">Required</font>                     | The list of items.                                                                                                                                                                                                                         |
| `requiredBillingContactFields`<br />JudoContactField<br /><font color="#42cbd4">Optional</font>  | Select between one or more billing contact fields.<br />For example:<br />* Email
* Phone
* Name                                                                                                                                           |
| `requiredShippingContactFields`<br />JudoContactField<br /><font color="#42cbd4">Optional</font> | Select between one or more shipping contact fields.<br />For example:<br />* Email
* Phone
* Name                                                                                                                                          |
| `shippingMethods`<br />JudoShippingMethod\[]<br /><font color="#42cbd4">Optional</font>          | Describe some of the shipping methods that you provide.<br />**Although this parameter is optional, if you set shipping contact fields as required, you must also provide the shipping type and shipping methods**.                        |
| `shippingType`<br />JudoShippingType<br /><font color="#42cbd4">Optional</font><br />            | Select a shipping type:<br />* Delivery
* Shipping
* Store Pickup
* Service Pickup<br />Although this parameter is optional, if you set shipping contact fields as required, you must also provide the shipping type and shipping methods. |
| `returnedInfo`<br />JudoReturnedInfo<br /><font color="#42cbd4">Optional</font>                  | Select to receive some of the billing and/or shipping details as a response property.                                                                                                                                                      |
| `recurringPaymentRequest`<font color="#ef5b2e">
</font><font color="#42cbd4">Optional</font>     | Enables the Apple Pay™ Recurring Payment functionality.                                                                                                                                                                                    |

***

**Step Two: Check Availability and Make an Apple Pay™ Transaction**

:::BlockQuote
async displayApplePaySheet() \{
&#x20;try \{
&#x20;const judo = new JudoPay(this.getAuthorization())
&#x20;const config = this.state.configuration
&#x20;const isApplePayAvailable = await judo.isApplePayAvailableWithConfiguration(config)

&#x20;if (isApplePayAvailable) \{
&#x20;const response = await judo.invokeApplePay(JudoTransactionMode.Payment, config)
&#x20;if (response != null) \{
&#x20;this.props.navigation.navigate('Receipt', \{ receipt: response })
&#x20;}
&#x20;} else \{
&#x20;await showMessage('Error', 'ApplePay is not available for given configuration')
&#x20;}
&#x20;} catch (error) \{
&#x20;await showMessage('Error', error.message)
&#x20;}
&#x20;}
:::

***

**Displaying Apple Pay™ as a Payment Method**

To display Apple Pay™ in the Payments Widget:

- Add the **applePayConfiguration&#x20;**&#x70;roperty to the **JudoConfiguration&#x20;**&#x69;nstance:

:::BlockQuote
const configuration: JudoConfiguration = \{&#x20;
judoId: 'my-judo-id',&#x20;
amount: amount,&#x20;
reference: reference,&#x20;
applePayConfiguration: applePayConfiguration,
}
:::

- Call the ApplePay method and handle the response:

:::BlockQuote
import \{ ..., JudoTransactionMode, ... } from 'judokit-react-native'

judo.invokeApplePay(JudoTransactionMode.Payment, configuration)
&#x20;.then((response) => \{/\* Handle response \*/})
&#x20;.catch((error) => \{/\* Handle error \*/})

:::

:::hint{type="info"}
Use the **JudoTransactionMode&#x20;**&#x70;roperty for Payments or Pre-auths with Apple Pay™.
:::

***

**Making an Apple Pay™ Transaction**

An example of an Apple Pay™ transaction:

:::BlockQuote
import \{ ..., JudoTransactionMode, ... } from 'judokit-react-native'

// Describing the purchased items
const itemOne: JudoPaymentSummaryItem = \{&#x20;
label: 'Apple iPhone XR',&#x20;
amount: '699.95',
}
const itemTwo: JudoPaymentSummaryItem = \{&#x20;
label: 'Apple Leather Case',&#x20;
amount: '55.50',
}
const total: JudoPaymentSummaryItem = \{&#x20;
label: 'Tim Apple',&#x20;
amount: '755.45',
}
// Describe the shipping method
const delivery: JudoShippingMethod = \{&#x20;
identifier: 'delivery-id',&#x20;
label: 'Delivery',&#x20;
detail: 'Deliver to your home address',&#x20;
amount: '15.0',
}
:::

:::hint{type="warning"}
The last item in the **JudoPaymentSummaryItem&#x20;**&#x6C;ist must always represent the **total&#x20;**&#x61;mount of the previous items.
:::

***

**Apple Pay™ Recurring Payments**

Judopay provides support for Apple Pay™ recurring payments.&#x20;
This feature enables merchants to utilise the Apple Pay™ **recurring payment token**, by also being able to use the token for **Merchant-Initiated Transactions** (MITs).

The Apple Pay™ recurring payment token is generated by Apple Pay's servers and sent to Judopay, where it is **securely stored**.&#x20;
In return, you will receive a Judopay token that is **linked&#x20;**&#x74;o the stored Apple Pay™ token.&#x20;
This Judopay token can then be used for future MITs. For more information on MITs, see [Merchant Initiated Transactions](docId\:ek1dldO8cGr9DI226zlyf).


:::hint{type="info"}
You are responsible for initiating Merchant-Initiated Transactions.
:::

***

**Setting up the Apple Pay™ Transaction for Recurring Payments**

To use the Apple Pay™ recurring payments feature, begin with an initial Apple Pay™ transaction with these additional steps:

1. Attach the recurring payment configuration object `recurringPaymentRequest` to your **applePayConfiguration** set in Step One.

:::CodeblockTabs
Recurring Payment Request

```typescript
// Create a regular billing item
const regularBilling: JudoRecurringPaymentSummaryItem = {
  	label: "Premium Music Subscription",
    amount: "9.99",
    intervalUnit: JudoCalendarUnit.Month,
    intervalCount: 1
};

// Create the Recurring Payment Request configuration object
const managementURL = "https://example.com/manage-subscription";
const request: JudoRecurringPaymentRequest = {
  	paymentDescription: "Monthly subscription for Premium Music Service",
	managementURL: managementURL,
 	regularBilling: regularBilling,
 	billingAgreement: "By subscribing, you agree to monthly billing of £9.99 for the Music Service until canceled."
};

// Assign the recurring payment request to the Apple Pay configuration (if not done already on Apple Pay Configuration initialization)
applePayConfiguration.recurringPaymentRequest = request;
```
:::

**JudoRecurringPaymentRequest**

| **Name**             | **Type**                                                                             | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| -------------------- | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `paymentDescription` | string<br />(non null / required)                                                    | Provide a description of the recurring payment.<br />This will be displayed in the payment sheet to the consumer.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `regularBilling`     | &#xD;JudoRecurringPaymentSummaryItem<br />(non null / required)&#xD;<br />&#xD;      | The regular billing cycle for the recurring payment.<br />Includes:<br />* start date&#x20;
* end date&#x20;
* an interval
* an interval count                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `managementUrl`      | string<br />(non null / required)                                                    | A URL to a web page where the consumer can update or delete the payment method for the recurring payment.&#xD;<br />&#xD;<br />**Note**: It is best practice to use a **universal link** for this URL.<br />The same link can direct the consumer to either a page in the app (if the app is installed), or to a page on the merchant’s website.<br />For more information on adopting universal links, see [Universal links](https://developer.apple.com/ios/universal-links/).                                                                                                                                                                                                                                                                                                                                                                   |
| `billingAgreement`   | string<br />(nullable / optional)<br /><br />Maximum string length = 500 characters. | A localised billing agreement.<br /><br />This agreement is displayed via the payment sheet to the consumer before they authorise the payment.<br />&#xD;<br />**Note**: This string can include information on:<br />* the recurring payment amount
* recurring intervals
* other payment conditions
* information on how the consumer can cancel payments<br />This string is **not intended&#x20;**&#x74;o replace any **payment terms** that you provide outside of the Apple Pay™ payment sheet.&#xD;<br />&#xD;<br />The Apple Pay™ payment sheet displays the text of the `billingAgreement` string.<br /><br />For **long&#x20;**`billingAgreement` strings that can not fit on the payment sheet, these will appear truncated with an ellipsis.<br />Consumers can select the Billing Details on the payment sheet to read the full text. |

**JudoRecurringPaymentSummaryItem**

| **Name**        | **Type**                                    | **Description**                                                                                                                                                                                                                                                                             |
| --------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `label`         | string<br />(non null / required)           | A short, localised description of the item.<br />**Note**: Provide the label in title case.<br />For example:<br />* VAT Tax
* Gift Wrap and Card
* Discount<br />Ensure you omit any punctuation and whitespace after the label.<br />The label is formatted for display by the framework. |
| `amount`        | string<br />(non null / required)           | The amount of the summary item.<br />To specify the currency, set a value for the currency property on the Apple Pay configuration object.                                                                                                                                                  |
| `intervalUnit`  | JudoCalendarUnit<br />(nullable / optional) | The amount of time in calendar units that represents a fraction of the total payment interval.<br />The supported JudoCalendarUnit `intervalUnits` are:<br />* minute
* hour
* day
* month
* year                                                                                           |
| `intervalCount` | number<br />(nullable / optional)           | The number of interval units that make up the total payment interval.<br />**Note**: The default value for the interval count is 1.                                                                                                                                                         |
| `startDate`     | string<br />(nullable / optional)           | The date of the first payment.<br />Formatted as **ISO 8601&#x20;**&#x73;tring:<br />* "2025-01-17T14:35:22.123Z<br />The default value is nil which requests the first payment as part of the initial transaction.                                                                         |
| `endDate`       | string<br />(nullable / optional)           | The date of the final payment.<br />The default value is nil which specifies no end date.                                                                                                                                                                                                   |

:::hint{type="info"}
The above configuration object property descriptions are extracts from the Apple developer documentation.
For a full description on all the object properties, see the [Apple Pay Documentation](https://developer.apple.com/documentation/passkit/pkrecurringpaymentrequest).
:::

2\. To initiate a series of scheduled / recurring payments, set the `initialRecurringPayment` flag in the Judopay configuration object to **true**.&#x20;

:::CodeblockTabs
initialRecurringPayment TRUE

```typescript
let configuration = {} as JudoConfiguration;
(...)
configuration = {
    ...configuration,
    isInitialRecurringPayment: true,
};
```
:::

:::hint{type="info"}
If you plan to use the Judopay token for unscheduled / Ad Hoc MIT transaction(s) in the future, leave the `initialRecurringPayment` flag = **false&#x20;**(default).
:::



&#x20;
::::

::::ExpandableHeading
### Integrating Google Pay™ for React Native

**Prerequisite**

- You have set up your Google Pay™ payments profile.
  - For more details, see [Create a Payments Profile.](https://support.google.com/googleplay/android-developer/answer/7161426?hl=en-GB)

To make a Google Pay™ transaction, or add Google Pay™ as a payment method in the Payment Method Selection screen:

1. Provide a **JudoGooglePayConfiguration** property.

Example of a **googlePayConfiguration&#x20;**&#x70;roperty:

:::BlockQuote
import \{&#x20;
JudoGooglePayConfiguration,&#x20;
JudoGooglePayEnvironment,&#x20;
JudoAddressFormat,&#x20;
JudoBillingAddressParameters,&#x20;
JudoShippingAddressParameters&#x20;
} from 'judokit-react-native'&#x20;

const billingParameters: JudoBillingAddressParameters = \{&#x20;
addressFormat: JudoAddressFormat.MINIMAL,&#x20;
isPhoneNumberRequired: true,&#x20;
}&#x20;

const shippingParameters: JudoShippingAddressParameters = \{&#x20;
allowedCountryCodes: \["GB", "US"],&#x20;
isPhoneNumberRequired: false,
}

const googlePayConfiguration: JudoGooglePayConfiguration = \{&#x20;
countryCode: 'GB',&#x20;
environment: JudoGooglePayEnvironment.TEST,&#x20;
isEmailRequired: true,&#x20;
isBillingAddressRequired: true,&#x20;
billingAddressParameters: billingParameters,&#x20;
isShippingAddressRequired: true,&#x20;
shippingAddressParameters: shippingParameters
}
:::

| **Field**                                                                                               | **Description**                                                                                                                                                                                                                    |
| ------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `countryCode`<br />String<font color="#ef5b2e">
Required</font>                                         | An ISO 3166-1 Alpha-2 country code.                                                                                                                                                                                                |
| `environment`<br />JudoGooglePayEnvironment<br />enum<font color="#ef5b2e">
Required</font>             | Sets the Google Pay™ environment to either:<br />* TEST
* PRODUCTION<br />In order to go-live you will need to have set up your Google Pay™ API merchant **live** account.                                                         |
| `IsEmailRequired`<br />Boolean <font color="#42cbd4">
Optional</font>                                   | Specifies if the user is required to add their email address.                                                                                                                                                                      |
| `IsBillingAddressRequired`<br />Boolean <font color="#42cbd4">
Optional</font>                          | Specifies if the user is required to add their billing information.                                                                                                                                                                |
| `billingAddressParameters`<br />JudoBillingAddressParameters<br /><font color="#42cbd4">Optional</font> | Describes the full or minimum:<br />* billing requirements
* phone number<br />**Although this parameter is optional, if you set billing / shipping fields as required, you must also provide the billing / shipping parameters.** |
| `IsShippingAddressRequired`<br />Boolean<font color="#42cbd4">
Optional</font>                          | Specifies if the user is required to add their shipping information.                                                                                                                                                               |
| `ShippingAddressParameters`<br />JudoBillingAddressParameters<font color="#42cbd4">
Optional</font>     | Describes the allowed country codes and phone number requirements.<br />**Although this parameter is optional, if you set billing / shipping fields as required, you must also provide the billing / shipping parameters**.        |

***

**Displaying Google Pay™ as a Payment Method**

To display Google Pay™ in the Payments Widget:

Add the **googlePayConfiguration&#x20;**&#x70;roperty to the **JudoConfiguration&#x20;**&#x69;nstance:

:::BlockQuote
const configuration: JudoConfiguration = \{&#x20;
judoId: 'my-judo-id',&#x20;
amount: amount,&#x20;
reference: reference,&#x20;
googlePayConfiguration: googlePayConfiguration,
}
:::

Invoke the GooglePay method and handle the response:

:::BlockQuote
judo.invokeGooglePay(JudoTransactionMode.Payment, configuration)&#x20;
.then((response) => \{/\* Handle response \*/})
:::

:::hint{type="info"}
Use the **JudoTransactionMode&#x20;**&#x70;roperty for Payments or PreAuths with Google Pay.
:::

***

**Making a Google Pay™ Transaction**

Example of a Google Pay™ transaction:

:::BlockQuote
import \{ ..., JudoTransactionMode, ... } from 'judokit-react-native'&#x20;

judo.invokeGooglePay(JudoTransactionMode.Payment, configuration)&#x20;
.then((response) => \{/\* Handle response \*/})&#x20;
.catch((error) => \{/\* Handle error \*/})
:::

&#x20;
::::