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
usesApplePaySession
native method under the hood that exits in safari browsers, which requiresApplePaySession
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 errorBilling 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 errorBilling 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 errorBilling 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 errorBilling 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
Updated 29 days ago