vue对接微信支付 后端用 php

  来源: https://www.lllomh.com/

在Vue项目中对接微信支付，需要后端使用PHP语言编写相关接口。本文将详细介绍如何在Vue项目中对接微信支付，并提供后端接口的完整代码。

1. 准备工作首先需要在微信支付官网上注册并开通商户号，获得相关支付API密钥和商户号等信息。

1. Vue项目中的实现在Vue项目中使用vue-resource插件发送HTTP请求，获取微信支付所需的支付信息，包括订单号、总金额等。

import VueResource from 'vue-resource';

Vue.use(VueResource);

// 获取微信支付所需的支付信息
this.$http.post('/api/getWxPayParams', {
    order_id: orderId,
    total_fee: totalFee,
}).then(response => {
    const data = response.data;
    // ...
}, response => {
    console.log('获取支付信息失败');
});

在获取到支付信息后，使用微信支付API进行支付。其中，需要调用微信支付JSAPI的wx.chooseWXPay方法进行支付：

// 调用微信支付JSAPI
wx.chooseWXPay({
    appId: data.app_id,
    timestamp: data.timeStamp,
    nonceStr: data.nonce_str,
    package: data.package,
    signType: 'MD5',
    paySign: data.paySign,
    success: function (res) {
        console.log('支付成功');
        // ...
    },
    fail: function (res) {
        console.log('支付失败');
        // ...
    }
});

1. 后端接口实现使用PHP语言编写后端接口，实现获取微信支付所需的支付信息和支付成功后的回调函数。

获取微信支付所需的支付信息：

<?php
// 获取微信支付所需的支付信息
$app_id = '微信公众号appid';
$mch_id = '商户号';
$key = 'API密钥';

$order_id = $_POST['order_id'];
$total_fee = $_POST['total_fee'] * 100; // 单位：分

$nonce_str = md5(rand(0, 1000));
$timestamp = time();
$ip = $_SERVER['REMOTE_ADDR'];

$params = [
    'appid' => $app_id,
    'mch_id' => $mch_id,
    'nonce_str' => $nonce_str,
    'body' => '订单支付',
    'out_trade_no' => $order_id,
    'total_fee' => $total_fee,
    'spbill_create_ip' => $ip,
    'notify_url' => 'http://example.com/api/wxPayNotify',
    'trade_type' => 'JSAPI',
    'openid' => '用户的openid'
];

ksort($params);

$str = '';
foreach ($params as $key => $value) {
    $str .= $key . '=' . $value . '&';
}

$str .= 'key=' . $key;
$sign = strtoupper(md5($str));

$params['sign'] = $sign;
$params['timestamp'] = $timestamp;

$xml = '<xml>';
foreach ($params as $key => $value) {
    $xml .= '<' . $key . '>' . $value . '</' . $key . '>';
}
$xml .= '</

来源: My Blog