user activation must survive postMessage() to call show() (#10090)

Check that we can call pr.show() in an iframe via postMessage(), which is triggered by user activation.
web-platform-tests · Mar 21, 2018 · 92885ac · 92885ac
1 parent 66e0742
commit 92885ac
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 0 deletions.
diff --git a/payment-request/show-method-postmessage-iframe.html b/payment-request/show-method-postmessage-iframe.html
@@ -0,0 +1,42 @@
+<h1>This iframe calls shows() via postMessage()</h1>
+<script>
+"use strict";
+const defaultMethods = Object.freeze([
+  { supportedMethods: "basic-card" },
+  { supportedMethods: "https://apple.com/pay" },
+]);
+
+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 request = new PaymentRequest(defaultMethods, {
+        ...defaultDetails,
+        id,
+      });
+      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>
diff --git a/payment-request/show-method-postmessage-manual.https.html b/payment-request/show-method-postmessage-manual.https.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test for PaymentRequest.show() method</title>
+<link rel="help" href="https://w3c.github.io/browser-payment-api/#show-method">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+"use strict";
+setup({
+  explicit_done: true,
+  explicit_timeout: true,
+});
+
+async function runUserActivation(button) {
+  button.disabled = true;
+  const { contentWindow: iframeWindow } = document.getElementById("iframe");
+  const expectedId = "pass123";
+  await Promise.resolve(); // next tick
+  const promiseForResponse = new Promise(resolve => {
+    window.onmessage = ({ data: { requestId } }) => resolve(requestId);
+  });
+  const ops = { id: expectedId, request: "show-payment-request" };
+  iframeWindow.postMessage(ops, window.location.origin);
+  promise_test(async () => {
+    const actualId = await promiseForResponse;
+    assert_equals(actualId, expectedId, "ids must match");
+  }, button.textContent.trim());
+  done();
+}
+</script>
+<h2>Test PaymentRequest.show() triggered by user activation using postMessage()</h2>
+<p>
+  Tests that user activation works over postMessage().
+</p>
+<p>
+  Click on bottom below. Hit "Pay".
+</p>
+<ol>
+  <li>
+    <button onclick="runUserActivation(this)">
+      show() is triggered by user activation passed through postMessage() and a promise
+    </button>
+  </li>
+</ol>
+<iframe width="100%" id="iframe" src="show-method-postmessage-iframe.html" allowpaymentrequest></iframe>
+<p>
+  <small>
+    If you find a buggy test, please <a href="https://github.com/w3c/web-platform-tests/issues">file a bug</a>
+    and tag one of the <a href="https://github.com/w3c/web-platform-tests/blob/master/payment-request/OWNERS">owners</a>.
+  </small>
+</p>