Add Payment Request demo content.
[WebKit-https.git] / Websites / webkit.org / demos / payment-request / demo.js
1 (() => {
2     "use strict"
3     async function applePayButtonClicked(event)
4     {
5         const applePayMethod = {
6             supportedMethods: "https://apple.com/apple-pay",
7             data: {
8                 version: 1,
9                 merchantIdentifier: "org.webkit.demo",
10                 merchantCapabilities: ["supports3DS", "supportsCredit", "supportsDebit"],
11                 supportedNetworks: ["amex", "discover", "masterCard", "visa"],
12                 countryCode: "US",
13             },
14         };
15
16         const detailsForShippingOption = selectedShippingOption => {
17             const shippingOptions = [
18                 {
19                     id: "ground",
20                     label: "Ground Shipping",
21                     amount: { value: "5.00", currency: "USD" },
22                     overrideTotal: { value: "25.00", currency: "USD" },
23                 },
24                 {
25                     id: "express",
26                     label: "Express Shipping",
27                     amount: { value: "10.00", currency: "USD" },
28                     overrideTotal: { value: "30.00", currency: "USD" },
29                 },
30             ];
31
32             var shippingOptionIndex = null;
33             for (var shippingOption in shippingOptions) {
34                 if (shippingOptions[shippingOption].id !== selectedShippingOption)
35                     continue;
36                 shippingOptionIndex = shippingOption;
37                 break;
38             }
39
40             if (!shippingOptionIndex)
41                 return { };
42
43             shippingOptions[shippingOptionIndex].selected = true;
44
45             return {
46                 total: {
47                     label: "WebKit",
48                     amount: shippingOptions[shippingOptionIndex].overrideTotal,
49                 },
50                 displayItems: [
51                     {
52                         label: shippingOptions[shippingOptionIndex].label,
53                         amount: shippingOptions[shippingOptionIndex].amount,
54                     },
55                 ],
56                 shippingOptions: shippingOptions,
57             };
58         };
59
60         const options = {
61             requestShipping: true,
62         };
63
64         const paymentRequest = new PaymentRequest([applePayMethod], detailsForShippingOption("ground"), options);
65
66         paymentRequest.onmerchantvalidation = event => {
67             fetch("merchant-validation.php", {
68                 body: JSON.stringify({ validationURL: event.validationURL }),
69                 method: "POST",
70             }).then(response => event.complete(response.json()));
71         };
72
73         paymentRequest.onshippingaddresschange = event => {
74             const detailsUpdate = detailsForShippingOption(paymentRequest.shippingOption);
75             event.updateWith(detailsUpdate);
76         };
77
78         paymentRequest.onshippingoptionchange = event => {
79             const detailsUpdate = detailsForShippingOption(paymentRequest.shippingOption);
80             event.updateWith(detailsUpdate);
81         };
82
83         const response = await paymentRequest.show();
84         response.complete("success");
85     }
86
87     window.addEventListener("DOMContentLoaded", () => {
88         const applePayButton = document.querySelector("#live-button");
89         if (!window.PaymentRequest || !window.ApplePaySession || !ApplePaySession.canMakePayments())
90             applePayButton.classList.add("apple-pay-not-supported");
91         else {
92             applePayButton.classList.add("apple-pay-button");
93             applePayButton.addEventListener("click", applePayButtonClicked);   
94         }
95         applePayButton.classList.remove("hidden");
96     });
97 })();