Web 支付

目前 Web 端支持一下支付方式：

当开发者调用支付接口后，需要通过查询支付订单状态来判断订单是否已经支付成功。

微信网页支付

BaaS.payment.payWithWechat(options)

Web 端微信支付支持三种支付方式：

  • 电脑端扫码支付（gatewayType: weixin_tenpay_native）
  • JSAPI 支付（微信客户端内置浏览器内使用）（gatewayType: weixin_tenpay_js）
  • 手机 H5 支付（gatewayType: weixin_tenpay_wap）

使用 JSAPI 支付时，需要先通过公众号登录（web 第三方登录，provider 为 oauth-wechat-mp），或通过已经关联了微信公众号登录用户的账号登录。

参数说明

参数类型必填参数描述
options.gatewayTypeStringY支付方式，weixin_tenpay_wap / weixin_tenpay_native / weixin_tenpay_js
options.totalCostNumberY支付总额，单位：元
options.merchandiseDescriptionStringY微信支付凭证-商品详情的内容
options.merchandiseSchemaIDIntegerN商品数据表 ID，可用于定位用户购买的物品
options.merchandiseRecordIDStringN商品数据行 ID，可用于定位用户购买的物品
merchandiseSnapshotObjectN根据业务需求自定义的数据
profitSharingBooleanN当前订单是否需要分账。分账操作，请查看微信直连商户分账

举例：开发者有一个 Article 表, 里面有免费 / 付费的文章, 当用户对一篇付费文章进行支付时, 则可以将 Article 表的 ID 作为 merchandiseSchemaID, 文章记录的 ID 作为你 merchandiseRecordID 传入到 BaaS.pay(object) 写进支付订单记录。当用户阅读此付费文章时, 则可以通过 merchandiseSchemaID, merchandiseRecordID 来查询用户是否付费。

返回参数说明

1、 JSAPI 支付：

参数类型说明
err_msgString错误信息
transaction_noString微信支付流水号
trade_noString微信支付交易 ID, 业务方在微信后台对账时可看到此字段

当支付取消或发生错误时，会抛出错误（HError 对象）

2、 其他：

参数类型说明
transaction_noString微信支付流水号
trade_noString微信支付交易 ID, 业务方在微信后台对账时可看到此字段
code_urlStringgatewayType="weixin_tenpay_native" 时返回，用于生成支付二维码
mweb_urlStringgatewayType="weixin_tenpay_wap"时返回，用户可通过访问该 url 来拉起微信客户端，完成支付

电脑端扫码支付时，开发者调用支付接口并成功获取到 code_url 后，需要将 code_url 转换为二维码。

示例代码

桌面端扫码支付:

  1. let params = {
  2.   gatewayType: 'weixin_tenpay_native',
  3.   totalCost: 0.1,
  4.   merchandiseDescription: '深蓝色秋裤'
  5. }
  7. BaaS.payment.payWithWechat(params).then(res => {
  8.   /**
  9.    * success.
  10.    * res.data.code_url 用来生成二维码
  11.    * res.data.trade_no 用来查询支付状态
  12.    */
  13. }, err => {
  14.   // 未完成用户授权或发生网络异常等
  15.   console.log(err)
  16. })

移动端 H5 支付:

  1. let params = {
  2.   gatewayType: 'weixin_tenpay_wap',
  3.   totalCost: 0.1,
  4.   merchandiseDescription: '深蓝色秋裤'
  5. }
  7. BaaS.payment.payWithWechat(params).then(res => {
  8.   /**
  9.    * success.
  10.    * res.data.mweb_url 用来跳转到支付页面
  11.    * res.data.trade_no 用来查询支付状态
  12.    */
  13. }, err => {
  14.   // 未完成用户授权或发生网络异常等
  15.   console.log(err)
  16. })

支付成功返回示例

桌面端扫码支付:

  1. {
  2.   code_url: 'wechat://***',
  3.   transaction_no: "MDUhtNmacdYBKokJbCXhvYuoJnHXzpeN",
  4.   trade_no: '4DySOWgNssfu5XsiTH9Ek2f5m9jWTwTw'
  5. }

移动端 H5 支付:

  1. {
  2.   mweb_url: 'https://***',
  3.   transaction_no: "MDUhtNmacdYBKokJbCXhvYuoJnHXzpeN",
  4.   trade_no: '4DySOWgNssfu5XsiTH9Ek2f5m9jWTwTw'
  5. }

支付宝网页支付

Web 端支付宝支付支持两种支付方式：

BaaS.payment.payWithAlipay(options)

  • 电脑端扫码支付（gatewayType: alipay_page）
  • 手机 H5 支付（gatewayType: alipay_wap）参数说明
参数类型必填参数描述
options.gatewayTypeStringY支付方式，alipay_page / alipay_wap
options.totalCostNumberY支付总额，单位：元
options.merchandiseDescriptionStringY支付宝支付凭证-商品详情的内容
options.merchandiseSchemaIDIntegerN商品数据表 ID，可用于定位用户购买的物品
options.merchandiseRecordIDStringN商品数据行 ID，可用于定位用户购买的物品
options.merchandiseSnapshotObjectN根据业务需求自定义的数据

举例：开发者有一个 Article 表, 里面有免费 / 付费的文章, 当用户对一篇付费文章进行支付时, 则可以将 Article 表的 ID 作为 merchandiseSchemaID, 文章记录的 ID 作为你 merchandiseRecordID 传入到 BaaS.pay(object) 写进支付订单记录。当用户阅读此付费文章时, 则可以通过 merchandiseSchemaID, merchandiseRecordID 来查询用户是否付费。

返回参数说明

参数类型说明
transaction_noString支付宝支付流水号
trade_noString支付宝支付交易 ID, 业务方在微信后台对账时可看到此字段
payment_urlString用户可通过访问该 url 来拉起支付宝支付收银台的中间页面，完成支付

示例代码

桌面端扫码支付:

  1. let params = {
  2.   gatewayType: 'alipay_page',
  3.   totalCost: 0.1,
  4.   merchandiseDescription: '深蓝色秋裤'
  5. }
  7. BaaS.payment.payWithAlipay(params).then(res => {
  8.   /**
  9.    * success.
  10.    * res.data.payment_url 用来跳转到支付页面
  11.    * res.data.trade_no 用来查询支付状态
  12.    */
  13. }, err => {
  14.   // 未完成用户授权或发生网络异常等
  15.   console.log(err)
  16. })

移动端 H5 支付:

  1. let params = {
  2.   gatewayType: 'alipay_wap',
  3.   totalCost: 0.1,
  4.   merchandiseDescription: '深蓝色秋裤'
  5. }
  7. BaaS.payment.payWithAlipay(params).then(res => {
  8.   /**
  9.    * success.
  10.    * res.data.payment_url 用来跳转到支付页面
  11.    * res.data.trade_no 用来查询支付状态
  12.    */
  13. }, err => {
  14.   // 未完成用户授权或发生网络异常等
  15.   console.log(err)
  16. })

支付成功返回示例

  1. {
  2.   payment_url: 'https://***',
  3.   transaction_no: "MDUhtNmacdYBKokJbCXhvYuoJnHXzpeN",
  4.   trade_no: '4DySOWgNssfu5XsiTH9Ek2f5m9jWTwTw'
  5. }

QQ 网页支付

Web 端 QQ 支付支持电脑端扫码支付：

BaaS.payment.payWithQQ(options)

参数说明

参数类型必填参数描述
options.gatewayTypeStringY支付方式，qpay_native
options.totalCostNumberY支付总额，单位：元
options.merchandiseDescriptionStringY支付宝支付凭证-商品详情的内容
options.merchandiseSchemaIDIntegerN商品数据表 ID，可用于定位用户购买的物品
options.merchandiseRecordIDStringN商品数据行 ID，可用于定位用户购买的物品
options.merchandiseSnapshotObjectN根据业务需求自定义的数据

举例：开发者有一个 Article 表, 里面有免费 / 付费的文章, 当用户对一篇付费文章进行支付时, 则可以将 Article 表的 ID 作为 merchandiseSchemaID, 文章记录的 ID 作为你 merchandiseRecordID 传入到 BaaS.pay(object) 写进支付订单记录。当用户阅读此付费文章时, 则可以通过 merchandiseSchemaID, merchandiseRecordID 来查询用户是否付费。

返回参数说明

参数类型说明
transaction_noStringQQ 支付流水号
trade_noStringQQ 支付交易 ID, 业务方在QQ 后台对账时可看到此字段
code_urlString用于生成支付二维码

开发者调用支付接口并成功获取到 code_url 后，需要将 code_url 转换为二维码。

示例代码

  1. let params = {
  2.   gatewayType: 'qpay_native',
  3.   totalCost: 0.1,
  4.   merchandiseDescription: '深蓝色秋裤'
  5. }
  7. BaaS.payment.payWithQQ(params).then(res => {
  8.   /**
  9.    * success.
  10.    * res.data.code_url 用于生成支付二维码
  11.    */
  12. }, err => {
  13.   // 未完成用户授权或发生网络异常等
  14.   console.log(err)
  15. })

支付成功返回示例

  1. {
  2.   code_url: 'https://***',
  3.   transaction_no: "MDUhtNmacdYBKokJbCXhvYuoJnHXzpeN",
  4.   trade_no: '4DySOWgNssfu5XsiTH9Ek2f5m9jWTwTw'
  5. }