The H5 end to pay

Wechat Pay -H5 pay

define

H5 payment is a payment product that evokes wechat Payment through a browser on mobile devices such as mobile phones and ipads.

Sequence diagram

Alipay – Mobile payment website

define

When the mobile web application is connected with this capability, users can make payment on the mobile website through the browser and arouse the Alipay client to realize the same payment experience as App payment.

Sequence diagram

The key code

/ * * *@description: Opens the link * on the current page@param {string} The url link *@return {*}* /
export function openLink (url: string) :void
{
  const a = document.createElement('a');
  a.setAttribute('href', url);
  a.setAttribute('id'.new Date().getTime().toString());
  document.body.appendChild(a);
  a.click();
}

/ * * *@description: According to different payment methods, initiate payment process * Note 1: If alipay payment order is generated, arouse Alipay payment by submitting Form * Note 2: If wechat payment order is generated, visit wechat link to arouse wechat payment *@return {*}* /
function handlePayByChannel ()
{
  // Alipay mobile website payment
  if (Number(payChannel) === 1)
  {
    const alipayContainer = document.getElementById('alipay');

    alipayContainer.innerHTML = payUrl;
    // The H5 end cannot be set to _blank, otherwise the payment page of Alipay cannot be adjusted in the APP
    // alipayContainer.children[0].target = '_blank';
    alipayContainer.children[0].submit();
  }
  // Wechat H5 payment
  else if (Number(payChannel) === 3)
  {
    // Set redirect_URL to automatically open the mobile browser to access the link after successful payment
    // const baseUrl = getBaseUrl();
    // const encodedDomain = encodeURIComponent(getDomainFromUrl(baseUrl));
    // openLink(`${payUrl}&redirect_url=${encodedDomain}`);openLink(payUrl); }}Copy the code

PC pay

Wechat Pay -Native Payment

define

Native payment is a mode in which the merchant system generates a qr code for payment according to the wechat payment agreement, and users complete the payment by “scanning” on wechat. This mode is suitable for PC website payment, physical store single product or order payment, media advertising payment and other scenarios.

Sequence diagram

Alipay payment – computer website payment

define

Users can complete the payment through the cashier desk of Alipay PC website, and the transaction funds will be directly remitted to the alipay account of the merchant, which will be transferred to the account in real time.

Sequence diagram

summary

  1. Alipay payment: PC terminal and H5 terminal are almost the same, both through the browser to evoke alipay platform;
  2. Wechat payment: THE PC side adopts the form of QR code scanning, H5 side evokes the wechat client through the browser;
  3. The H5 terminal also needs to consider the scenario in wechat browser, which requires JSAPI payment, namely the public account payment……

How about the next post