Judopay Documentation

React Native

Configuring Google Pay™ for React Native

Prerequisite

To make a Google Pay™ transaction, or add Google Pay™ as a payment method in the Payment Method Selection screen, provide a JudoGooglePayConfiguration property.

Below is an example of a googlePayConfiguration property:

import {     
JudoGooglePayConfiguration,     
JudoGooglePayEnvironment,     
JudoAddressFormat,     
JudoBillingAddressParameters,     
JudoShippingAddressParameters 
} from 'judo-react-native' 
 
const billingParameters: JudoBillingAddressParameters = {     
addressFormat: JudoAddressFormat.MINIMAL,     
isPhoneNumberRequired: true, 
} 
 
const shippingParameters: JudoShippingAddressParameters = {    
allowedCountryCodes: ["GB", "US"],     
isPhoneNumberRequired: false, 
} 
 
export const googlePayConfiguration: JudoGooglePayConfiguration = {     
countryCode: 'GB',     
environment: JudoGooglePayEnvironment.TEST,     
isEmailRequired: true,     
isBillingAddressRequired: true,     
billingAddressParameters: billingParameters,     
isShippingAddressRequired: true,     
hippingAddressParameters: shippingParameters 
}

Parameter

Description

countryCode

String

Required

An ISO 3166-1 Alpha-2 country code.

environment

JudoGooglePayEnvironment

enum

Required

Sets the Google Pay™ environment to either:

  • TEST

  • PRODUCTION

    Note: In order to go-live you will need to have set up your Google Pay™ API merchant live account.

isEmailRequired

Boolean

Required

Specifies if the user is required to add their email address.

isBillingAddressRequired

Boolean

Required

Specifies if the user is required to add their billing information.

billingAddressParameters

JudoBillingAddressParameters

Optional

Describes the full or minimum:

  • billing requirements

  • phone number

Note: Although this parameter is optional, if you set billing/shipping fields as required, you must also provide the billing/shipping parameters.

isShippingAddressRequired

Boolean

Required

Specifies if the user is required to add their shipping information.

shippingAddressParameters

JudoBillingAddressParameters

Optional

Describes the allowed country codes and phone number requirements.

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

1. Add the googlePayConfiguration property to the JudoConfiguration instance:

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

2. Invoke the GooglePay method and handle the response:

judo.invokeGooglePay(JudoTransactionMode.Payment, configuration)
  .then((response) => {/* Handle response */})

Note

Use the JudoTransactionMode property instead of JudoTransactionType to limit the options to Payment or PreAuth.

This leaves JudoTransactionType to deal with Save Card | Register Card.

Making a Google Pay™ Transaction

An example of a Google Pay™ transaction:

import { ..., JudoTransactionMode, ... } from 'judo-react-native' 
 
judo.invokeGooglePay(JudoTransactionMode.Payment, configuration)   
.then((response) => {/* Handle response */})   
.catch((error) => {/* Handle error */})

Best Practice Testing

Caution

You can test Apple Pay™ in the sandbox environment with the sandbox cards, however please note these test transactions will not work going upstream.

To test Apple Pay™ transactions, point to the live environment and use live cards.

We recommend performing | Pre-Authorizations | Card Payments | Full Refunds: via the Judopay Dashboard > History, or via an API call.

We strongly recommend testing Apple Pay™ through each of these scenarios before you release the app:

  • Unsupported Device

    Use a non-supported device in order to verify the whole recognition workflow works as expected.

  • Card not Supported

    Use a card issued by a bank that does not support Apple Pay™. You can also use the test cards provided on the Judopay Dashboard to validate the error returned and expected behaviour.

  • Payment Cancelled

    Cancel a transaction in process and see the results in the app and in your Judopay Dashboard history.

  • Poor / Loss of Connection

    While a transaction is being processed, disconnect the internet connection to see if the app responds as expected.