Initial commit of picture-in-picture tests. Not yet fully working.

rsolomakhin · Oct 22, 2024 · a9502df · a9502df
1 parent b8ec155
commit a9502df
Show file tree

Hide file tree

Showing 12 changed files with 421 additions and 0 deletions.
diff --git a/pr/assets/picture-in-picture/README.md b/pr/assets/picture-in-picture/README.md
@@ -0,0 +1,3 @@
+File: bigbuckbunny.mp4
+Source: https://peach.blender.org/download/
+License: CC-BY 3.0
diff --git a/pr/assets/picture-in-picture/bigbuckbunny.mp4 b/pr/assets/picture-in-picture/bigbuckbunny.mp4
diff --git a/pr/picture-in-picture/index.html b/pr/picture-in-picture/index.html
@@ -0,0 +1,6 @@
+<p>Picture-in-picture test pages for:</p>
+<ul>
+<li><a href="payment-handler/">Payment handler</a></li>
+<li><a href="spc/">Secure payment confirmation</a></li>
+<li><a href="payment-ui/">Payment UI</a></li>
+</ul>
diff --git a/pr/picture-in-picture/payment-handler/index.html b/pr/picture-in-picture/payment-handler/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="theme-color" content="#4CAF50">
+  <title>Bob Bucks Test</title>
+  <link rel="icon" href="../../favicon.ico">
+  <link rel="stylesheet" type="text/css" href="../style.css">
+  <style>
+    h1, strong {
+      color: #4CAF50;
+    }
+    button {
+      background-color: #4CAF50;
+    }
+  </style>
+</head>
+<body>
+  <div id="contents">
+    <h1>Bob Bucks Test</h1>
+    <p>This merchant accepts Bob Bucks. <a href="pr.js">View source</a>.</p>
+    <p>Price: USD <strong>$55.00</strong></p>
+    <p><button onclick="onBuyClicked()">Buy</button></p>
+  </div>
+  <pre id="msg"></pre>
+  <script src="../util.js"></script>
+  <script src="pr.js"></script>
+  <script src="../../redirect.js"></script>
+</body>
+</html>
diff --git a/pr/picture-in-picture/payment-handler/pr.js b/pr/picture-in-picture/payment-handler/pr.js
@@ -0,0 +1,98 @@
+/**
+ * Initializes the payment request object.
+ * @return {PaymentRequest} The payment request object.
+ */
+function buildPaymentRequest() {
+  if (!window.PaymentRequest) {
+    return null;
+  }
+
+  const supportedInstruments = [{
+    supportedMethods: 'https://bobbucks.dev/pay'
+  }];
+
+  const details = {
+    total: {
+      label: 'Donation',
+      amount: {
+        currency: 'USD',
+        value: '55.00',
+      },
+    },
+    displayItems: [{
+      label: 'Original donation amount',
+      amount: {
+        currency: 'USD',
+        value: '65.00',
+      },
+    }, {
+      label: 'Friends and family discount',
+      amount: {
+        currency: 'USD',
+        value: '-10.00',
+      },
+    }],
+  };
+
+  let request = null;
+
+  try {
+    request = new PaymentRequest(supportedInstruments, details);
+    if (request.canMakePayment) {
+      request.canMakePayment().then(function(result) {
+        info(result ? 'Can make payment' : 'Cannot make payment');
+      }).catch(function(err) {
+        error(err);
+      });
+    }
+    if (request.hasEnrolledInstrument) {
+      request.hasEnrolledInstrument().then(function(result) {
+        info(result ? 'Has enrolled instrument' : 'No enrolled instrument');
+      }).catch(function(err) {
+        error(err);
+      });
+    }
+  } catch (e) {
+    error('Developer mistake: \'' + e.message + '\'');
+  }
+
+  return request;
+}
+
+let request = buildPaymentRequest();
+
+/**
+ * Handles the response from PaymentRequest.show().
+ */
+function handlePaymentResponse(response) {
+    response.complete('success')
+      .then(function() {
+        done('This is a demo website. No payment will be processed.', response);
+      })
+      .catch(function(err) {
+        error(err);
+        request = buildPaymentRequest();
+      });
+}
+
+/**
+ * Launches payment request for Bob Pay.
+ */
+function onBuyClicked() { // eslint-disable-line no-unused-vars
+  if (!window.PaymentRequest || !request) {
+    error('PaymentRequest API is not supported.');
+    return;
+  }
+
+  try {
+    request.show()
+      .then(handlePaymentResponse)
+      .catch(function(err) {
+        error(err);
+        request = buildPaymentRequest();
+      });
+  } catch (e) {
+    error('Developer mistake: \'' + e.message + '\'');
+    request = buildPaymentRequest();
+  }
+}
diff --git a/pr/picture-in-picture/payment-ui/index.html b/pr/picture-in-picture/payment-ui/index.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>US-only delivery with e-mail address</title>
+  <link rel="icon" href="/favicon.ico">
+  <link rel="stylesheet" type="text/css" href="../style.css">
+</head>
+
+<body>
+  <div id="contents">
+    <h1>US-only delivery with e-mail adderss</h1>
+    <p>The merchant provides free delivery in California, $5.00 delivery in US. Delivery outside of US is impossible. The merchant requests an e-mail address from the merchant. No payment will be processed.</p>
+    <p>Price: USD <strong>$55.00</strong></p>
+    <p><button onclick="onBuyClicked()">Buy</button></p>
+  </div>
+  <pre id="msg"></pre>
+  <script src="../util.js"></script>
+  <script src="pr.js"></script>
+  <script src="/redirect.js"></script>
+</body>
+
+</html>
diff --git a/pr/picture-in-picture/payment-ui/pr.js b/pr/picture-in-picture/payment-ui/pr.js
@@ -0,0 +1,135 @@
+/**
+ * Updates the details based on the selected address.
+ * @param {object} details - The current details to update.
+ * @param {PaymentAddress} addr - The address selected by the user.
+ * @return {object} The updated details.
+ */
+function updateDetails(details, addr) {
+  if (addr.country === 'US') {
+    var shippingOption = {
+      id: '',
+      label: '',
+      amount: {
+        currency: 'USD',
+        value: '0.00'
+      },
+      selected: true
+    };
+    if (addr.region === 'CA') {
+      shippingOption.id = 'ca';
+      shippingOption.label = 'Free delivery in California';
+      details.total.amount.value = '55.00';
+    } else {
+      shippingOption.id = 'us';
+      shippingOption.label = 'Standard delivery in US';
+      shippingOption.amount.value = '5.00';
+      details.total.amount.value = '60.00';
+    }
+    details.displayItems.splice(1, 1, shippingOption);
+    details.shippingOptions = [shippingOption];
+  } else {
+    delete details.shippingOptions;
+  }
+  return details;
+}
+
+/**
+ * Launches payment request that provides different delivery options based on
+ * the delivery address that the user selects.
+ */
+function onBuyClicked() { // eslint-disable-line no-unused-vars
+  var supportedInstruments = [{
+      supportedMethods: 'https://google.com/pay',
+      data: {
+        allowedPaymentMethods: ['TOKENIZED_CARD', 'CARD'],
+        apiVersion: 1,
+        cardRequirements: {
+          'allowedCardNetworks': ['VISA', 'MASTERCARD', 'AMEX'],
+        },
+        merchantName: 'Rouslan Solomakhin',
+        merchantId: '00184145120947117657',
+        paymentMethodTokenizationParameters: {
+          tokenizationType: 'GATEWAY_TOKEN',
+          parameters: {
+            'gateway': 'stripe',
+            'stripe:publishableKey': 'pk_live_lNk21zqKM2BENZENh3rzCUgo',
+            'stripe:version': '2016-07-06',
+          },
+        },
+      },
+    },
+    {
+      supportedMethods: 'basic-card',
+    },
+  ];
+
+  var details = {
+    total: {
+      label: 'Donation',
+      amount: {
+        currency: 'USD',
+        value: '55.00'
+      }
+    },
+    displayItems: [{
+        label: 'Original donation amount',
+        amount: {
+          currency: 'USD',
+          value: '65.00'
+        }
+      },
+      {
+        label: 'Pending delivery price',
+        amount: {
+          currency: 'USD',
+          value: '0.00'
+        },
+        pending: true
+      },
+      {
+        label: 'Friends and family discount',
+        amount: {
+          currency: 'USD',
+          value: '-10.00'
+        }
+      }
+    ]
+  };
+
+  var options = {
+    requestPayerEmail: true,
+    requestShipping: true,
+    shippingType: "delivery"
+  };
+
+  if (!window.PaymentRequest) {
+    error('PaymentRequest API is not supported.');
+    return;
+  }
+
+  try {
+    var request = new PaymentRequest(supportedInstruments, details, options);
+
+    request.addEventListener('shippingaddresschange', function(e) {
+      e.updateWith(new Promise(function(resolve) {
+          resolve(updateDetails(details, request.shippingAddress));
+      }));
+    });
+
+    request.show()
+      .then(function(instrumentResponse) {
+          instrumentResponse.complete('success')
+            .then(function() {
+              done('This is a demo website. No payment will be processed.', instrumentResponse);
+            })
+            .catch(function(err) {
+              error(err);
+            });
+      })
+      .catch(function(err) {
+        error(err);
+      });
+  } catch (e) {
+    error('Developer mistake: \'' + e.message + '\'');
+  }
+}
diff --git a/pr/picture-in-picture/spc/bobpaycc.png b/pr/picture-in-picture/spc/bobpaycc.png
diff --git a/pr/picture-in-picture/spc/index.html b/pr/picture-in-picture/spc/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Secure Payment Confirmation</title>
+  <link rel="icon" href="/favicon.ico">
+  <link rel="stylesheet" type="text/css" href="../style.css">
+</head>
+
+<body>
+  <div id="contents">
+    <h1>Secure Payment Confirmation</h1>
+    <p>This is a test website. Nothing is charged.</p>
+    </pre>
+    <p><button onclick="createPaymentCredential('Credential #1')">Enroll
+        Credential #1</button></p>
+    <p><button onclick="createPaymentCredential('Credential #2')">Enroll
+        Credential #2</button></p>
+    <p><button onclick="onBuyClicked('Credential #1')">Pay $0.01</button> (with
+      credential #1)</p>
+    <p><button onclick="onBuyClicked('Credential #2')">Pay $0.01</button> (with
+      credential #2)</p>
+    <p><button onclick="webAuthnGet('Credential #1')">Login</button> (with
+      credential #1)</button></p>
+    <p><button onclick="webAuthnGet('Credential #2')">Login</button> (with
+      credential #2)</button></p>
+  </div>
+  <pre id="msg"></pre>
+  <p>Based on the <a
+      href="https://github.com/w3c/secure-payment-confirmation">Secure Payment
+      Confirmation explainer</a>.</p>
+  <script src="../util.js"></script>
+  <script src="../spc_util.js"></script>
+  <script src="pr.js"></script>
+  <script src="/redirect.js"></script>
+</body>
+
+</html>