Hi, I'm adding ApplePay to our website. It works perfectly. However, I want to hide the ApplePay button on devices that do not have an Apple Wallet configured. I am using the following code to verify this as per ApplePay documentation.
function ShowApplePayButton() {
if (window.ApplePaySession) {
if (ApplePaySession.canMakePayments()) {
if (ApplePaySession.canMakePaymentsWithActiveCard('visa') ||
ApplePaySession.canMakePaymentsWithActiveCard('masterCard')) {
return true;
}
}
}
return false;
}
This function always returns true from a Mac with no wallet configured. So the applePay button is visible on the Mac. When I click on the ApplePay button, there is no option to add or update the Wallet. This is my ApplePay sample code
function onApplePay() {
if (!ApplePaySession) {
return;
}
var grandTotal = "10";
// Define ApplePayPaymentRequest
const request = {
countryCode: 'GB',
currencyCode: 'GBP',
merchantCapabilities: ['supports3DS'],
supportedNetworks: ['masterCard', 'visa'],
total: { label: 'Total', amount: grandTotal, type: 'final' },
requiredBillingContactFields: ["postalAddress", "name", "phone", "email"],
requiredShippingContactFields: ["postalAddress", "name", "phone", "email"]
};
// Create ApplePaySession
const session = new ApplePaySession(3, request);
session.onvalidatemerchant = async event => {
// Call your own server to request a new merchant session.
const merchantSession = await getAsync("/test/ValidateMerchant", "", "json")
session.completeMerchantValidation(merchantSession);
};
session.onpaymentmethodselected = event => {
const update = {
newTotal: { label: 'Total', amount: grandTotal, type: 'final' }
}
session.completePaymentMethodSelection(update);
};
session.onshippingmethodselected = event => {
const update = { newTotal: { label: 'Total', amount: grandTotal, type: 'final' } };
session.completeShippingMethodSelection(update);
};
session.onshippingcontactselected = event => {
};
session.onpaymentauthorized = event => {
const result = {
"status": ApplePaySession.STATUS_FAILURE
};
const payment = event.payment;
aj.post('/test/ProcessPayment', body, function (response) {
if (response.approved) {
session.completePayment(ApplePaySession.STATUS_SUCCESS);
} else {
session.completePayment(ApplePaySession.STATUS_FAILURE)
}
}, function (xhr, ajaxOptions, thrownError) {
console.log(thrownError);
}, true, 'json');
};
session.oncancel = event => {
// Payment canceled by WebKit
};
session.begin();
}
Could you please suggest a workaround to resolve this issue?
I’d encourage you to check out the Wallet and Apple Pay session from this year’s WWDC - we have new guidance and advice for how to control visibility of the Apple Pay button, because Apple Pay is now available on more platforms and browsers.
