Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
Mar 21, 2018
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f7662c3
user activation survives postMessage()
marcoscaceres Mar 19, 2018
12b220d
nit: linting error
marcoscaceres Mar 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions payment-request/show-method-postmessage-iframe.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
51 changes: 51 additions & 0 deletions payment-request/show-method-postmessage-manual.https.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>