Apple Pay & Native Pay Methods
Apple Pay
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.
Check if the Device is Compatible
To verify if the device supports Apple Pay, you can call the isDeviceCompatibleWithApplePay
method. This ensures that you only attempt to display the Apple Pay sheet on supported devices.
const isCompatible = await moneyHashSDK.isDeviceCompatibleWithApplePay();
if (isCompatible) {
// Proceed with Apple Pay
} else {
// Handle case where the device is not compatible
console.log("This device does not support Apple Pay");
}
This feature is only supported on iOS devices. Calling this method on other platforms will throw an error.
Proceed with Apple Pay
Once you've confirmed that the device is compatible, you can proceed by displaying the Apple Pay sheet. Use the proceedWithApplePay
method to trigger the Apple Pay dialog, allowing the user to complete the payment.
Important: Make sure you have the required
merchantIdentifier
,currencyCode
, andcountryCode
to proceed with Apple Pay.
Retrieving Apple Pay Data from NativePay State
When handling an intent state, you may receive a NativePay
state that contains the necessary information to proceed with Apple Pay. The NativePay
state contains an instance of ApplePayData
, which provides the following properties:
- merchantId: The merchant identifier needed to process Apple Pay.
- countryCode: The country code for the payment.
- currencyCode: The currency code for the payment.
- amount: The total amount for the payment.
You can use this data when calling the proceedWithApplePay
method.
Example of Proceeding with Apple Pay:
if (intentState.nativePayData) {
const applePayData = intentState.nativePayData;
try {
const intentId = "<intent_id>"; // The unique identifier for the payment intent
const depositAmount = applePayData.amount || 0.0; // Amount from state
const merchantIdentifier = applePayData.merchantId || "merchant.com.example"; // Merchant ID from state
const currencyCode = applePayData.currencyCode || "USD"; // Currency code from state
const countryCode = applePayData.countryCode || "US"; // Country code from state
const intentDetails = await moneyHashSDK.proceedWithApplePay(
intentId,
depositAmount,
merchantIdentifier,
currencyCode,
countryCode
);
// Handle successful payment
console.log("Payment completed successfully:", intentDetails);
} catch (error) {
// Handle error during Apple Pay process
console.error("Error during Apple Pay:", error.message);
}
} else {
console.log("No Apple Pay data available in NativePay state.");
}
This method shows the Apple Pay sheet to the user, processes the payment, and returns the IntentDetails
once completed successfully or throws an error if something goes wrong.
If billing data is required but not provided, the SDK will throw an error, prompting you to provide the necessary data before proceeding.
Note: Replace "<intent_id>"
and "merchant.com.example"
with your actual Intent ID and Merchant Identifier provided by MoneyHash.
By following these steps, you can integrate Apple Pay into your React Native application using the MoneyHash SDK, providing users with a seamless and secure payment experience.
Updated about 1 month ago