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, and countryCode 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.