Apple Pay (capacitor-applepay)

This Apple Pay plugin provides interfaces that allow you to initiate an Apple Pay payment sheet based on provided PaymentRequest. When transaction is authorized, Payment response is returned along with payment details and more importantly- a payment token that you should pass to your backend.

Install

npm install capacitor-applepay
npx cap sync

Configuration

Before using this plugin, make sure that your project is correctly configured. Usually your Payment Services Processor will provide detailed instructions, so please read their docs first.

Apple Developer Portal:

• Add your Merchant identifier
• Contact with your PSP who will generate CSR that you should pass into Apple Pay Payment Processing Certificate
• Send the generated certificate to your PSP
• Edit your App Identifier, add Apple Pay Payment Processing capability, select previously created merchant ID.
• Renew your provisioning profiles

Xcode

• Add Apple Pay capability
• Select previously created merchant identifier
• Make sure you are using renewed provisioning profiles

API

• canMakePayments()
• canMakePayments(...)
• initiatePayment(...)
• completeLastPayment(...)
• Interfaces
• Type Aliases

canMakePayments()

canMakePayments() => Promise<CanMakePaymentsResponse>

Indicates whether the device supports Apple Pay.

Returns: Promise<CanMakePaymentsResponse>

---

canMakePayments(...)

canMakePayments(options: CanMakePaymentsRequest) => Promise<CanMakePaymentsResponse>

Indicates whether the device supports Apple Pay and whether the user has an active card. This allows more granular control than regular canMakePayments()

Param	Type	Description
options	CanMakePaymentsRequest	- Supported networks and capabilities

Returns: Promise<CanMakePaymentsResponse>

---

initiatePayment(...)

initiatePayment(request: InitiatePaymentRequest) => Promise<InitiatePaymentResponse>

Initiates a payment base on PaymentRequest object.

Param	Type	Description
request	InitiatePaymentRequest	- PaymentRequest object that will be used for the payment.

Returns: Promise<InitiatePaymentResponse>

---

completeLastPayment(...)

completeLastPayment(request: CompletePaymentRequest) => Promise<void>

Completes current payment

Param	Type	Description
request	CompletePaymentRequest	- CompletePaymentRequest object containing status

---

Interfaces

CanMakePaymentsResponse

Prop	Type
canMakePayments	boolean

CanMakePaymentsRequest

Prop	Type
networks	PaymentNetwork[]
capabilities	MerchantCapability[]

InitiatePaymentResponse

Prop	Type
token	{ paymentData?: string; transactionIdentifier: string; paymentMethod: { displayName?: string; secureElementPass?: { deviceAccountNumberSuffix: string; deviceAccountIdentifier: string; primaryAccountIdentifier: string; primaryAccountNumberSuffix: string; devicePassIdentifier?: string; pairedTerminalIdentifier?: string; }; }; }
billingContact	PaymentContact
shippingContact	PaymentContact

PaymentContact

Prop	Type
emailAddress	string
phoneNumber	string
name	PersonNameComponents
postalAddress	{ street?: string; city?: string; postalCode?: string; country?: string; isoCountryCode?: string; subAdministrativeArea?: string; subLocality?: string; }

PersonNameComponents

Prop	Type
familyName	string
givenName	string
namePrefix	string
middleName	string
nameSuffix	string
nickname	string

InitiatePaymentRequest

Prop	Type
merchantIdentifier	string
countryCode	string
currencyCode	string
supportedCountries	string[]
supportedNetworks	PaymentNetwork[]
summaryItems	PaymentSummaryItem[]
requiredShippingContactFields	ContactField[]
requiredBillingContactFields	ContactField[]
merchantCapabilities	MerchantCapability[]
billingContact	PaymentContact
shippingContact	PaymentContact

PaymentSummaryItem

Prop	Type
label	string
amount	string
type	PaymentSummaryItemType

CompletePaymentRequest

Prop	Type
status	PaymentCompletionStatus

Type Aliases

PaymentNetwork

'amex' | 'chinaUnionPay' | 'cartesBancaires' | 'discover' | 'eftpos' | 'electron' | 'idCredit' | 'interac' | 'JCB' | 'maestro' | 'masterCard' | 'privateLabel' | 'quicPay' | 'suica' | 'visa' | 'vPay'

MerchantCapability

'capability3DS' | 'capabilityCredit' | 'capabilityDebit' | 'capabilityEMV'

PaymentSummaryItemType

'pending' | 'final'

ContactField

'emailAddress' | 'name' | 'phoneNumber' | 'phoneticName' | 'postalAddress'

PaymentCompletionStatus

'success' | 'failure'