@fresha/capacitor-plugin-applepay

npm version

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 @fresha/capacitor-plugin-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() => 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
usingNetworks 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'

GitHub

View Github