Mobile
Mobile SDKs

React Native

Integrating React Native with Judopay

Prerequisites

  • You have set up your Judopay account.
    • Sign up for your 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.
  • You have the development environment set up for React Native, here.
  • Judopay's React Native SDK requires React Native Version 0.69.7 (and higher).

For Mobile apps, 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.



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:

{ "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, or by making a call to our Transaction API. 
  3. Set the SDK in sandbox mode: `judoPay.isSandboxed = true`


Making a Transaction

The method for making a transaction and configuring the flow:

Making a Transaction


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:

Transaction Example



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 SDK Integration, 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.

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

Specify an Apple Pay™ Server to Server Transaction

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

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 pre-auth token payment:

  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:

Response Example



3D Secure 2 for React Native

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

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

3D Secure 2 Payment Example



Customising the Payment Experience

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. Android:
      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:

Android
iOS
  1. Identify the SDK String Keys. The SDK uses string resources defined in its strings.xml file. 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. You will find this located in the "res/values directory". This will override the SDK value of this string.

If your app supports multiple languages, ensure you add translations for the overridden string in the appropriate values <language_code> folders. For example values-fr for French or values-es for Spanish.



To add a new language

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

Android
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 "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 String Keys used by the SDK, otherwise the translation may end up incomplete.

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

Android SDK String Keys
iOS SDK String Keys
<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>


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.