simple_payment_request.html (1911B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Payment Request Testing</title> 4 <script> 5 const methods = [ 6 { 7 supportedMethods: "basic-card", 8 }, 9 ]; 10 const details = { 11 id: "simple details", 12 total: { 13 label: "Donation", 14 amount: { currency: "USD", value: "55.00" }, 15 }, 16 }; 17 const updatedDetails = { 18 id: "simple details", 19 total: { 20 label: "Donation", 21 amount: { currency: "USD", value: "55.00" }, 22 }, 23 error: "", 24 }; 25 26 let request; 27 let shippingChangedEvent; 28 29 let msg = "successful"; 30 try { 31 request = new PaymentRequest(methods, details); 32 request.onshippingoptionchange = (event) => { 33 shippingChangedEvent = event; 34 window.parent.postMessage("successful", "*"); 35 }; 36 request.onshippingaddresschange = (event) => { 37 shippingChangedEvent = event; 38 window.parent.postMessage("successful", "*"); 39 }; 40 41 } catch (err) { 42 msg = err.name; 43 } 44 window.parent.postMessage(msg, "*"); 45 46 47 if (request) { 48 window.onmessage = async ({ data: action }) => { 49 msg = "successful"; 50 switch (action) { 51 case "show PaymentRequest": { 52 const responsePromise = request.show(); 53 window.parent.postMessage(msg, "*"); 54 try { 55 await responsePromise; 56 } catch (err) { 57 if (err.name !== "AbortError") { 58 msg = err.name; 59 } 60 } 61 window.parent.postMessage(msg, "*") 62 break; 63 } 64 case "updateWith PaymentRequest": 65 if (shippingChangedEvent) { 66 try { 67 shippingChangedEvent.updateWith(updatedDetails); 68 } catch(err) { 69 if (err.name !== "InvalidStateError") { 70 msg = err.name; 71 } 72 } 73 window.parent.postMessage(msg, "*"); 74 shippingChangedEvent = undefined; 75 } 76 break; 77 default: 78 window.parent.postMessage(`fail - unknown postmessage action: ${action}`, "*"); 79 } 80 }; 81 } 82 </script>