uniapp 支付（vx、zfb、app、内嵌H5）

最新推荐文章于 2025-02-23 17:41:34 发布

蠢北

最新推荐文章于 2025-02-23 17:41:34 发布

阅读量405

点赞数

分类专栏： uniapp 文章标签：微信 uni-app 微信小程序

本文链接：https://blog.csdn.net/qq_60485359/article/details/129195370

版权

uniapp 专栏收录该内容

6 篇文章

订阅专栏

本人在做商城项目，需要多种支付方式，在这里记录一下，小白学习，勿喷

在项目路径下创建 common文件夹（随你起什么名），新建js文件 payment.js

/**
 * 支付相关方法
 */

/**
 * 微信小程序支付
 * @param {function} paymentParams 支付参数
 * @param {function} paySuccess 支付成功回调
 * @param {function} payFail 支付失败回调
 */
export function wechatMiniPay(paymentParams,paySuccess,payFail) {
    uni.requestPayment({
        provider: 'wxpay',//支付类型-固定值
        timeStamp: paymentParams.timeStamp,// 时间戳（单位：秒）
        nonceStr: paymentParams.nonceStr,// 随机字符串
        package: paymentParams.package,// 固定值
        signType: paymentParams.signType,//固定值
        paySign: paymentParams.paySign,//签名
        success(res) {
            paySuccess(res)
        },
        fail: function (err) {
            payFail(err)
        }
    })
}



/**
 * 微信App支付
 * @param {function} paymentParams 支付参数
 * @param {function} paySuccess 支付成功回调
 * @param {function} payFail 支付失败回调
 */
export function wechatAppPay(orderInfo,paySuccess,payFail) {
    uni.requestPayment({
        provider: 'wxpay',
        orderInfo:orderInfo,
        success(res) {
            paySuccess(res)
        },
        fail: function (err) {
            payFail(err)
        }
    })
}



/**
 * 手机浏览器h5支付
 * @param {Object} paymentParams
 * @param {Object} paySuccess
 * @param {Object} payFail
 */
export function mobileH5Pay(response,paySuccess,payFail) {
    location.href = response.gateway_url

}
/**
 * 微信内嵌h5支付
 * @param {Object} paymentParams
 * @param {Object} paySuccess
 * @param {Object} payFail
 */
export function wechatH5Pay(paymentParams,paySuccess,payFail) {
       WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
             "appId":paymentParams.appId,     //公众号名称，由商户传入
             "timeStamp":paymentParams.timeStamp,        //时间戳，自1970年以来的秒数
             "nonceStr":paymentParams.nonceStr, //随机串
             "package":paymentParams.package,
             "signType": paymentParams.signType,        //微信签名方式
             "paySign":paymentParams.paySign //微信签名
          },
          function(res){
            paySuccess(res)
            if(res.err_msg == "get_brand_wcpay_request:ok" ){

            }
       });
}

/**
 * 支付宝H5支付
 * 在
 * @param {Object} paymentParams
 * @param {Object} paySuccess
 * @param {Object} payFail
 */
export function aliPayH5(response,paySuccess,payFail) {
    let $formItems = ''

    if(response.form_items){
        response.form_items.forEach(item => {
          $formItems += `<input name="${item.item_name}" type="hidden" value='${item.item_value}' />`
        })
    }
    let $form = `<form action="${response.gateway_url}" method="post">${$formItems}</form>`
    document.getElementsByClassName('__pay_form__')[0].innerHTML = $form
    document.forms[0].submit()

}

export function aliPayApp(response,paySuccess,payFail) {
    uni.requestPayment({
        provider: 'alipay',
        orderInfo: response.gateway_url, //支付宝订单数据
        success: function (res) {
            paySuccess()
        },
        fail: function (err) {
            console.log('fail:' + JSON.stringify(err));
        }
    });
}

在需要调用支付的页面引入

import * as Payment from '@/common/payment.js'

Payment.wechatH5Pay(response, this.payCallback, this.payFail)