Apple Pay & Native Pay Methods

Apple pay

Based on the provider, apple pay could require billing data before showing Apple pay dialog, so we recommend sending all billing data while creating the intent.

Billing data is provided while creating the intent

In this case, rendering Apple pay button with onClick handler that calls moneyHash.payWithApplePay directly should show Apple Pay dialog allowing the customer to pay.

🚧
payWithApplePay uses ApplePaySession native method under the hood that exits in safari browsers, which requires ApplePaySession to be called right after gesture handler.

moneyHash.payWithApplePay({
  intentId,
  amount: <<TOTAL_PRICE>>,
  currency: "CURRENCY",
  countryCode: "<<COUNTRY_CODE>>",
  onCancel: () => {},
  onError: () => {

  },
})
 .then(() =>  console.log("COMPLETE"))
 .catch(error => {
   console.log(error);
      // error.message | string
      // Native apple pay button need to be triggered from click event directly
      // - Must create a new ApplePaySession from a user gesture handler.

      // intent requires billing data to proceed with the native integration
      // - Billing data is missing while calling payWithApplePay
      //  error | Record<string, string>
      //  {email: "Enter a valid email address."}
 });

📘
If there are any missing billing data while trying to call payWithApplePay, MoneyHash SDK will throw an error Billing data is missing while calling payWithApplePay

Billing data is not provided while creating the intent

Pass billing data while calling payWithApplePay

MoneyHash informs you beforehand, the required billing data in expressMethods, the payload shows as follows:

{
  "id": "APPLE_PAY",
  "title": "Apple Pay",
  "icons": [
    "https://cdn.moneyhash.io/images/checkout_icons/ApplePay.svg"
  ],
  "isSelected": false,
  "confirmationRequired": false,
  "requiredBillingFields": [
    {
      "type": "EmailField",
      "field_name": "email",
      "value": "",
      "choices": null,
      "label": "Email",
      "max_length": null,
      "help_text": "Customer's email address",
      "required": true,
      "min_length": null,
      "read_only": false,
    }
  ]
}

Notice requiredBillingFields which you can use to pass the required billing data to payWithApplePay

moneyHash.payWithApplePay({
  intentId,
  amount: totalPrice,
  currency,
  countryCode: "AE",
  onCancel: () => {},
  billingData: {
    // pass required billing data here
    email: "[email protected]"
  },
  onError: () => {},
});

📘
requiredBillingFields is a dynamic set of fields that varies from a provider to another, make sure all billing fields mentioned are passed, other wise MoneyHash SDK will throw an error Billing data is missing while calling payWithApplePay

Show MoneyHash form to collect billing data

If you don't wish to collect customer's billing data as part of your app, you can use moneyhash.renderForm method which will fire onComplete event once the user fills in their billing data, and state should be NATIVE_PAY

moneyHash = new MoneyHash({
  type: "payment",
  onComplete: data => {
    // Now you can show Apple pay button once the filling of the form is done
    // Add a button to the dom or show a confirmation modal that contains Apple pay button
    console.log("onComplete", data);
  },
  onFail: ({ intent, transaction }) => {
    console.log("onFail", { intent, transaction });
  },
});

The onClick handler should be moneyhash.payWithApplePay

Google pay

Based on the provider, GooglePay could require billing data before showing GooglePay dialog, so we recommend sending all billing data while creating the intent.

Configuration

const moneyHash: MoneyHash<"payment"> = new MoneyHash({
  type: "payment",
  googlePay: {
    environment: "PRODCUTION", // (Optional)  "TEST" | "PRODUCTION"  Defaults to "PRODUCTION"
    allowedAuthMethods: ["PAN_ONLY","CRYPTOGRAM_3DS"], // (Optional)
    allowedCardNetworks: ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"] // (Optional)
  },
});

Render native GooglePay button

Create an element container with id moneyHash-google-pay-button with button height needed to avoid layout shift.

<div id="moneyHash-google-pay-button" style="height: 40px;"></div>

moneyHash.renderGooglePayButton({
  onClick: () => {
    console.log("Google Pay Clicked");
  },
  // ... google pay button customization
});

Further button customization can be found on Google Docs

Billing data is provided while creating the intent

moneyHash.renderGooglePayButton({
  onClick: () =>
    moneyHash
      .payWithGooglePay({
        intentId: "<intent_id>",
        onCancel() {
          console.log("Google Dialog Closed by the user");
        },
      })
      .then(intentDetails => console.log(intentDetails))
      .catch(error => {
        console.log(error);
        // error.message | string
        // Google Dialog errors;

        // intent requires billing data to proceed with the native integration
        // - Billing data is missing while calling payWithApplePay
        //  error | Record<string, string>
        //  {email: "Enter a valid email address."}
      }),
});

📘
If there are any missing billing data while trying to call payWithApplePay, MoneyHash SDK will throw an error Billing data is missing while calling payWithApplePay

Billing data is not provided while creating the intent

Pass billing data while calling payWithGooglePay

MoneyHash informs you beforehand, the required billing data in expressMethods, the payload shows as follows

{
  "id": "GOOGLE_PAY",
  "title": "Google Pay",
  "icons": [
    "https://cdn.moneyhash.io/images/checkout_icons/GooglePay.svg"
  ],
  "isSelected": false,
  "confirmationRequired": false,
  "requiredBillingFields": [
    {
      "type": "EmailField",
      "field_name": "email",
      "value": "",
      "choices": null,
      "label": "Email",
      "max_length": null,
      "help_text": "Customer's email address",
      "required": true,
      "min_length": null,
      "read_only": false,
    }
  ]
}

Notice requiredBillingFields which you can use to pass the required billing data to payWithGooglePay

moneyHash.renderGooglePayButton({
  onClick: () =>
    moneyHash
      .payWithGooglePay({
        intentId: "<intent_id>",
        billingData: {
          // pass required billing data here
          email: "[email protected]",
        },
        onCancel() {
          console.log("Google Dialog Closed by the user");
        },
      })
      .then(intentDetails => console.log(intentDetails))
      .catch(error => {
        console.log(error);
      }),
});

📘
requiredBillingFields is a dynamic set of fields that varies from a provider to another, make sure all billing fields mentioned are passed, other wise MoneyHash SDK will throw an error Billing data is missing while calling payWithApplePay

Show MoneyHash form to collect billing data

moneyHash = new MoneyHash({
  type: "payment",
  onComplete: data => {
    // Now you can show Apple pay button once the filling of the form is done
    // Add a button to the dom or show a confirmation modal that contains Apple pay button
    console.log("onComplete", data);
  },
  onFail: ({ intent, transaction }) => {
    console.log("onFail", { intent, transaction });
  },
});

The onClick handler should be moneyhash.payWithApplePay