ahksdjkl 2019-03-29 09:45 采纳率: 0%
浏览 2265

小程序内嵌商户H5支付问题

箱子啊小程序内嵌商户的商品详情界面，通过进入小程序点击商户的H5页面URL进到相应商品页面进行购买，麻烦问一下这种方式的话H5唤起小程序支付在商户服务端传出小程序支付所需参数嘛？

  • 写回答

1条回答 默认 最新

  • 一只小爪磕 新星创作者: 前端开发技术领域 2024-06-17 23:56
    关注

    您好题主！
    本答案参考GPT-4o，由爪磕整理并总结，希望对您有所帮助！

    在微信小程序中嵌入商户的H5页面并进行支付操作，涉及到小程序和H5页面的交互。要实现这种交互，需要了解一些关键步骤和技术细节。以下是一个简要的指导，帮助你实现这种方式的支付流程。

    1. 基本思路

    1. 用户在小程序中点击商品链接，打开商户的H5页面。
    2. 用户在H5页面上选择商品并发起支付操作。
    3. H5页面唤起小程序支付接口，通过商户服务端获取支付参数。
    4. 小程序调用微信支付接口完成支付。

    2. 获取支付参数

    在商户的H5页面中，当用户发起支付操作时，需要从商户的服务器获取微信小程序支付所需的参数。通常，这些参数包括 appId, timeStamp, nonceStr, package, signType, paySign 等。商户的服务器需要调用微信支付的统一下单接口（unifiedorder），并指定交易类型为 JSAPI。

    3. H5页面唤起小程序支付

    在H5页面中，可以通过 wx.miniProgram.getEnv 判断当前环境是否在小程序中，并通过 wx.miniProgram.navigateTo 跳转到小程序内的支付页面，并传递支付参数。

    4. 小程序内调用支付接口

    在小程序接收到支付参数后，使用 wx.requestPayment 接口发起支付。

    具体实现步骤

    1. H5 页面代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H5 Payment</title>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
    <button id="payButton">支付</button>

    <script>
        document.getElementById('payButton').addEventListener('click', function() {
            // 获取支付参数
            fetch('/getPaymentParams', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    orderId: '12345' // 订单ID，根据实际情况传递
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 判断当前环境是否在小程序中
                    if (typeof wx !== 'undefined' && wx.miniProgram) {
                        wx.miniProgram.navigateTo({
                            url: `/pages/payment/payment?params=${encodeURIComponent(JSON.stringify(data.params))}`
                        });
                    } else {
                        alert('请在微信小程序中打开此页面');
                    }
                } else {
                    alert('获取支付参数失败');
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        });
    </script>
</body>
</html>

    2. 小程序页面代码

    首先，在小程序的 app.js 中初始化微信JS-SDK：

    App({
    onLaunch: function () {
        wx.login({
            success: res => {
                // 发送 res.code 到后台换取 openId, sessionKey, unionId
            }
        });
    }
});

    在小程序的支付页面中接收支付参数并发起支付：

    // pages/payment/payment.js
Page({
    onLoad: function (options) {
        const params = JSON.parse(decodeURIComponent(options.params));
        this.setData({
            paymentParams: params
        });
    },
    onShow: function () {
        const params = this.data.paymentParams;
        wx.requestPayment({
            timeStamp: params.timeStamp,
            nonceStr: params.nonceStr,
            package: params.package,
            signType: params.signType,
            paySign: params.paySign,
            success(res) {
                console.log('支付成功', res);
            },
            fail(res) {
                console.log('支付失败', res);
            }
        });
    }
});
    评论

报告相同问题？