How do you control the browser prompt on 1-page checkouts?

[theindra]

Imagine a 1-page checkout with the following sections:

1. Contact info
2. Shipping Info
3. Payment Info

With each part depending on the previous part.
I imagine we would need to control the attribute during runtime when the user is ready.
But I'm wondering if you have any guidance on when to do that best?
When the payment method section comes into the view port? When all previous form fields are filled out? Any other recommendations?

[rsolomakhin]

You can dynamically createElement() and appendChild() for the payment link. Then the user agent will pick it up.

@ynyhxfo - Do you have more details here?

[rsolomakhin]

In terms of precise UX, I think there is some room for experimentation and studies, but the initial proposals that I have seen in W3C slides was to trigger the payment link after the user has selected a certain payment method, e.g., "ShoppePay", when the user is on the page that displays the QR code for this payment method.

That way, if the user agent does not support payment links, then the user scans the QR code.

But if the user agent supports payment links, then the user agent can show some kind of browser-UI to assist the user with the payment.

[ynyhxfo]

You can dynamically createElement() and appendChild() for the payment link. Then the user agent will pick it up.

@ynyhxfo - Do you have more details here?

Yes that's correct! The flow will be triggered at the very moment when all the three conditions are met for a link element:

1. rel is "faclitated-payment".
2. href is not empty.
3. the link element is attached to the document.

So you can construct the link element dynamically. And when you want the flow to be triggered, you can simply call appendChild().