search

WICG / proposals

A home for well-formed proposed incubations for the web platform. All proposals welcome.
https://wicg.io/
Other
233 stars 16 forks source link

Payment link type in HTML #150

Open ynyhxfo opened 6 months ago

ynyhxfo commented 6 months ago

Introduction

Certain push payment flows can cause high friction for users (e.g. display of a QR code that the user needs to scan with an eWallet app). Browsers may have the ability to more easily facilitate these payment flows (e.g. if the user has a wallet installed on their device that supports the underlying payment method for the displayed QR, or has a browser extension for the supported eWallet). This is a proposal for <link rel="payment"> that browsers can read to better assist users with payments.

Read the complete Explainer.

Feedback

Please provide all feedback below.

I welcome feedback in this thread.

cc @rsolomakhin @aneeshali @stephenmcgruer

anubh-v commented 1 month ago

ShopeePay is interested in supporting this proposal as it could offer a more seamless online payment experience.

The Payment link type in HTML may potentially be helpful for the following merchants:

1. Merchants integrated with ShopeePay:

2. Merchants not integrated with ShopeePay:

Here are examples of how this could be implemented with ShopeePay:

QR Code Example (Applicable to all merchants)

Merchants can generate a QR code using either interoperable or national QR standards or by making an API call to ShopeePay

Sample QR String:

00020201021126600014A00000061500010106890087022800000000000000000000000915075204737253034585802MY5913DUITNOW.SS.MY6002MY62570536c2e8c522-ab75-4cba-983a-9a3bebeb29590613DUITNOW.SS.MY823247FCECA2796DDB8C0D63753C1131BD856304AF4A

The merchant can embed the QR code information on a web checkout page. The browser will detect and trigger the payment process.

HTML Payment Link Format:

The HTML payment link should be added under the section of the HTML page, in the following format: 

<link rel="payment" href="shopeepay://shopeepay.com.my?
code=00020201021126600014A00000061500010106890087022800000000000000000000000915075204737253034585802MY5913DUITNOW.SS.MY6002MY62570536c2e8c522-ab75-4cba-983a-9a3bebeb29590613DUITNOW.SS.MY823247FCECA2796DDB8C0D63753C1131BD856304AF4A&format=QRIS&merchantName=Walmart&currencyCode=USD&totalPrice=101">

Note the presence of a “format” field, which specifies that the "code" field is in QRIS format.

Checkout with ShopeePay Example (Applicable to integrated merchants)

Merchants need to obtain a proprietary ShopeePay payment link via an API call.

Sample Payment Link: https://shopeepay.com.my/281011051692389958586862838 The merchant can then embed the payment link in the checkout page, and the browser will detect and trigger the payment.

HTML Payment Link Format:

The HTML payment link should be added under the <head> section of the HTML page, in the following format:
<link rel="payment" href="shopeepay://shopeepay.com.my?code=https%3A%2F%2Fshopeepay.com.my%2F281011051692389958586862838&format=PROPRIETARY_URL&merchantName=Walmart&currencyCode=USD&totalPrice=101">

Note the presence of a “format” field, indicating that the "code" is in Shopee’s proprietary format

Important: With the payment link, URI encoding is required for the query parameter "code" to ensure accurate data parsing.

cc @benedictng