49 lines
1.2 KiB
HTML
49 lines
1.2 KiB
HTML
<h1>This iframe calls shows() via postMessage()</h1>
|
|
<script>
|
|
"use strict";
|
|
const defaultMethods = Object.freeze([
|
|
{ supportedMethods: "basic-card" },
|
|
{
|
|
supportedMethods: "https://apple.com/apple-pay",
|
|
data: {
|
|
version: 3,
|
|
merchantIdentifier: "merchant.com.example",
|
|
countryCode: "US",
|
|
merchantCapabilities: ["supports3DS"],
|
|
supportedNetworks: ["visa"],
|
|
}
|
|
},
|
|
]);
|
|
|
|
const defaultDetails = Object.freeze({
|
|
id: "fail",
|
|
total: {
|
|
label: "Total",
|
|
amount: {
|
|
currency: "USD",
|
|
value: "1.00",
|
|
},
|
|
},
|
|
});
|
|
|
|
// We are going to use the id to prove that this works
|
|
// which we will pass back to the caller
|
|
window.onmessage = async event => {
|
|
const { source, data: { id, request } } = event;
|
|
switch (request) {
|
|
case "show-payment-request": {
|
|
const details = Object.assign({}, defaultDetails, { id });
|
|
const request = new PaymentRequest(defaultMethods, details);
|
|
try {
|
|
const response = await request.show();
|
|
source.postMessage(response.toJSON(), window.location.origin);
|
|
await response.complete();
|
|
} catch (err) {
|
|
source.postMessage({ requestId: "fail" }, window.location.origin);
|
|
await request.abort();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
</script>
|