Here you go!
I'm getting the text appended onto the #applePay element ("not possible in the browser"), and the console.log is populating the same message.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"><head>
<script src="./jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$( document ).ready( function( )
{
if (window.ApplePaySession) {
console.log("supports version: " + ApplePaySession.supportsVersion(1));
var merchantIdentifier = 'merchant.blah';
var promise = ApplePaySession.canMakePaymentsWithActiveCard(merchantIdentifier);
promise.then(function (canMakePayments) {
if (canMakePayments) {
$("#applePay").show();
console.log('hi, I can do ApplePay');
} else {
$("#applePay").after('<p>ApplePay is possible on this browser, but not currently activated.</p>');
console.log('ApplePay is possible on this browser, but not currently activated.');
}
});
} else {
console.log('ApplePay not available on this browser');
$("#applePay").after('ApplePay not available on this browser');
}
$("#applePay").click( function(evt) {
var paymentRequest = {
currencyCode: 'USD',
countryCode: 'US',
total: {
label: 'stuff and things',
amount: '3.00'
},
supportedNetworks: ['amex', 'discover', 'masterCard', 'visa' ],
merchantCapabilities: [ 'supports3DS' ]
};
var session = new ApplePaySession(1, paymentRequest);
// Merchant Validation
session.onvalidatemerchant = function (event) {
console.log(event);
var promise = performValidation(event.validationURL);
promise.then(function (merchantSession) {
session.completeMerchantValidation(merchantSession);
console.log('Starting session.completeMerchantValidation');
});
};
function performValidation(valURL) {
return new Promise(function(resolve, reject) {
// hitting validation service here
console.log("status" + status);
console.log("data" + data);
// console.log('starting function performValidation()');
// console.log(valURL);
resolve;
});
}
session.begin();
});
});
</script>
<style>
#applePay {
width: 280px;
height: 64px;
display: inline-block;
border: 1px solid black;
box-sizing: border-box;
background-image: url(../img/ApplePayBTN_32pt__black_textLogo_@2x.png);
background-size: 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<button type="button" id="applePay" style="display:none"></button>
</body>
</html>
