Payment模块管理支付功能，用于提供网页安全支付能力，支持通过Web接口进行支付操作。通过plus.payment可获取支付管理对象

最新推荐文章于 2024-06-07 08:31:27 发布

原创

最新推荐文章于 2024-06-07 08:31:27 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

支付接口可使得网页开发人员能获取浏览器支持的支付渠道进行支付操作，而不需要安装额外的浏览器支付插件。规范不定义支付渠道安全认证及支付操作通讯协议，由运行环境的支付模块根据支付服务器接入规范实现。

方法：

getChannels: 获取支付通道
request: 请求支付操作

对象：

PaymentChannel: 支付通道对象
OrderStatementIAP: IAP订单数据对象
PaymentResult: 支付操作结果对象
IAPProduct: IAP商品对象
IAPProductInfo: 购买IAP商品对象
IAPTransaction: 购买IAP商品交易信息对象

回调方法：

ChannelsSuccessCallback: 获取支付通道成功回调
IapRequestOrderSuccessCallback: 请求支付商品列表回调方法
IapRestoreComplateRequestCallback: 请求已经购买的非消耗性商品和订阅商品回调方法
IapPaymentSuccessCallback: IAP支付操作成功回调
PaymentSuccessCallback: 支付操作成功回调
PaymentErrorCallback: 支付操作失败回调

权限：

permissions

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#ffffff">{</span>
<span style="color:#87ceeb">// ...</span>
<span style="color:#ffa0a0">"permissions"</span><span style="color:#ffffff">:{</span>
	<span style="color:#87ceeb">// ...</span>
	<span style="color:#ffa0a0">"Payment"</span><span style="color:#ffffff">:</span> <span style="color:#ffffff">{</span>
		<span style="color:#ffa0a0">"description"</span><span style="color:#ffffff">:</span> <span style="color:#ffa0a0">"支付"</span>
	<span style="color:#ffffff">}</span>
<span style="color:#ffffff">}</span>
<span style="color:#ffffff">}</span>
			</code></span></span>

getChannels

获取支付通道

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">payment</span><span style="color:#ffffff">.</span><span style="color:#ffffff">getChannels</span><span style="color:#ffffff">(</span><span style="color:#ffffff">successCB</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> errorCB</span><span style="color:#ffffff">);</span>
				</code></span></span>

说明：

在进行支付操作前需获取终端支持的支付通道列表，用于提示用户进行选择。获取支付通道成功后通过successCB回调返回支持的所有通道列表，获取支付通道列表失败则通过errorCB回调返回。

参数：

successCB: ( ChannelsSuccessCallback ) 必选 获取支付通道成功回调函数
获取支付通道列表成功时的回调函数，用于返回终端支持的支付通道列表。
errorCB: ( PaymentErrorCallback ) 可选 获取支付通道失败回调函数
获取支付通道列表失败时的回调函数，用于返回错误信息。

返回值：

void : 无

平台支持：

Android - 2.2+ (支持)
iOS - 5.0+ (支持)

示例：

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#cccccc"><!DOCTYPE html></span>
<span style="color:#f0e68c"><strong><html></strong></span>
	<span style="color:#f0e68c"><strong><head></strong></span>
	<span style="color:#f0e68c"><strong><meta</strong></span> <span style="color:#bdb76b"><strong>charset</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"utf-8"</span><span style="color:#f0e68c"><strong>/></strong></span>
	<span style="color:#f0e68c"><strong><meta</strong></span> <span style="color:#bdb76b"><strong>name</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"viewport"</span> <span style="color:#bdb76b"><strong>content</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"initial-scale=1.0, maximum-scale=1.0, user-scalable=no"</span><span style="color:#f0e68c"><strong>/></strong></span>
	<span style="color:#f0e68c"><strong><title></strong></span><span style="color:#ffffff">Payment Example</span><span style="color:#f0e68c"><strong></title></strong></span>
	<span style="color:#f0e68c"><strong><script</strong></span> <span style="color:#bdb76b"><strong>type</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"text/javascript"</span><span style="color:#f0e68c"><strong>></strong></span>
<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> channels</span><span style="color:#ffffff">=</span><span style="color:#f0e68c"><strong>null</strong></span><span style="color:#ffffff">;</span>
<span style="color:#87ceeb">// 监听plusready事件  </span><span style="color:#ffffff">
document</span><span style="color:#ffffff">.</span><span style="color:#ffffff">addEventListener</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">"plusready"</span><span style="color:#ffffff">,</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(){</span>
	<span style="color:#87ceeb">// 扩展API加载完毕，现在可以正常调用扩展API</span><span style="color:#ffffff">
	plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">payment</span><span style="color:#ffffff">.</span><span style="color:#ffffff">getChannels</span><span style="color:#ffffff">(</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">s</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
		channels </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> s</span><span style="color:#ffffff">;</span>
	<span style="color:#ffffff">},</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
		alert</span><span style="color:#ffffff">(</span> <span style="color:#ffa0a0">"获取支付通道列表失败："</span><span style="color:#ffffff">+</span><span style="color:#ffffff">e</span><span style="color:#ffffff">.</span><span style="color:#ffffff">message </span><span style="color:#ffffff">);</span>
	<span style="color:#ffffff">});</span>
<span style="color:#ffffff">},</span> <span style="color:#f0e68c"><strong>false</strong></span> <span style="color:#ffffff">);</span>
	<span style="color:#f0e68c"><strong></script></strong></span>
	<span style="color:#f0e68c"><strong></head></strong></span>
	<span style="color:#f0e68c"><strong><body></strong></span>
	<span style="color:#f0e68c"><strong></body></strong></span>
<span style="color:#f0e68c"><strong></html></strong></span>
				</code></span></span>

uni-app使用plus注意事项

request

请求支付操作

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">payment</span><span style="color:#ffffff">.</span><span style="color:#ffffff">request</span><span style="color:#ffffff">(</span><span style="color:#ffffff">channel</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> statement</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> successCB</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> errorCB</span><span style="color:#ffffff">);</span>
				</code></span></span>

说明：

调用指定的支付通道进行支付操作，其中statement包含支付操作的相关信息，支付模块将弹出支付界面供用户进行支付信息的输入确认操作。用户支付操作成功后通过successCB回调返回支付操作结果，支付操作失败则通过errorCB回调返回。

参数：

channel: ( PaymentChannel ) 必选 支付通道
指定支付操作的通道，通过getChannels接口获取。
statement: ( String | JSON | OrderStatementIAP ) 必选 支付订单信息
支付订单信息，由支付通道定义的数据格式，通常是由业务服务器生成或向支付服务器获取，是经过加密的字符串信息。
successCB: ( PaymentSuccessCallback | IapPaymentSuccessCallback ) 可选 请求支付成功回调函数
请求支付成功时触发，用于返回支付结果。
errorCB: ( PaymentErrorCallback ) 可选 请求支付失败回调函数
请求支付失败时触发，用于返回错误信息。

返回值：

void : 无

平台支持：

Android - 2.2+ (支持)
iOS - 5.0+ (支持)

示例：

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#cccccc"><!DOCTYPE html></span>
<span style="color:#f0e68c"><strong><html></strong></span>
	<span style="color:#f0e68c"><strong><head></strong></span>
	<span style="color:#f0e68c"><strong><meta</strong></span> <span style="color:#bdb76b"><strong>charset</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"utf-8"</span><span style="color:#f0e68c"><strong>/></strong></span>
	<span style="color:#f0e68c"><strong><meta</strong></span> <span style="color:#bdb76b"><strong>name</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"viewport"</span> <span style="color:#bdb76b"><strong>content</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"initial-scale=1.0, maximum-scale=1.0, user-scalable=no"</span><span style="color:#f0e68c"><strong>/></strong></span>
	<span style="color:#f0e68c"><strong><title></strong></span><span style="color:#ffffff">Payment Example</span><span style="color:#f0e68c"><strong></title></strong></span>
	<span style="color:#f0e68c"><strong><script</strong></span> <span style="color:#bdb76b"><strong>type</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"text/javascript"</span><span style="color:#f0e68c"><strong>></strong></span>
<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> channels</span><span style="color:#ffffff">=</span><span style="color:#f0e68c"><strong>null</strong></span><span style="color:#ffffff">;</span>
<span style="color:#87ceeb">// 监听plusready事件  </span><span style="color:#ffffff">
document</span><span style="color:#ffffff">.</span><span style="color:#ffffff">addEventListener</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">"plusready"</span><span style="color:#ffffff">,</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(){</span>
	<span style="color:#87ceeb">// 扩展API加载完毕，现在可以正常调用扩展API</span><span style="color:#ffffff">
	plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">payment</span><span style="color:#ffffff">.</span><span style="color:#ffffff">getChannels</span><span style="color:#ffffff">(</span><span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">s</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
		channels </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> s</span><span style="color:#ffffff">;</span>
	<span style="color:#ffffff">},</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
		alert</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">"获取支付通道列表失败："</span><span style="color:#ffffff">+</span><span style="color:#ffffff">e</span><span style="color:#ffffff">.</span><span style="color:#ffffff">message</span><span style="color:#ffffff">);</span>
	<span style="color:#ffffff">});</span>
<span style="color:#ffffff">},</span> <span style="color:#f0e68c"><strong>false</strong></span> <span style="color:#ffffff">);</span>
<span style="color:#87ceeb">// 请求支付操作</span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> requestPay</span><span style="color:#ffffff">(</span><span style="color:#ffffff">c</span><span style="color:#ffffff">){</span>
	<span style="color:#87ceeb">// 必须从业务服务器获取支付信息</span>
	<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> statement </span><span style="color:#ffffff">=</span> <span style="color:#ffa0a0">"..."</span><span style="color:#ffffff">;</span><span style="color:#ffffff">
	plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">payment</span><span style="color:#ffffff">.</span><span style="color:#ffffff">request</span><span style="color:#ffffff">(</span><span style="color:#ffffff">c</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> statement</span><span style="color:#ffffff">,</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(){</span><span style="color:#ffffff">
		alert</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">"支付操作成功！"</span><span style="color:#ffffff">);</span>
	<span style="color:#ffffff">},</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
		alert</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">"支付失败："</span><span style="color:#ffffff">+</span><span style="color:#ffffff">e</span><span style="color:#ffffff">