# 小程序支付

## 1. 使用场景

商户已有微信小程序，用户通过好友分享或扫描二维码在微信内打开小程序时，可以调用微信支付完成下单购买的流程。

步骤（1）：如图7.1，用户通过分享或扫描二维码进入商户小程序，用户选择购买，完成选购流程。

![](https://2528669792-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWJY3r4PKWU5CQc2DBztL%2Fuploads%2FQ8jDqztItJZa5qEUFgKr%2Fimage.png?alt=media\&token=a49d484c-6a9b-4f33-b86e-f0f2e4cb3c4c)![](https://2528669792-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWJY3r4PKWU5CQc2DBztL%2Fuploads%2FOMt0FO4xNEHA8pDyB0Aw%2Fimage.png?alt=media\&token=659ffe76-36cf-4e29-a218-357d909432fd)

步骤（3）：如图7.3，调起微信支付控件，用户开始输入支付密码。

步骤（4）：如图7.4，密码验证通过，支付成功。商户后台得到支付成功的通知

![](https://2528669792-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWJY3r4PKWU5CQc2DBztL%2Fuploads%2FKlGFfpGQwAo319M9Alwy%2Fimage.png?alt=media\&token=b7ab98e2-be55-4167-9a8f-3684c4b32843)![](https://2528669792-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWJY3r4PKWU5CQc2DBztL%2Fuploads%2FsE3PQjtHZTxGSKfLK5s1%2Fimage.png?alt=media\&token=dd60ea8e-fc0f-48c5-b593-c9d5fa9ac7a7)

步骤（5）：如图7.5，返回商户小程序，显示购买成功。

步骤（6）：如图7.6，微信支付公众号下发支付凭证。

## 2. 开发步骤

1. 小程序内调用登录接口，获取到用户的openid,api&#x20;
2. 商户server调用支付下单接口，api参见【[Jsapi支付下单接口](https://useepay.gitbook.io/developer/reference/local-pay-ben-di-hua/ben-di-hua-jie-kou/dian-zi-qian-bao/wechat-hk/jsapi)】
3. 商户server接收支付通知，api参见公共api【[异步通知](https://useepay.gitbook.io/developer/reference/notify/notifyurl)】
4. 商户server查询支付结果，api参见公共api【[查询订单API](https://useepay.gitbook.io/developer/reference/api-reference-xin-yong-ka/order/order-detail)】

## 3. 如何获取用户的Openid

### 3.1 登录微信获取Code

参考[wx.login(Object object)](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html)

```
wx.login({
  success (res) {
    if (res.code) {
      //发起网络请求
      wx.request({
        url: 'https://example.com/onLogin',
        data: {
          code: res.code
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})
```

### 3.2 用Code换取openid

参考[auth.code2Session](https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html)

登录凭证校验。通过 [wx.login](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html) 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程。更多使用方法详见 [小程序登录](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html)。

#### 3.2.1 请求地址

```
GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
```

## 4. 调用Jsapi接口

[Jsapi接口](https://useepay.gitbook.io/developer/reference/local-pay-ben-di-hua/ben-di-hua-jie-kou/dian-zi-qian-bao/wechat-hk/jsapi)
