Apple Pay & Native Pay Methods

Configuring Apple Pay to Collect Billing Data

If you need to collect specific billing data from the user during the payment process and use it as part of the billing data, you can configure the collectibleBillingData accordingly.

await moneyHashSDK.setNativeApplePayConfig({
  collectibleBillingData: ["email"],  // Collect billing email
});

• collectibleBillingData can be an array of 'email' values (currently only "email" is supported).
• Passing an empty array ([]) disables automatic billing data collection.

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.

Approaches for Apple Pay Payments

Below are two approaches for handling Apple Pay payments:

1. Approach #1: Directly using proceedWithApplePay (requires an intentId upfront).
2. Approach #2: Generating a receipt first, then submitting the payment receipt separately.

Approach #1: Direct Payment with proceedWithApplePay

Once you've confirmed that the device is compatible, you can directly show the Apple Pay sheet and complete the payment in one step using the proceedWithApplePay method. This approach requires you to have the intentId from the beginning.

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. This state includes an instance of ApplePayData, which provides:

• merchantId
• countryCode
• currencyCode
• amount

You can use this data when calling the proceedWithApplePay method.

Code Example

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 supply the necessary data before proceeding.

Approach #2: Generate a Receipt First, Then Submit the Receipt

This new approach allows you to generate an Apple Pay receipt without needing an intentId up front, then submit that receipt for payment once you have the intentId. This can be useful if your flow only obtains the intentId after the Apple Pay sheet has been completed.

Step 1: Generate the Apple Pay Receipt

Use the generateApplePayReceipt method to show the Apple Pay sheet, collect payment data, and generate a NativePayReceipt. This step does not require an intentId.

Below is an example that takes data from NativePay state’s applePayData object to generate the receipt:

if (intentState.nativePayData) {
  const applePayData = intentState.nativePayData;

  try {
    // Extract payment details from applePayData
    const depositAmount = applePayData.amount || 0.0;
    const merchantIdentifier = applePayData.merchantId || "merchant.com.example";
    const currencyCode = applePayData.currencyCode || "USD";
    const countryCode = applePayData.countryCode || "US";

    // Shows Apple Pay sheet and generates the receipt
    const receipt = await moneyHashSDK.generateApplePayReceipt(
      depositAmount,
      merchantIdentifier,
      currencyCode,
      countryCode
    );

    // At this point, 'receipt' contains the Apple Pay transaction data
    console.log("Apple Pay Receipt generated:", receipt);

    // You can now store 'receipt' until you're ready to submit the payment

  } catch (error) {
    // Handle any errors that occur during Apple Pay process
    console.error("Error generating Apple Pay receipt:", error.message);
  }
} else {
  console.log("No Apple Pay data available in NativePay state.");
}

💡

Important: The generated receipt is only valid for a short period. Make sure to submit it promptly once you have the intentId.

Step 2: Submit the Payment Receipt

After generating the NativePayReceipt, use the submitPaymentReceipt method to finalize the payment. This method requires an intentId, which you can now provide.

try {
  const intentId = "<intent_id>"; // Obtain or generate this after the receipt is created

  // The 'receipt' here is the one returned by generateApplePayReceipt()
  const intentDetails = await moneyHashSDK.submitPaymentReceipt(
    intentId,
    receipt
  );

  // Handle successful payment
  console.log("Payment completed successfully:", intentDetails);

} catch (error) {
  // Handle error during payment submission
  console.error("Error submitting payment receipt:", error.message);
}

📘

As with the first approach, if billing data is required but not provided, the SDK will throw an error prompting you to add the necessary information before completing the payment.

Summary

Approach #1: If you already have the intentId, you can use proceedWithApplePay directly to show the Apple Pay sheet, process the payment, and obtain the IntentDetails in a single call.

Approach #2: If you do not have the intentId initially, or prefer separating the Apple Pay sheet from the final payment submission, you can:

1. Use generateApplePayReceipt to show the sheet and create the NativePayReceipt.
2. Later, use submitPaymentReceipt to finalize the payment once you have the intentId.

In both scenarios, always remember to check device compatibility with Apple Pay first and handle any required billing data as needed.

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.