# 网页微信、支付宝、QQ 支付

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

1. [微信网页支付](#微信网页支付)
2. [支付宝网页支付](#支付宝网页支付)
3. [QQ 网页支付](#qq-网页支付)

**客户端支付结果判断：**

当开发者调用支付接口后，需要通过[查询支付订单](/baas-js-sdk/js-sdk/payment/order.md)状态来判断订单是否已经支付成功。

## 微信网页支付

`BaaS.payment.payWithWechat(options)`

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

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

> **info** 使用 JSAPI 支付时，需要先通过公众号登录（[web 第三方登录](/baas-js-sdk/js-sdk/web/signin-signout.md)，`provider` 为 `oauth-wechat-mp`）， 或通过已经关联了微信公众号登录用户的账号登录。

**参数说明**

| 参数                             | 类型      | 必填 | 参数描述                                                                                                                                 |
| ------------------------------ | ------- | -- | ------------------------------------------------------------------------------------------------------------------------------------ |
| options.gatewayType            | String  | Y  | 支付方式，`weixin_tenpay_wap` / `weixin_tenpay_native` / `weixin_tenpay_js`                                                               |
| options.totalCost              | Number  | Y  | 支付总额，单位：元                                                                                                                            |
| options.merchandiseDescription | String  | Y  | 微信支付凭证-商品详情的内容                                                                                                                       |
| options.merchandiseSchemaID    | Integer | N  | 商品数据表 ID，可用于定位用户购买的物品                                                                                                                |
| options.merchandiseRecordID    | String  | N  | 商品数据行 ID，可用于定位用户购买的物品                                                                                                                |
| merchandiseSnapshot            | Object  | N  | 根据业务需求自定义的数据                                                                                                                         |
| profitSharing                  | Boolean | N  | 当前订单是否需要分账。分账操作，请查看[微信直连商户分账](https://github.com/ifanrx/hydrogen-js-sdk-doc/blob/master/cloud-function/node-sdk/order.html#微信直连商户分账) |

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

**返回参数说明**

1、 JSAPI 支付：

| 参数              | 类型     | 说明                           |
| --------------- | ------ | ---------------------------- |
| err\_msg        | String | 错误信息                         |
| transaction\_no | String | 微信支付流水号                      |
| trade\_no       | String | 微信支付交易 ID, 业务方在微信后台对账时可看到此字段 |

当支付取消或发生错误时，会抛出错误（[HError 对象](/baas-js-sdk/js-sdk/error-code.md)）

2、 其他：

| 参数              | 类型     | 说明                                                              |
| --------------- | ------ | --------------------------------------------------------------- |
| transaction\_no | String | 微信支付流水号                                                         |
| trade\_no       | String | 微信支付交易 ID, 业务方在微信后台对账时可看到此字段                                    |
| code\_url       | String | gatewayType="`weixin_tenpay_native`" 时返回，用于生成支付二维码              |
| mweb\_url       | String | gatewayType="`weixin_tenpay_wap`"时返回，用户可通过访问该 url 来拉起微信客户端，完成支付 |

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

**示例代码**

桌面端扫码支付:

```js
let params = {
  gatewayType: 'weixin_tenpay_native',
  totalCost: 0.1,
  merchandiseDescription: '深蓝色秋裤'
}

BaaS.payment.payWithWechat(params).then(res => {
  /**
   * success.
   * res.data.code_url 用来生成二维码
   * res.data.trade_no 用来查询支付状态
   */
}, err => {
  // 未完成用户授权或发生网络异常等
  console.log(err)
})
```

移动端 H5 支付:

```js
let params = {
  gatewayType: 'weixin_tenpay_wap',
  totalCost: 0.1,
  merchandiseDescription: '深蓝色秋裤'
}

BaaS.payment.payWithWechat(params).then(res => {
  /**
   * success.
   * res.data.mweb_url 用来跳转到支付页面
   * res.data.trade_no 用来查询支付状态
   */
}, err => {
  // 未完成用户授权或发生网络异常等
  console.log(err)
})
```

**支付成功返回示例**

桌面端扫码支付:

```
{
  code_url: 'wechat://***',
  transaction_no: "MDUhtNmacdYBKokJbCXhvYuoJnHXzpeN",
  trade_no: '4DySOWgNssfu5XsiTH9Ek2f5m9jWTwTw'
}
```

移动端 H5 支付:

```
{
  mweb_url: 'https://***',
  transaction_no: "MDUhtNmacdYBKokJbCXhvYuoJnHXzpeN",
  trade_no: '4DySOWgNssfu5XsiTH9Ek2f5m9jWTwTw'
}
```

## 支付宝网页支付

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

`BaaS.payment.payWithAlipay(options)`

1. 电脑端扫码支付（gatewayType: `alipay_page`）
2. 手机 H5 支付（gatewayType: `alipay_wap`）

**参数说明**

| 参数                             | 类型      | 必填 | 参数描述                              |
| ------------------------------ | ------- | -- | --------------------------------- |
| options.gatewayType            | String  | Y  | 支付方式，`alipay_page` / `alipay_wap` |
| options.totalCost              | Number  | Y  | 支付总额，单位：元                         |
| options.merchandiseDescription | String  | Y  | 支付宝支付凭证-商品详情的内容                   |
| options.merchandiseSchemaID    | Integer | N  | 商品数据表 ID，可用于定位用户购买的物品             |
| options.merchandiseRecordID    | String  | N  | 商品数据行 ID，可用于定位用户购买的物品             |
| options.merchandiseSnapshot    | Object  | N  | 根据业务需求自定义的数据                      |

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

**返回参数说明**

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

**示例代码**

桌面端扫码支付:

```js
let params = {
  gatewayType: 'alipay_page',
  totalCost: 0.1,
  merchandiseDescription: '深蓝色秋裤'
}

BaaS.payment.payWithAlipay(params).then(res => {
  /**
   * success.
   * res.data.payment_url 用来跳转到支付页面
   * res.data.trade_no 用来查询支付状态
   */
}, err => {
  // 未完成用户授权或发生网络异常等
  console.log(err)
})
```

移动端 H5 支付:

```js
let params = {
  gatewayType: 'alipay_wap',
  totalCost: 0.1,
  merchandiseDescription: '深蓝色秋裤'
}

BaaS.payment.payWithAlipay(params).then(res => {
  /**
   * success.
   * res.data.payment_url 用来跳转到支付页面
   * res.data.trade_no 用来查询支付状态
   */
}, err => {
  // 未完成用户授权或发生网络异常等
  console.log(err)
})
```

**支付成功返回示例**

```
{
  payment_url: 'https://***',
  transaction_no: "MDUhtNmacdYBKokJbCXhvYuoJnHXzpeN",
  trade_no: '4DySOWgNssfu5XsiTH9Ek2f5m9jWTwTw'
}
```

## QQ 网页支付

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

`BaaS.payment.payWithQQ(options)`

**参数说明**

| 参数                             | 类型      | 必填 | 参数描述                  |
| ------------------------------ | ------- | -- | --------------------- |
| options.gatewayType            | String  | Y  | 支付方式，`qpay_native`    |
| options.totalCost              | Number  | Y  | 支付总额，单位：元             |
| options.merchandiseDescription | String  | Y  | 支付宝支付凭证-商品详情的内容       |
| options.merchandiseSchemaID    | Integer | N  | 商品数据表 ID，可用于定位用户购买的物品 |
| options.merchandiseRecordID    | String  | N  | 商品数据行 ID，可用于定位用户购买的物品 |
| options.merchandiseSnapshot    | Object  | N  | 根据业务需求自定义的数据          |

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

**返回参数说明**

| 参数              | 类型     | 说明                             |
| --------------- | ------ | ------------------------------ |
| transaction\_no | String | QQ 支付流水号                       |
| trade\_no       | String | QQ 支付交易 ID, 业务方在QQ 后台对账时可看到此字段 |
| code\_url       | String | 用于生成支付二维码                      |

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

**示例代码**

```js
let params = {
  gatewayType: 'qpay_native',
  totalCost: 0.1,
  merchandiseDescription: '深蓝色秋裤'
}

BaaS.payment.payWithQQ(params).then(res => {
  /**
   * success.
   * res.data.code_url 用于生成支付二维码
   */
}, err => {
  // 未完成用户授权或发生网络异常等
  console.log(err)
})
```

**支付成功返回示例**

```
{
  code_url: 'https://***',
  transaction_no: "MDUhtNmacdYBKokJbCXhvYuoJnHXzpeN",
  trade_no: '4DySOWgNssfu5XsiTH9Ek2f5m9jWTwTw'
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ifanr.gitbook.io/baas-js-sdk/js-sdk/payment/web.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.