Judopay Documentation

React Native

Configuring Apple Pay™ for React Native

Prerequisite

  • You have set up your Apple Pay™ Developer Account to get your Merchant IDs.

    For more details, see Create a Merchant ID.

To make an Apple Pay™ transaction, or to add Apple Pay™ as a payment method in the Payment Method Selection screen, create an applePayConfiguration instance:

 

Below is an example of an applePayConfiguration property:

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.

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

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

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

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

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

Caution

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