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

 

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 the judo-react-native package:

import JudoPay, {
      JudoConfiguration,
      JudoAmount,
      JudoReference
    } 
from 'judo-react-native'

 

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 object:
const uiConfiguration: JudoUIConfiguration = {
    isAVSEnabled: false,
    shouldPaymentMethodsVerifySecurityCode: true,
    shouldPaymentButtonDisplayAmount: true,
    shouldPaymentMethodsDisplayAmount: true,
    shouldAskForBillingInformation: true,
    theme: theme,
}
const configuration: JudoConfiguration = {
...
uiConfiguration: uiConfiguration,
...

 

Parameter

Description

isAVSEnabled

Boolean

Required

Enable | disable the Address Verification Service when making card transactions.

Default = False

shouldPaymentMethodsVerifySecurityCode

Boolean

Required

Enable | disable the merchant entering the CV2 code for every Token Payment | PreAuth transaction in the Payment Method Selection screen.

Default = True

shouldPaymentButtonDisplayAmount

Boolean

Required

Show | hide the transaction amount on the Payment | PreAuth button.

Default = False

shouldPaymentMethodsDisplayAmount

Boolean

Required

Show | hide the transaction amount from the Payments Widget.

Default = True

shouldAskForBillingInformation

Boolean

Optional

Show | hide the billing information screen.

Default = False

theme

Object

Optional

Customise various elements of the payment screen.

For example:

  • bodyFont

  • bodySize

  • buttonColor

  • buttonTitleColor

 

Transaction Reference

Setting up the transaction reference enables you to also set up your consumerReference and paymentReference which are included within the transaction.

These references help you to identify your consumer and transaction.

 

To set up the transaction reference:

  1. From the imported JudoReference interface:

interface JudoReference {
    consumerReference: string,
    paymentReference?: string,
    metadata?: Record<string, string>,
}

  1. Use the interface to set your consumerReference.

    1. A unique reference to identify your consumer.

  1. You can also set optional fields, for example:

    1. paymentReference:

      A unique payment reference for the transaction.

    2. metaData:

      Any additional organisation or system details

      to be included in the transaction.

For example a consumerReference is set:
const reference: JudoReference = {
  consumerReference: 'my-consumer-reference'
}

For the purpose of this exercise, the:

  • amount

  • reference

  • judoID

are set in the JudoConfiguration instance:

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

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

A complete JudoConfiguration example:
import { JudoAmount, JudoReference, JudoConfiguration } from 'judo-react-native'

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

 

Transaction Amount

To set up the transaction amount:

  1. From the imported JudoAmount interface:

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

  1. Create a new variable that implements the JudoAmount interface

  2. Add the variable to the configuration object:

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

 

 

To set the primary account details when using an alternative payment method, see Adding Payment Methods:.

Primary Account Details

It is mandatory for merchants who have an MCC code of 6012 to submit additional Information about the primary account holder in primaryAccountDetails property for payment pre-authorisation.

An example of the JudoAccountDetails interface:
interface JudoAccountDetails {
    name?: string,
    accountNumber?: string,
    dateOfBirth?: string,
    postCode?: string,
}

 

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

const myAccountDetails: JudoAccountDetails = {
  accountNumber: '4015434234',
  name: 'test-account-name',
}

const configuration: JudoConfiguration = {
  ...
  primaryAccountDetails: myAccountDetails,
  ...
}

 

The above properties are optional, so set only the ones you need.

 

Supported Card Networks

To change the default supported card networks:

 

  1. Set your own supportedCardNetworks value.

An example of the JudoCardNetwork:
enum JudoCardNetwork {
    Visa = 1 << 0,
    Mastercard = 1 << 1,
    Maestro = 1 << 2,
    Amex = 1 << 3,
    ChinaUnionPay = 1 << 4,
    JCB = 1 << 5,
    Discover = 1 << 6,
    DinersClub = 1 << 7,
    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 card networks to be supported, instead of using the | operator to combine all the card networks, set:

const cardNetworks = JudoCardNetwork.All

 

 

To set the card address when using an alternative payment method, see Adding Payment Methods:

Card Address

To send additional card address details with the transaction:

  1. Set the cardAddress parameter in the JudoConfiguration object:

const myCardAddress: JudoAddress = {
  line1: 'My Example Street 42',
  postCode: 'EX4 MPL3',
  town: 'Example Town',
  countryCode: 832,
}

const configuration: JudoConfiguration = {
  ...
  cardAddress: myCardAddress
  ...
}

 

Default Payment Methods

By default, all payment 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:
enum JudoPaymentMethod {
    Card = 1 << 0,
    ApplePay = 1 << 1,
    GooglePay = 1 << 2,
    iDEAL = 1 << 3,
    PayByBankApp = 1 << 4,
    All = 1 << 5,
}

 

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

 

  1. To explicitly state all payment methods are to be displayed, instead of using the | operator to combine all the payment methods, set: const myPaymentMethods = JudoPaymentMethod.All

 

 

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

Please note this will only apply styles and themes to the iOS platform.

 

Custom Fonts

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

 

An example of a complete custom theme:
const myTheme: JudoTheme = {
  largeTitleFont: 'Avenir',
  largeTitleSize: 20,
  buttonColor: '#FFFFFF',
  buttonCornerRadius: 4.0,
  backButtonImage: 'my-custom-icon-filename'
}

const uiConfiguration: JudoUIConfiguration {
  ...,
  theme: myTheme,
  ...,
}

const configuration: JudoConfiguration = {
  ...,
  uiConfiguration: uiConfiguration,
  …
}

  

To set up the Payments Widget for React Native:

  1. Set up the JudoConfiguration instance:

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

 

 

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.

 

Configuring Apple Pay™ for React Native

 

Step One: Configure Apple Pay™:

Create an applePayConfiguration instance:
const applePayConfiguration: JudoApplePayConfiguration = {
    merchantId: 'my-merchant-id',
    countryCode: 'GB',
    paymentSummaryItems: [item],
    requiredBillingContactFields: JudoContactField.Name | JudoContactField.Email,
    requiredShippingContactFields: JudoContactField.All,
    shippingMethods: [delivery],
    shippingType: JudoShippingType.Delivery,
    returnedInfo: JudoReturnedInfo.All,
}

 

Parameter

Description

merchantId

String

Required

Your merchant ID that identifies you to Apple Pay™ as being able to accept payments.

countryCode

String

Required

An ISO 3166-1 Alpha-2 country code.

paymentSummaryItems

JudoPaymentSummaryItem[]

Required

A list of payment summary items that represent the item names | prices | types.

requiredBillingContactFields

JudoContactField

Optional

Select between one or more billing contact fields.

For example:

  • Email

  • Phone

  • Name

requiredShippingContactFields

JudoContactField

Optional

Select between one or more shipping contact fields.

For example:

  • Email

  • Phone

  • Name

shippingMethods

JudoShippingMethod[]

Optional

Describe some of the shipping methods that you provide.

Although this parameter is optional, if you set shipping contact fields as required, you must also provide the shipping type and shipping methods.

shippingType

JudoShippingType

Optional

Select a shipping type:

  • Delivery

  • Shipping

  • Store Pickup

  • Service Pickup

Although this parameter is optional, if you set shipping contact fields as required, you must also provide the shipping type and shipping methods.

returnedInfo

JudoReturnedInfo

Optional

Select to receive some of the billing and/or shipping details as a response property.

 

Step Two: Check Availability and Make an Apple Pay™ transaction:

  async displayApplePaySheet() {
    try {
      const judo = new JudoPay(this.getAuthorization())
      const config = this.state.configuration
      const isApplePayAvailable = await judo.isApplePayAvailableWithConfiguration(config)

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

 

Displaying Apple Pay™ as a Payment Method

 

To display Apple Pay™ in the Payments Widget:

  1. Add the applePayConfiguration property to the JudoConfiguration instance:

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

  1. Call the ApplePay method and handle the response:

import { ..., JudoTransactionMode, ... } from 'judo-react-native'

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

 

Use the JudoTransactionMode property for Payments or PreAuths with Apple Pay.

 

Making an Apple Pay™ Transaction

 

An example of an Apple Pay™ transaction:
import { ..., JudoTransactionMode, ... } from 'judo-react-native'

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

 

The last item in the JudoPaymentSummaryItem list must always represent the total amount of the previous items.

 

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:

  1. Provide a JudoGooglePayConfiguration property.

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,
}

const googlePayConfiguration: JudoGooglePayConfiguration = { 
    countryCode: 'GB', 
    environment: JudoGooglePayEnvironment.TEST, 
    isEmailRequired: true, 
    isBillingAddressRequired: true, 
    billingAddressParameters: billingParameters, 
    isShippingAddressRequired: true, 
    shippingAddressParameters: 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

  • 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

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.

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,
}

  1. Invoke the GooglePay method and handle the response:

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

 

Use the JudoTransactionModeproperty for Payments or PreAuths with Google Pay.

 

Making a Google Pay™ Transaction

 

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 */})

 

 

Displaying PayByBankApp as a Payment Method

 

To display the PayByBankApp as a Payment Method for ReactNative:

  1. Create a JudoPBBAConfiguration:

export interface JudoPBBAConfiguration {
  mobileNumber?: string
  emailAddress?: string
  appearsOnStatement?: string
  deeplinkScheme?: string
  deeplinkURL?: string
}

 

Parameter

Description

mobileNumber

String

Consumer's mobile number.

Sent with the transaction as an additional parameter.

emailAddress

String

Consumer's email address.

Sent with the transaction as an additional parameter.

appearsOnStatement

String

Sent with the transaction as an additional parameter.

deeplinkScheme

String

Used in the deeplinking process to identify your app.

deeplinkURL

String

Specifies the app has opened as result of a redirect from the Bank App.

The deeplink URL contains the information needed to start polling the transaction status.

  1. With the JudoPBBAConfiguration set, pass it to the main JudoConfiguration:

const pbbaConfig: JudoPBBAConfiguration = {
    mobileNumber: "myMobileNumber",
    emailAddress: "myEmailAddress",
    appearsOnStatement: "myStatement",
    deeplinkScheme: 'my://app'
}
const config: JudoConfiguration = {
    ...
    pbbaConfiguration: pbbaConfig
    ...
}

  1. Call the invokePayByBankApp method

  2. Handle the response:

try {
    const judo = new JudoPay(token, secret)
    const response = await judo.invokePayByBankApp(config)
    // Handle response
} catch (exception) {
    // Handle exception
}

 

DeepLink Scheme

When the consumer invokes the PaybyBankApp transaction, in order to complete the transaction, the app redirects to the user's bank app. When the interaction is finished, the bank app redirects back to your app via the deeplinkScheme sending a deeplinkURL.

The deeplink scheme has to be set manually for iOS and Android, via the Info.plist (iOS) and the AndroidManifest.xml (Android).
For more details, see the PayByBankApp sections for iOS and Android.

 

The deeplinkURL can be used to start polling the transaction status. The deeplink events can be captured with the linking package already built in ReactNative.

Check the ReactNative sample app for the implementation reference.

Once you have captured the deeplinkURL, pass it to the deeplinkURL parameter of the JudoPBBAConfiguration. If this parameter is set once the invokePayByBankApp is called, the polling process should automatically start.

 

 

Not using the Mobile SDK Payments Widget?

 

To Integrate directly to your app:

  1. Instead of calling invokePayByBankApp:

    • Add the branded PaybyBankApp button

    • Add the method as a button press action

    • Expose the PaybyBankApp button as follows:

import { JudoPBBAButton } from 'judo-react-native'

<TouchableOpacity onPress={this.invokePayByBankApp}>
    <JudoPBBAButton style={{ flex: 1 }} />
</TouchableOpacity>

 

Although, the JudoPBBAButton is referred to as a button, it does not handle button-related events, such as onPress.
The JudoPBBAButton will need to be wrapped in a component that handles touch events, for example the TouchableOpacity component.

 

Displaying iDEAL as a Payment Method

 

To add iDEAL support to your Payments Widget:

  1. Set the currency code to EUR (Euro)

  2. Set the judoId

  3. Include iDEAL as a payment method

An example of a valid iDEAL configuration:
const configuration: JudoConfiguration = { 
    ...
    judoId: 'myJudoId',
    paymentMethods: JudoPaymentMethod.iDEAL
    ...
}

const response = await judo.invokePaymentMethodScreen(
    mode,
    configuration,
)

 

Once the currency and judoId are set, iDEAL will be available as a payment method in the Payments Widget.