实现PC端微信扫码native支付功能

目录

实现PC端微信扫码

简介

实现步骤

示例代码

Native支付

简介

应用场景

【客户端】生成支付二维码

常见问题 

Vue中qrcode的使用方法

1.下载

2.引入（在所需要的页面中引入）

3.生成二维码

---

实现PC端微信扫码

在本文中，我们将讨论如何在PC端实现微信扫码native支付功能，并提供代码案例和qrcode的使用方法

简介

微信扫码native支付是一种方便快捷的支付方式，用户只需使用微信扫描二维码即可完成支付操作。对于开发者来说，实现微信扫码native支付可以为PC端应用添加更多支付选择，提高用户体验。

实现步骤

以下是实现微信扫码native支付的步骤：

1. 获取商户号

首先，您需要拥有一个微信支付商户号。如果没有，请注册一个商户账号并申请商户号。

2. 生成支付二维码

在PC端应用中，您可以使用qrcode库生成支付二维码。这个库可以帮助您生成包含支付信息的二维码。

3. 监听支付结果

用户扫描二维码完成支付后，您需要监听支付结果。为了实现跳转到支付结果页面等功能，您可以使用回调函数或事件监听器。

4.处理支付回调

您可以在接收到支付回调后执行相应的后续处理，例如更新订单状态或通知用户支付结果。

示例代码

下面是整理后的示例代码：

const openDialog = async () => {
  let result = await reqQrcode(route.query.orderId as string);
  
  await generatePaymentQRCode(result.data.codeUrl);

  dialogVisible.value = true;

  let timer = setInterval(async () => {
      let result = await reqQueryPayState(route.query.orderId as string);
      if (result.data) {
          dialogVisible.value = false;
          ElMessage({
              type: "success",
              message: "支付成功",
          });
          clearInterval(timer);
          getOrderInfo();
      }
  }, 2000);

};

Native支付

产品介绍 - Native支付 | 微信支付服务商文档中心https://pay.weixin.qq.com/docs/partner/products/partner-native-payment/introduction.html

1. 商户后台系统根据用户选购的商品生成订单。
2. 用户确认支付后调用微信支付【Native下单API】生成预支付交易。
3. 微信支付系统收到请求后生成预支付交易单，并返回交易会话的二维码链接code_url。
4. 商户后台系统根据返回的code_url生成二维码。
5. 用户打开微信“扫一扫”扫描二维码，微信客户端将扫码内容发送到微信支付系统。
6. 微信支付系统收到客户端请求，验证链接有效性后发起用户支付，要求用户授权。
7. 用户在微信客户端输入密码，确认支付后，微信客户端提交授权。
8. 微信支付系统根据用户授权完成支付交易。
9. 微信支付系统完成支付交易后给微信客户端返回交易结果，并将交易结果通过短信、微信消息提示用户。微信客户端展示支付交易结果页面。
10. 微信支付系统通过发送异步消息通知商户后台系统支付结果。商户后台系统需回复接收情况，通知微信后台系统不再发送该单的支付通知。
11. 未收到支付通知的情况，商户后台系统调用【查询订单API】。
12. 商户确认订单已支付后给用户发货。

简介

Native支付是指商户系统按微信支付协议生成支付二维码，用户再用微信“扫一扫”完成支付的模式。

应用场景

Native支付适用于PC网站、实体店单品或订单、媒体广告支付等场景

用户扫描商户展示在各种场景的二维码进行支付，具体操作流程如下：

步骤一 商户根据微信支付的规则，为不同商品生成不同的二维码（如图3.1），展示在各种场景，用于用户扫描购买。

步骤二 商户根据微信支付的规则，为不同商品生成不同的二维码（如图3.1），展示在各种场景，用于用户扫描购买。

步骤三 用户确认支付，输入支付密码（如图3.4）。

步骤四 支付完成后会提示用户支付成功（如图3.5），商户后台得到支付成功的通知，然后进行发货处理。

【客户端】生成支付二维码

步骤说明： 通过Native下单API成功获取**支付二维码链接（code_url）**后，需要在前端（PC网页或POS机具）生成二维码供用户扫描支付。

 注意

code_url对应链接格式：weixin：//weixin://pay.weixin.qq.com/bizpayurl/up?pr=NwY5Mz9&groupid=00。请商户调用第三方库将code_url生成二维码图片。该模式链接较短，生成的二维码打印到结账小票上的识别率较高。

例如，weixin：//weixin://pay.weixin.qq.com/bizpayurl/up?pr=NwY5Mz9&groupid=00 生成二维码见下图。

常见问题 

#Q：微信native支付生成的二维码有有效期吗?

A：一个二维码的有效期是根据Native下单接口返回的code_url决定，code_url的有效期是2小时。

#Q：native支付扫码后提示：支付失败，该商户暂不支持通过长按识别二维码完成支付

A：微信支付已经不支持通过长按识别二维码的方式或通过相册识别二维码的方式完成支付。

Vue中qrcode的使用方法
 

1.下载

npm install qrcode --save-dev

2.引入（在所需要的页面中引入）

​import QRCode from “qrcode”; //引入生成二维码插件

3.生成二维码

<template>
  <div>
    <canvas id="QRCode_header" style="width: 280px; height: 280px"></canvas>
 
  </div>
</template>
 
<script>
import QRCode from "qrcode"; //引入生成二维码插件
export default {
  props: [""],
  data() {
    return {
      qrUrl: location.href,
    };
  },
  watch: {},
  mounted() {
    this.getQRCode();
  },
  created() {},
  methods: {
    getQRCode() {  
    //生成的二维码为URL地址js
    this.qrUrl= "https://www.baidu.com/";
      let opts = {
        errorCorrectionLevel: "H", //容错级别
        type: "image/png", //生成的二维码类型
        quality: 0.3, //二维码质量
        margin: 0, //二维码留白边距
        width: 280, //宽
        height: 280, //高
        text: "https://www.baidu.com/", //二维码内容
        color: {
          dark: "#333333", //前景色
          light: "#fff", //背景色
        },
      };
      
      let msg = document.getElementById("QRCode_header");
      // 将获取到的数据（val）画到msg（canvas）上
      QRCode.toCanvas(msg, this.qrUrl, opts, function (error) {
        if (error) {
          console.log("二维码加载失败", error);
          this.$message.error("二维码加载失败");
        }
      });
    },
  },
};
</script>
 
<style>
 
</style>