How to make WeChat scan code payment in uniapp

Uniapp is a cross-platform development framework that can be used to develop iOS, Android and Web applications. When developing WeChat applet or application, you need to add WeChat payment function. This article will introduce how to implement WeChat scan code payment in uniapp.

1. Apply for WeChat Payment

First of all, you need to register and apply for WeChat Payment. For the application process, please refer to the official WeChat Payment document. After successful application, you can obtain various certificates, keys and other information necessary for WeChat payment.

2. Install the uni-pay plug-in

In uniapp, you need to install the uni-pay plug-in to use the WeChat payment function. Open HBuildX, select the plug-in market, search and select the uni-pay plug-in to install.

3. Create a payment request

On the page where payment is required, add a payment button. When the payment button is clicked, a request is sent to the server, the payment parameters are obtained, the payment QR code is generated and displayed to on the page. The code example is as follows:

uni.request({
  url: 'https://api.example.com/pay.php',
  data: {
    // 微信支付必需参数
    appid: 'wx8888888888888888', // 公众账号ID
    mch_id: '1900007811', // 商户号
    body: '商品名称', // 商品描述
    out_trade_no: '202001010101', // 商户订单号
    total_fee: 88, // 总金额
    spbill_create_ip: '127.0.0.1', // 终端IP
    notify_url: 'https://api.example.com/notify.php', // 通知地址
    trade_type: 'NATIVE' // 交易类型
  },
  success: function(res) {
    // 生成二维码
    let imageUrl = res.data.code_url;
    // 将imageUrl放到<image src="{{ imageUrl }}"></image> 标签中
  }
})

4. Payment result notification

When the user scans the payment QR code and completes the payment, he or she will receive a payment result notification. On the server side, it is necessary to develop an interface for receiving payment result notifications, verify the validity of the received notifications, and update the order status. The code example is as follows:

$input_data = file_get_contents("php://input");
$data = json_decode($input_data, true);
if (isset($data['transaction_id'])) {
  // 支付成功
  // 更新订单状态
  // 返回通知
  echo json_encode([
    'return_code' => 'SUCCESS',
    'return_msg' => 'OK'
  ]);
} else {
  // 支付失败
}

5. Summary

The above is the basic process of implementing WeChat scan code payment in uniapp. It should be noted that the WeChat payment interface involves sensitive information, so data security needs to be ensured during development. In order to prevent problems such as repeated submissions, some processing logic needs to be added to the payment page. Through the above steps, developers can quickly and easily implement the WeChat QR code payment function in uniapp.

The above is the detailed content of How to make WeChat scan code payment in uniapp. For more information, please follow other related articles on the PHP Chinese website!