H5移动端网站支付宝接口调用

前言：

在移动端如此火爆的今天，很多用户出门都更倾向手机付款而不携带现金。各类手机网站或APP亦如此，当今最火爆的两大支付巨头，分别是支付宝和微信。今天我们就会带来如何在H5APP中调用支付宝接口进行付款。（微信支付和支付宝付款几乎大同小异）

 

1.创建应用

• 要调用支付宝支付，需要注册支付宝开发者帐号，有了帐号才可以调用支付接口

https://open.alipay.com/platform/developerIndex.htm

（根据提示进行账户注册）

 

1.1 选择网页&移动应用

1.2 点击创建应用新建

 

1.3 补全自己的应用信息

 

 

2. 添加应用需要的支付功能

2.1 进入应用后，点击添加能力，选择对应功能

 

 

这里注意，选择清楚需要支付的对应功能（手机网站 || 安卓IOS APP || PC网站）

 

2.2 填写开发设置（为审核做准备）

 

此时签约功能已添加，但是无法签约，因为商户还没有审核，需要先填写下方的开发设置

 

点击红框部分设置开发信息，公钥根据下方提示下载工具生成即可，填写接口加签方式+IP白名单

 

2.3 点击提交审核

 

 

2.4 当审核通过后，点击批量签约，让支付能力生效即可

 

3. 在手机网站中调用支付接口

3.1 签约完毕准备完毕后，在应用中，使用任意工具发起HTTP请求调用支付接口

本文以axios为例

axios.get('https://openapi.alipay.com/gateway.do',

    {

        params: {

                timestamp: '当前时间戳 格式yyyy-MM-dd HH:mm:ss',

                method:'alipay.trade.wap.pay', //接口名称 

                app_id:'自己的应用id',   //在开发者中心点击应用即可看到自己的id

                sign_type:'RSA2',   //商户生成签名字符串所使用的签名算法类型，目前支持RSA2和RSA，推荐使用RSA2

                sign:'商户请求参数的签名串', //商户请求参数的签名串

                version:'1.0',  //版本

                charset:'utf-8',    //请求使用的编码格式，如utf-8,gbk,gb2312等

                biz_content:'{"timeout_express":"30m","seller_id":"商户id","product_code":"QUICK_MSECURITY_PAY","total_amount":"订单总金额0.01","subject":"1","body":"商品描述信息","out_trade_no":"IQJZSRC1YMQB5HU"}'    //商户的所有额外请求数据，例如订单id，扣款标题等。必传

        }

    }).then(res => {

 

        // 拿到响应数据进行判断

        // {

        //     "alipay_trade_wap_pay_response": {

        //         "code": "10000", //10000成功  20000失败

        //         "msg": "Success",

        //         "out_trade_no": "70501111111S001111119",

        //         "trade_no": "2014112400001000340011111118",

        //         "total_amount": 9,

        //         "seller_id": "2088111111116894",

        //         "merchant_order_no": "20161008001"

        //     },

        //     "sign": "ERITJKEIJKJHKKKKKKKHJEREEEEEEEEEEE"

        // }

 

    })

 

3.2 附录，所有参数详细链接文档

https://opendocs.alipay.com/apis/api_1/alipay.trade.wap.pay?scene=API002020081300013628  //所有参数详细信息

 

4. 尾声

其实不难看到，调用支付宝接口本身并不复杂，只是需要按指定参数像服务器发起请求，则会弹出支付宝进行对应扣款。