小程序Webview支付功能实现

在当前的小程序项目中，我们需要将客户原有的H5页面嵌入到小程序中，并且确保支付功能能够正常运作。尽管小程序提供了webview的开放能力，但直接在webview中调用微信支付是不被允许的。因此，我们需要寻找其他解决方案。今天，我们就来探讨如何在小程序的webview中实现微信支付。

由于webview本身不支持支付操作，我们只能将H5页面的支付功能迁移到小程序中。具体来说，就是将支付所需的参数传递给小程序，然后由小程序调用原生支付功能。这里分为两种情况：同一主体和非同一主体。

♻️

1. 同主体

👹

适用场景：同一主体的H5页面

▶️

前置条件：商户号已与小程序绑定

🍪

流程：H5页面获取支付所需参数，传递给小程序，小程序内进行支付调用。

2. 非同一主体

🪓

适用场景：第三方商品

⏫

前置条件：商户号已与小程序绑定

🗂️

原理：由于第三方商品是嵌入第三方页面，需要传递当前小程序的appid，结合第三方商户号等信息，调用微信统一下单接口，获取支付所需参数。小程序内发起支付。

接下来是代码实现部分，需要在webview的src中配置网页链接，并通过get方式传递参数。h5页面可以直接从url中获取这些参数，具体操作不再赘述。获取参数后，可以处理其他逻辑，但关键在于（需要后端配合），生成的支付参数需按照小程序的方式格式化。

拿到参数后，只需重新打开小程序页面即可，打开方式如下。为了保险起见，我们使用encodeURIComponent函数进行编码，这样可以通过打开小程序的方式，在小程序对应页面中接收参数并调用支付。注意：在小程序页面中，记得使用decodeURIComponent进行解码。

非同一主体的流程与同主体类似，只是在调用webview时，需要一同传递当前小程序的appid，生成的支付参数也要使用传递过去的appid生成，以确保在当前小程序中完成支付。这些都是我们一步步调通并成功上线的项目经验，如有疑问，欢迎留言交流。