React Native

Prerequisites

  • You have set up your Judopay account.

  • You have the development environment set up for React Native, here.

  • Judopay's React Native SDK requires React Native Version 0.61.5 (and higher).

 

Integrating with Judopay

For Mobile apps it is recommended not to make a transaction from the app, as the Token and Secret could become compromised.
Use the server to make the transaction.
We recommend using payment session authentication.

 

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

Judopay's React Native examples use TypeScript, however you can also use JavaScript.

 

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:

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

 

To initialise the Judopay React Native SDK:

  1. Import the JudoPay class from the judo-react-native package: import JudoPay from 'judo-react-native'`

  1. 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, or by making a call to our Transaction API.

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

 

Making a Transaction

The method for making a transaction and configuring the flow:
async invokeTransaction(
    type: JudoTransactionType,
    configuration: JudoConfiguration
): Promise<JudoResponse>

 

Parameter

Description

type

JudoTransactionType

An enum value that describes the transaction type.

configuration

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:

import JudoPay, {JudoAuthorization, JudoReference, JudoAmount, JudoConfiguration, JudoTransactionType} from 'judo-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 access cardTokens stored securely by the Mobile SDK, to then use the cardToken to make a server-to-server transaction using our Server SDKs, or our Transaction API.

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

 

To specify a server to server transaction:

Set the JudoTransactionMode to ServerToServer when calling the Judo methods:

judo.invokePaymentMethodScreen(JudoTransactionMode.ServerToServer, configuration)
  .then((response) => {/* Handle response */})
  .catch((error) => {/* Handle error */})

 

To specify an Apple Pay™ server to server transaction:

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

 

To specify a Google Pay™ server to server transaction:

judo.invokeGooglePay(JudoTransactionMode.ServerToServer, configuration)
  .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 preauth tokenpayment:

  1. Use the /savecard endpoint to return a card token.

    For details on endpoints, see Transaction API Reference.

The method signature is as follows:

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

 

Parameter

Description

mode

JudoTransactionMode

A value used to specify either a pre-auth or payment.

configuration

JudoConfiguration

An object used to configure the payment flow.

cardToken

string

The card token used for the token transaction.

securityCode

String

The saved card token security code.
cardholderName

String

The saved card token cardholder name.
cardScheme

String

The saved card token scheme name, for example:

  • Visa

  • Mastercard

  • Amex

The result is a JudoResponse object containing the transaction details:
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

3D Secure 2 is available in Judokit React Native version 3.0.0 or higher, and is available on Github.

 

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

 

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',
  line3: 'My area',
  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

 

 

Adding Payment Methods

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

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.