Apple Pay & Native Pay Methods
In the React Native SDK, Apple Pay can be used to process payments with a smooth and native experience. Before displaying the Apple Pay sheet, it is essential to ensure that the device supports Apple Pay.
1. (Optional) Configure Billing Data Collection
You can configure the SDK to request billing data (e.g., email) during the Apple Pay flow.
await moneyHashSDK.setNativeApplePayConfig({
collectibleBillingData: ['email'], // Currently, only "email" is supported
});
- Pass an empty array (
[]
) to disable billing data collection.
2. Check Device Compatibility
Ensure Apple Pay is supported on the device before showing the sheet:
const isCompatible = await moneyHashSDK.isDeviceCompatibleWithApplePay();
if (isCompatible) {
// Proceed with Apple Pay
} else {
console.log("This device does not support Apple Pay");
}
Only supported on iOS. Calling this on other platforms will throw an error.
Apple Pay Payment Flow (Two-Step Approach)
Apple Pay now follows a modular flow:
- Generate the Apple Pay receipt using
generateApplePayReceipt
- Submit the receipt using
submitPaymentReceipt
after obtaining theintentId
Step 1: Generate Apple Pay Receipt
You can use the new generateApplePayReceipt(params)
method in two ways:
✅ Option A: Using ApplePayData
(from NativePay state)
ApplePayData
(from NativePay state)if (intentState.nativePayData) {
const applePayData = intentState.nativePayData as ApplePayData;
try {
const receipt = await moneyHashSDK.generateApplePayReceipt({
depositAmount: applePayData.amount || 0.0,
applePayData,
});
console.log("Apple Pay Receipt generated:", receipt);
// Store receipt to use later in step 2
} catch (error) {
console.error("Error generating Apple Pay receipt:", error.message);
}
}
✅ Option B: Using Explicit Parameters
try {
const receipt = await moneyHashSDK.generateApplePayReceipt({
depositAmount: 10.0,
merchantIdentifier: "merchant.com.example",
currencyCode: "USD",
countryCode: "US",
supportedNetworks: ["visa", "masterCard"],
merchantCapabilities: ["supports3DS"],
});
console.log("Apple Pay Receipt generated:", receipt);
} catch (error) {
console.error("Error generating Apple Pay receipt:", error.message);
}
The receipt is only valid for a short time. Make sure to submit it soon after generation.
Step 2: Submit the Payment Receipt
Once you have the intentId
(usually from your backend), submit the receipt to complete the payment:
try {
const intentId = "<intent_id>"; // Replace with your actual intent ID
const intentDetails = await moneyHashSDK.submitPaymentReceipt(
intentId,
receipt // From Step 1
);
console.log("Payment completed successfully:", intentDetails);
} catch (error) {
console.error("Error submitting payment receipt:", error.message);
}
Updated 6 days ago