• 前端如何使用微信支付


    一、h5页面支付

    h5页面接入微信支付分为两种情况,一种微信内置浏览器调用支付,另一种是在外置浏览器调用支付

    内置浏览器支付

    内置浏览器支付使用JSAPI支付

    前端调用代码

    1. wx.chooseWXPay({
    2. timestamp: 0, // 支付签名时间戳,注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
    3. nonceStr: '', // 支付签名随机串,不长于 32 位
    4. package: '', // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
    5. signType: '', // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
    6. paySign: '', // 支付签名
    7. success: function (res) {
    8. // 支付成功后的回调函数
    9. }
    10. });

    JSAPI支付-产品介绍 | 微信支付商户平台文档中心

    外置浏览器支付

    外置浏览器使用h5支付,要求商户已有H5商城网站,并且已经过ICP备案,即可申请接入

    介绍:H5支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发起本服务呼起微信客户端进行支付。

    1.用户使用微信外部的浏览器访问商户H5页面,当用户选择相关商品购买时,商户系统先调用该接口在微信支付服务后台生成预支付交易单。

    2.微信外部的浏览器拉起微信支付中间页,通过H5下单API成功获取H5下单返回的支付中间页(h5_url)后,用户需要通过微信外部的浏览器调起微信支付收银台

    3.当用户完成支付,微信会把相关支付结果将通过异步回调的方式通知商户,商户需要接收处理,并按文档规范返回应答

    产品介绍-H5支付 | 微信支付商户平台文档中心

    二、pc端支付

    Native支付:商家在系统中按微信支付协议生成支付二维码,用户扫码拉起微信收银台,确认并完成付款。

    前端只需要对接后端接口获取code_url,把code_url转换成二维码即可

    三、小程序支付

    商户已有微信小程序,用户通过好友分享或扫描二维码在微信内打开小程序时,可以调用微信支付完成下单购买的流程。

    注意:小程序不能通过拉起H5页面做jsapi支付,小程序内只能使用小程序支付

    uniapp前端代码

    1. uni.requestPayment({
    2. "provider": "wxpay",
    3. "orderInfo": {
    4. "appid": "wx499********7c70e", // 微信开放平台 - 应用 - AppId,注意和微信小程序、公众号 AppId 可能不一致
    5. "noncestr": "c5sEwbaNPiXAF3iv", // 随机字符串
    6. "package": "Sign=WXPay", // 固定值
    7. "partnerid": "148*****52", // 微信支付商户号
    8. "prepayid": "wx202254********************fbe90000", // 统一下单订单号
    9. "timestamp": 1597935292, // 时间戳(单位:秒)
    10. "sign": "A842B45937F6EFF60DEC7A2EAA52D5A0" // 签名,这里用的 MD5/RSA 签名
    11. },
    12. success(res) {},
    13. fail(e) {}
    14. })

    微信原生

    wx.requestPayment(Object object) | 微信开放文档

    1. wx.requestPayment({
    2. timeStamp: '',
    3. nonceStr: '',
    4. package: '',
    5. signType: 'MD5',
    6. paySign: '',
    7. success (res) { },
    8. fail (res) { }
    9. })

    产品介绍-小程序支付 | 微信支付商户平台文档中心

  • 相关阅读:
    【513. 找树左下角的值】
    【计算机视觉 | 目标检测】术语理解9:AIGC的理解,对比学习,解码器,Mask解码器,耦合蒸馏,半耦合,图像编码器和组合解码器的耦合优化
    DBeaver manual
    [C++随笔录] vector模拟实现
    组合模式 rust和java的实现
    文件操作之文件系统
    1.4.25 实验25:华为高级ACL
    [0基础]如何搭建一个cs2d的服务器
    微信支付及支付回调
    【Qt】使用Qt实现Web服务器(二):QtWebApp示例源码
  • 原文地址:https://blog.csdn.net/HYQ_java/article/details/125168927