Web 支付

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

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

微信网页支付

BaaS.payment.payWithWechat(options)

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

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

使用 JSAPI 支付时,需要先通过公众号登录(web 第三方登录provideroauth-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. }
  6. BaaS.payment.payWithWechat(params).then(res => {
  7. /**
  8. * success.
  9. * res.data.code_url 用来生成二维码
  10. * res.data.trade_no 用来查询支付状态
  11. */
  12. }, err => {
  13. // 未完成用户授权或发生网络异常等
  14. console.log(err)
  15. })

移动端 H5 支付:

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

支付成功返回示例

桌面端扫码支付:

  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. }
  6. BaaS.payment.payWithAlipay(params).then(res => {
  7. /**
  8. * success.
  9. * res.data.payment_url 用来跳转到支付页面
  10. * res.data.trade_no 用来查询支付状态
  11. */
  12. }, err => {
  13. // 未完成用户授权或发生网络异常等
  14. console.log(err)
  15. })

移动端 H5 支付:

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

支付成功返回示例

  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. }
  6. BaaS.payment.payWithQQ(params).then(res => {
  7. /**
  8. * success.
  9. * res.data.code_url 用于生成支付二维码
  10. */
  11. }, err => {
  12. // 未完成用户授权或发生网络异常等
  13. console.log(err)
  14. })

支付成功返回示例

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