Menu

Apple Pay Plugin (iOS only)

This plugin provides an interface to the native Apple Pay API.

The high level flow of Apple Pay is the following:

  1. Create a payment request, and call startPayment
  2. Handle shipping address, and shipping method events (setOnDidSelectShippingAddress, setOnDidSelectShippingMethod)
  3. If the user authorizes the payment, handle the final payment process (setOnDidAuthorizePayment)

Notes

Sample Usage

const applePayPlugin = await ApplePayPlugin.init()

const supportedNetworks = [ApplePayPlugin.supportedNetworkAmEx,
                            ApplePayPlugin.supportedNetworkVisa,
                            ApplePayPlugin.supportedNetworkMasterCard]

webView.on('navigationCompleted', () => {
    availability = await applePayPlugin.getAvailability(supportedNetworks)
    mainNavigationView.trigger('setupApplePayButton', availability)
})

mainNavigationView.on('apple-pay-button-pressed', (params) => {
    const availability = await applePayPlugin.getAvailability(supportedNetworks)
    if (availability === 'ready') {
        const paymentSummaryItems = [
            ApplePayPlugin.makePaymentItem('SUBTOTAL', 5000),
            ApplePayPlugin.makePaymentItem('SHIPPING', 101),
            ApplePayPlugin.makePaymentItem('TAXES', 433),
            ApplePayPlugin.makePaymentItem('ASTRO TEAM', 5534)
        ]

        const shippingMethods = [
            ApplePayPlugin.makeShippingMethod('DEFAULT SHIPPING', 101, 'default'),
            ApplePayPlugin.makeShippingMethod('PREMIUM SHIPPING', 501, 'premium', 'Premium')
        ]

        const paymentRequest = {}
        paymentRequest[ApplePayPlugin.merchantIdentifier] = 'merchant.com.businessname'
        paymentRequest[ApplePayPlugin.paymentSummaryItems] = paymentSummaryItems
        paymentRequest[ApplePayPlugin.countryCode] = 'US'
        paymentRequest[ApplePayPlugin.currencyCode] = 'USD'
        paymentRequest[ApplePayPlugin.shippingMethods] = shippingMethods
        paymentRequest[ApplePayPlugin.supportedNetworks] = supportedNetworks
        paymentRequest[ApplePayPlugin.merchantCapabilities] = [ApplePayPlugin.merchantCapability3DS,
                                                                ApplePayPlugin.merchantCapabilityEMV]

        // You can set ApplePayPlugin.requiredBillingAddressFields here, but as of iOS 9.1 the simulator will crash when you try to complete the payment
        paymentRequest[ApplePayPlugin.requiredShippingAddressFields] = [ApplePayPlugin.requiredAddressFieldsPostalAddress,
                                                                        ApplePayPlugin.requiredAddressFieldsPhone]

        applePayPlugin.startPayment(paymentRequest)
    } else if (availability === 'can_set_up') {
        applePayPlugin.setUpApplePay();
    }
})

applePayPlugin.setOnDidSelectShippingAddress((address) => {
    const paymentSummaryItems = [
        ApplePayPlugin.makePaymentItem('SUBTOTAL', 5000),
        ApplePayPlugin.makePaymentItem('SHIPPING', 101),
        ApplePayPlugin.makePaymentItem('TAXES', 433),
        ApplePayPlugin.makePaymentItem('BUSINESS NAME', 5534)
    ]
    const shippingMethods = [
        ApplePayPlugin.makeShippingMethod('DEFAULT SHIPPING', 500, 'default'),
        ApplePayPlugin.makeShippingMethod('PREMIUM SHIPPING', 600, 'premium', 'Premium')
    ]

    return new Promise(function(resolve, reject) {
        const xhr = new XMLHttpRequest()

        // In practice you would POST the address
        xhr.open('GET', 'https://httpbin.org/get')
        xhr.onload = function() {
            // And parse the response
            const response = JSON.parse(this.responseText)

            if (this.status !== 200) {
                reject(ApplePayPlugin.statusInvalidShippingPostalAddress)
                return
            }

            const authorizationStatus = ApplePayPlugin.statusSuccess
            resolve(authorizationStatus)
        }
        xhr.send()
    }).then(function(authorizationStatus) {
        return {
            authorizationStatus: authorizationStatus,
            shippingMethods: shippingMethods,
            paymentSummaryItems: paymentSummaryItems
        };
    }).catch(function(error) {
        return {
            authorizationStatus: ApplePayPlugin.statusFailure,
            shippingMethods: [],
            paymentSummaryItems: []
        };
    });
});

applePayPlugin.setOnDidAuthorizePayment((payment) => {
    return ApplePayPlugin.statusSuccess
})

applePayPlugin.setOnDidSelectShippingMethod((shippingMethod) => {
    const paymentSummaryItems = [
        ApplePayPlugin.makePaymentItem('Shipping', 50000)
    ]
    return {
        authorizationStatus: ApplePayPlugin.statusSuccess,
        paymentSummaryItems: paymentSummaryItems
    }
})

applePayPlugin.onPaymentAuthorizationDidFinish(() => {
    console.log('Payment is finished')
})

Methods

ApplePayPlugin.init() #

Creates and returns an instance of the Apple Pay plugin that is used to make subsequent method calls.

getAvailability(networks) → {availability} #

Get the availability of Apple Pay on this device, based on the supported networks passed in. Will return:

Note: There is a case where Apple Pay is supported by a device, but there is no card set up yet, and it doesn't support the "Set Up Apple Pay" functionality (< iOS 8.3) in which case this function will return 'unavailable'.

setUpApplePay() #

Requests iOS to send the user to their Wallet App, to initiate setup of a payment card in Apple Pay. This will end up switching the active app on the device to the Apple Wallet app. This is only available on iOS 8.3 and later. Note: as of iOS 9.1 this does not work in the simulator.

ApplePayPlugin.makePaymentItem(label, amount) #

Returns an object with ApplePayPlugin.paymentItemLabel and ApplePayPlugin.paymentItemAmount set with the incoming parameters.

ApplePayPlugin.makeShippingMethod(label, amount, identifier, detail) #

Returns an object with ApplePayPlugin.shippingMethodLabel,
ApplePayPlugin.shippingMethodAmount, ApplePayPlugin.shippingMethodIdentifier, and ApplePayPlugin.shippingMethodDetail set with the incoming parameters.

startPayment(paymentRequest) #

Starts a payment request based on the incoming parameter, which will trigger the Apple Pay pay sheet to appear.

const paymentRequest = {};
paymentRequest[ApplePayPlugin.merchantIdentifier] = /*Your merchant id, see Apple docs (String)*/
paymentRequest[ApplePayPlugin.paymentSummaryItems] = /*An array of payment summary item objects, (Minimum of 1 entry)*/
paymentRequest[ApplePayPlugin.countryCode] = /*The ISO code for the user's country (String)*/
paymentRequest[ApplePayPlugin.currencyCode] = /*The ISO code for the user's currency (String)*/
paymentRequest[ApplePayPlugin.shippingMethods] = /* An array of shipping method objects (Optional)*/
paymentRequest[ApplePayPlugin.supportedNetworks] = /* An array of supported network (Strings)*/
paymentRequest[ApplePayPlugin.merchantCapabilities] = /* An array of merchant capabilities (Strings)*/
paymentRequest[ApplePayPlugin.requiredBillingAddressFields] = /*An array of required address field types (Strings), (Optional)*/
paymentRequest[ApplePayPlugin.requiredShippingAddressFields] = /*An array of required address field types (Strings), (Optional)*/

Events

setOnDidAuthorizePayment(callback) → {payment} → authorizationStatus #

Pass a function to be called when didAuthorizePayment occurs. Must return a valid authorization status (see ApplePayPlugin.status*), can also return a promise that eventually returns a valid authorization status. You must implement this callback prior to calling startPayment.

payment structure:

Sample usage:

applePayPlugin.setOnDidAuthorizePayment((payment) => {
    return ApplePayPlugin.statusSuccess
})

setOnDidSelectShippingAddress(callback) → {address} → {authorizationStatus, shippingMethods, paymentSummaryItems} #

Pass a function to be called when didSelectShippingAddress occurs. Must return a valid authorization status (see ApplePayPlugin.status*), array of shipping methods, and array of paymentSummaryItems. Can also return a promise that resolves those return types. If your use case supports shipping addresses, you must implement this callback prior to calling startPayment.

address structure:

Sample usage:

applePayPlugin.setOnDidSelectShippingAddress((address) => {
    // Determine what the updated values should be
    const paymentSummaryItems = [
        ApplePayPlugin.makePaymentItem('SUBTOTAL', 5000),
        ApplePayPlugin.makePaymentItem('SHIPPING', 101),
        ApplePayPlugin.makePaymentItem('TAXES', 433),
        ApplePayPlugin.makePaymentItem('ASTRO TEAM', 5534)
    ]
    const shippingMethods = [
        ApplePayPlugin.makeShippingMethod('DEFAULT SHIPPING', 500, 'default'),
        ApplePayPlugin.makeShippingMethod('PREMIUM SHIPPING', 600, 'premium', 'Premium')
    ]

    const authorizationStatus = ApplePayPlugin.statusSuccess

    return {
        authorizationStatus: authorizationStatus,
        shippingMethods: shippingMethods,
        paymentSummaryItems: paymentSummaryItems
    }
})

setOnDidSelectShippingMethod(callback) → {shippingMethod} → {authorizationStatus, paymentSummaryItems} #

Pass a function to be called when didSelectShippingMethod occurs. Must return a valid authorization status (see ApplePayPlugin.status*) and array of paymentSummaryItems. Can also return a promise that resolves those return types. If your use case supports shipping methods, you must implement this callback prior to calling startPayment.

shippingMethod structure:

Sample usage:

applePayPlugin.setOnDidSelectShippingMethod((shippingMethod) => {
    const paymentSummaryItems = [
        ApplePayPlugin.makePaymentItem('Shipping', 5000)
    ]
    return {
        authorizationStatus: ApplePayPlugin.statusSuccess,
        paymentSummaryItems: paymentSummaryItems
    }
})

onPaymentAuthorizationDidFinish(callback) #

Pass a function to be called when paymentAuthorizationViewControllerDidFinish occurs.

Sample usage:

applePayPlugin.onPaymentAuthorizationDidFinish(() => {
    // Check if a payment happened, and go to the confirmation page if one did.
})