A plugin that allows you to offer Apple Pay in your iOS apps.
ns plugin add @nativescript/apple-pay
For Apple Pay to work in your iOS application, you need to complete the following steps. These steps are also outlined in the Apple PassKit documentation.
A Merchant ID is an identifier you register with Apple that uniquely identifies your business as a merchant able to accept payments. This ID never expires and can be used on multiple websites and iOS apps. See Create a merchant identifier for the setup steps.
The certificate is associated with your merchant ID and used to secure transaction data. Apple Pay servers use the certificate’s public key to encrypt payment data. You (or your payment service provider) use the private key to decrypt the data to process payments. See Create a payment processing certificate for the setup steps.
Follow the steps Enable Apple Pay.
For a video showing the configuration steps, see: Configuring Your Developer Account for Apple Pay.
Once that configuration is done for your Apple developer account, you will be able to use the PassKit framework for Apple Pay inside your iOS application.
To implement Apple Pay in your app, follow the following steps:
<ios>
<ApplePayBtn tap="{{ onApplePayTap }}" buttonType="InStore" />
</ios>
tap
eventexport class ApplePayViewModel extends Observable {
constructor() {
super()
}
onApplePayTap() {}
}
In the tap event's callback function(onApplePayTap
in this exampl), do the following:
isApplePaySupported()
import { isApplePaySupported } from '@nativescript/apple-pay'
if (isApplePaySupported()) {
}
DidAuthorizePaymentHandler
(and AuthorizationDidFinish
) eventapplePayBtn.once(
ApplePayEvents.DidAuthorizePaymentHandler,
async (args: AuthorizePaymentEventData) => {
// 1. Send the user payment data to your payments services provider(PSP)
// 2. Use the response from the PSP to further process your transation, or
// close the payment sheet
}
)
DidAuthorizePaymentHandler
event is emitted when a user authorizes the app to make payments with their payment data.createPaymentRequest()
method on the ApplePayBtn
instance passing it an ApplePayRequest object.const request = {
paymentItems,
merchantId: <Your_Apple_Pay_Merchant_ID>, // the merchant ID for this app
merchantCapabilities: ApplePayMerchantCapability.ThreeDS,
countryCode: 'US',
currencyCode: 'USD',
shippingContactFields: [ApplePayContactFields.Name, ApplePayContactFields.PostalAddress],
billingContactFields: [ApplePayContactFields.Name, ApplePayContactFields.PostalAddress],
supportedNetworks: [ApplePayNetworks.Amex, ApplePayNetworks.Visa, ApplePayNetworks.Discover, ApplePayNetworks.MasterCard],
} as ApplePayRequest;
await applePayBtn.createPaymentRequest(request).catch((err) => {
console.log('Apple Pay Error', err);
});
Find the complete code here.
The view to initiate and complete payments with Apple Pay.
Method | Description |
---|---|
createPaymentRequest(request: ApplePayRequest) | Creates the Apple Pay payment request and presents the user with the payment sheet. |
Key | Description |
---|---|
DidAuthorizePaymentHandler | Tells the delegate that the user has authorized the payment request and asks for a result. For the event data, see AuthorizePaymentEventData |
AuthorizationDidFinish | Tells the delegate that payment authorization has completed. For the event data, AuthorizationDidFinishEventData |
Key | Description |
---|---|
EmailAddress | Indicates an email address field. |
Name | Indicates a name field. |
PhoneNumber | Indicates a phone number field. |
PhoneticName | Indicates a phonetic name field. |
PostalAddress | Indicates a postal address field. |
Key |
---|
Amex |
CarteBancaire |
CarteBancaires |
ChinaUnionPay |
Discover |
Eftpos |
Electron |
Elo |
IDCredit |
Interac |
Jcb |
Mada |
Maestro |
MasterCard |
PrivateLabel |
QuicPay |
Suica |
Visa |
VPay |
Key | Value |
---|---|
ThreeDS | PKMerchantCapability.Capability3DS |
EMV | PKMerchantCapability.CapabilityEMV |
Credit | PKMerchantCapability.CapabilityCredit |
Debit | PKMerchantCapability.CapabilityDebit |
Key | Value |
---|---|
Success | PKPaymentAuthorizationStatus.Success |
Failure | PKPaymentAuthorizationStatus.Failure |
InvalidBillingPostalAddress | PKPaymentAuthorizationStatus.InvalidBillingPostalAddress |
InvalidShippingPostalAddress | PKPaymentAuthorizationStatus.InvalidShippingPostalAddress |
InvalidShippingContact | PKPaymentAuthorizationStatus.InvalidShippingContact |
PINRequired | PKPaymentAuthorizationStatus.PINRequired |
PINIncorrect | PKPaymentAuthorizationStatus.PINIncorrect |
PINLockout | PKPaymentAuthorizationStatus.PINLockout, |
Key | Value |
---|---|
Final | PKPaymentSummaryItemType.Final |
Pending | PKPaymentSummaryItemType.Pending |
Key | Value |
---|---|
Plain | PKPaymentButtonType.Plain |
Buy | PKPaymentButtonType.Buy |
Book | PKPaymentButtonType.Book |
Checkout | PKPaymentButtonType.Checkout |
Donate | PKPaymentButtonType.Donate |
InStore | PKPaymentButtonType.Book |
Subscribe | PKPaymentButtonType.Subscribe |
Key | Value |
---|---|
White | PKPaymentButtonStyle.White |
WhiteOutline | PKPaymentButtonStyle.WhiteOutline |
Black | PKPaymentButtonStyle.Black |
interface ApplePayRequest {
paymentItems: Array<ApplePayItems>
merchantId: string // the merchant ID for this app
merchantCapabilities: number
countryCode: string
currencyCode: string
supportedNetworks: Array<ApplePayNetworks>
billingContactFields?: Array<ApplePayContactFields>
shippingContactFields?: Array<ApplePayContactFields>
shippingMethods?: Array<ApplePayShippingMethods>
}
interface ApplePayItems {
label: string
amount: number
type: ApplePayPaymentItemType
}
The data returned by the DidAuthorizePaymentHandler
event.
interface AuthorizePaymentEventData extends EventData {
eventName: string
object: any
data?: {
payment: PKPayment
token: PKPaymentToken
paymentData: ApplePayPaymentData
billingAddress
billingContact: PKContact
shippingAddress
shippingContact: PKContact
shippingMethod: PKShippingMethod
}
completion: (status: ApplePayTransactionStatus) => void
}
The data returned by the AuthorizationDidFinish
event.
interface AuthorizationDidFinishEventData extends EventData {
eventName: string
object: any
}
interface ApplePayPaymentData {
/**
* Encrypted payment data.
*/
data
/**
* Additional version-dependent information used to decrypt and verify the payment.
*/
header
/**
* Signature of the payment and header data. The signature includes the signing certificate, its intermediate CA certificate, and information about the signing algorithm.
*/
signature
/**
* Version information about the payment token.
* The token uses EC_v1 for ECC-encrypted data, and RSA_v1 for RSA-encrypted data.
*/
version: string
}
Apache License Version 2.0