npx expo install expo-tappay-apple-pay
- Please create a Tappay account and get the app ID from Tappay Dashboard.
- Create Merchant ID and Apple Pay Certificate from Apple Developer.
- Integrate your Merchant with Tappay Dashboard.
- Please add the following config in your app.json
{
"expo": {
"plugins": [
[
"expo-tappay-apple-pay", {
"merchantId": "YOUR_MERCHANT_ID", // replace with your Merchant ID
"acceptNetworks": [
"Visa",
"MasterCard",
], // optional, default is ["Visa", "MasterCard", "JCB"]
"appId": 11340, // replace with your Tappay App ID
"appKey": "app_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", // replace with your Tappay App Key
"serverType": "sandbox", // optional, default is "sandbox". "production" is also available
}
]
]
}
}
This method configures the Apple Pay merchant information necessary before initiating payments. This setup must be completed before any Apple Pay transaction can be processed.
Parameter | Type | Description |
---|---|---|
merchantName | string | Your merchant's display name that appears on the Apple Pay sheet |
merchantCapability | string | Payment capabilities supported (e.g., "debit", "credit", "emv", "3DS") |
merchantIdentifier | string | Your Apple Pay merchant identifier registered with Apple |
countryCode | string | Two-letter ISO country code (e.g., "TW" for Taiwan) |
currencyCode | string | Three-letter ISO currency code (e.g., "TWD" for New Taiwan Dollar) |
import ApplePay from "expo-tappay-apple-pay";
ApplePay.setupMerchant(
"YOUR_MERCHANT_NAME", // replace with your Merchant Name
"MERCHANT_CAPABILITY", // replace with your Merchant Capability
"YOUR_MERCHANT_ID", // replace with your Merchant ID
"TW", // replace with your Country Code
"TWD", // replace with your Currency Code
)
Checks if Apple Pay is available and properly configured on the device
import ApplePay from "expo-tappay-apple-pay";
ApplePay.isApplePayAvailable();
This method opens the Apple Pay setup screen.
import ApplePay from "expo-tappay-apple-pay";
ApplePay.showSetup();
After using addItemToCart(), call startApplePay() to initiate the Apple Pay payment flow.
Parameters:
Parameter | Type | Description |
---|---|---|
cart | CartItem[] | Array of cart items to be processed for payment |
import ApplePay from "expo-tappay-apple-pay";
ApplePay.startApplePay({
cart: cartItems
});
You must use showResult function to display the result in the user interface.
IMPORTANT: If showResult() is not called, the user interface will continue to show "Processing" and will not complete.
Transaction result status (true = success, false = failure)
import ApplePay from "expo-tappay-apple-pay";
ApplePay.showResult(boolean);
import ApplePay from "expo-tappay-apple-pay";
ApplePay.addReceivePrimeListener((event) => {
// Handle the result of getting the prime, check if it is successful or failed
});
import ApplePay from "expo-tappay-apple-pay";
ApplePay.addApplePayStartListener((payload) => {
// Apple Pay transaction started
});
import ApplePay from "expo-tappay-apple-pay";
ApplePay.addApplePayCancelListener((payload) => {
// Apple Pay transaction cancel
});
import ApplePay from "expo-tappay-apple-pay";
ApplePay.addApplePayFinishedListener((payload) => {
// Apple Pay transaction finished
});
import ApplePay from "expo-tappay-apple-pay";
ApplePay.addApplePaySuccessListener((payload) => {
// Apple Pay transaction successful
});
import ApplePay from "expo-tappay-apple-pay";
ApplePay.addApplePayFailedListener((payload) => {
// Apple Pay transaction failed
});
import ApplePay from "expo-tappay-apple-pay";
import { EventSubscription } from "expo-modules-core";
const subscription: EventSubscription = ApplePay.addReceivePrimeListener((event) => {});
subscription.remove();
Key | Value | Description |
---|---|---|
name | string |
Product name to display in Apple Pay sheet |
amount | number |
Product price in cents |
- OnSuccessReceivePrimeEvent
Key | Value | Description |
---|---|---|
success | true |
Indicates the payment was successful |
prime | string |
The payment token generated by Tappay |
expiryMillis | number |
The expiration time of the payment token in milliseconds |
totalAmount | number |
The total amount of the payment |
clientIP | string |
The client's IP address |
- OnFailureReceivePrimeEvent
Key | Value | Description |
---|---|---|
success | false |
Indicates the payment failed |
message | string |
Error message describing the failure |
Key | Value | Description |
---|---|---|
status | number |
The status code of the event |
message | string |
A message describing the event |
Property | Type | Description |
---|---|---|
status | number | Transaction status code |
amount | number | Transaction amount |
message | string | Transaction message |
description | string | Detailed transaction description |
- TPDirect: v2.17.0