React Native

Prerequisites

  • You have set up your Judopay account.

  • You have the latest version of the Android SDK. For more details, see Integrating Android
  • You have the latest version of the iOS SDK. For more details, see Integrating iOS

 

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.
Create a Register Card app and enable the Register Card Transactions permission.

 

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

 

To install the Judopay SDK into your app:

  1. Enter the following line into the terminal: npm install judo-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": "^2.1.0",
   ...
       },
  "devDependencies": {
    ...
  }
}

 

To run the Judopay React Native SDK:

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

  2. Provide your token and secret: const judoPay = new JudoPay('my-token', 'my-secret')

  3. 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

An instance that configures the payment flow.

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

 

To make a transaction:

import { ..., JudoPay, JudoTransactionType, ... } from 'judo-react-native'
    const judo = new JudoPay('token', 'secret')
        judo.isSandboxed = true
    judo.invokeTransaction(JudoTransactionType.Payment, configuration)
        .then((response) => {/* Handle response */})
        .catch((error) => {/* Handle error */})

 

React Native Server to Server Transactions

To specify a server to server transaction:

  1. 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,
token: string
): Promise<JudoResponse>

 

Parameter

Description

mode

JudoTransactionMode

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

configuration

JudoConfiguration

An object used to configure the payment flow.

Also used to customise the user experience.

token

string

Describes the card token used for the token transaction.

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,
        'myCardToken',
        )
// Handle response
    } catch (exception) {
// Handle exception
}
 

 

Customising the Payment Experience

 

Adding Payment Methods

Before you can process Apple Pay™ payments with Judopay, you will need to set up Apple Pay™.