线上收款小程序怎么弄的出来(线上小程序收款码怎么申请)
随着互联网支付的不断发展和普及，越来越多的商家和个人开始使用线上收款的方式进行交易。其中，线上收款小程序是一种快捷、方便的支付方式，受到越来越多人的青睐。那么，线上收款小程序怎么弄出来呢？下面，我们就来一起探讨一下。
首先，我们需要了解的是，线上收款小程序需要注册开通支付服务。常见的线上支付平台包括支付宝、微信支付、聚合支付等。其中，聚合支付是一种可行的选择，因为它不仅支持多种支付方式，还支持多个小程序同时接入。而且，在聚合支付界面的使用体验也较好。
那么，我们该如何使用聚合支付呢？其流程如下：
1. 注册聚合支付官网账号，并登录。
2. 进入“应用管理”页面，选择“应用列表”中的“创建应用”，填写应用的基本信息，例如应用名称、类型等。其中，“应用类型”需要选择“小程序”。
3. 创建应用成功后，系统将会为你分配一个应用ID和应用密钥。这时候，你需要把应用ID和应用密钥记录下来，后续会用到。
4. 在“菜单”中选择“API列表”，点开“聚合支付”，按照要求填写商户信息。
5. 然后，在“收费信息”页面选择“开通”，填写商户的结算账号信息。注意：聚合支付支持的结算方式包括T+1自动结算和T+0手动结算，商户需要根据自己的实际情况选择。
6. 接下来，进入“支付方式”页面，选择要开通的支付方式。聚合支付支持支付宝、微信支付、银联支付等多种支付方式。
7. 最后，在“应用设置”中填写小程序的相关信息，例如小程序名称、小程序APPID等。
现在，我们已经完成了聚合支付的开通。接下来，我们需要在小程序中添加相应的 API 接口。
1. 在小程序开发工具中，打开“app.json”，添加以下代码：
```json
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序的收款操作"
}
},
```
2. 在“pages”节点下添加“pages/pay/pay”页面。
3. 在“utils”文件夹下创建“request.js”文件，用于发送请求。添加以下代码：
```javascript
import {config} from '../config.js'
class Request{
constructor(){
this._baseUrl = config.apiBaseUrl
}
request(params){
wx.request({
url: this._baseUrl + params.url,
method: params.method || 'GET',
data: params.data || {},
header: {
'content-type': 'application/json',
'appkey': config.appkey
},
success: (res) => {
let code = res.statusCode.toString()
if(code.startsWith('2')){
params.success && params.success(res.data)
}else{
params.error && params.error(res.data)
}
},
fail: (err) => {
params.error && params.error(err)
}
})
}
}
export {Request}
```
4. 在“app.js”中添加以下代码：
```javascript
import {config} from './config.js'
import {Request} from './utils/request.js'
App({
onLaunch: function () {
let token = wx.getStorageSync('token')
if(!token){
this.login()
}
},
login(){
wx.login({
success: (res) => {
let code = res.code
let url = `${config.apiBaseUrl}/login?code=${code}`
let request = new Request()
request.request({
url: url,
success: (data) => {
wx.setStorageSync('token', data.token)
}
})
}
})
}
})
```
代码解释：
- 在 “app.json” 中申请了获取用户地理位置的权限，在用户进行支付时需要获取用户的位置信息。
- 在 “pages” 目录下创建了 “pay” 页面，用于展示收款码和获取用户的位置信息。
- 在 “utils” 文件夹下创建了 “request.js” 文件，用于发送请求。其中，“config.js” 文件包含了聚合支付的基本信息，例如应用ID、应用密钥等。
- 在 “app.js” 中，全局实例化一个 “Request” 类，用于发送请求。同时，在小程序启动时进行登录，并获取用户 token。
接下来，我们需要在 “pay” 页面中添加支付功能。
1. 在 “pay.wxml” 中添加以下代码：
```xml
```
2. 在 “pay.js” 中添加以下代码：
```javascript
Page({
data: {
payUrl: ''
},
onLoad: function (options) {
this.getPayUrl()
},
getPayUrl(){
let request = new Request()
request.request({
url: '/pay',
success: (data) => {
this.setData({
payUrl: data.payUrl
})
}
})
},
onPay(){
wx.getLocation({
success: (res) => {
let latitude = res.latitude
let longitude = res.longitude
let url = '/pay/check_location'
let data = {
latitude: latitude,
longitude: longitude
}
let request = new Request()
request.request({
url: url,
method: 'POST',
data: data,
success: (data) => {
wx.showToast({
title: '支付成功',
})
},
error: (data) => {
wx.showToast({
title: '支付失败',
icon: 'none'
})
}
})
},
fail: (err) => {
wx.showToast({
title: '请先授权位置信息',
icon: 'none'
})
}
})
}
})
```
代码解释：
- “pay.wxml” 中调用了支付 API，并显示收款二维码和确认支付按钮。
- “pay.js” 中实现了以下功能：
1. 在页面加载时调用了 “getPayUrl” 方法，获取收款二维码的支付地址。
2. 在点击 “确认支付” 按钮时，先调用 “wx.getLocation” 方法获取用户的地理位置信息。
3. 然后，将地理位置信息发送给后台 “/pay/check_location” 接口进行校验。
4. 如果校验通过，则调用支付 API 进行支付，并显示支付成功提示信息。
5. 如果校验失败，则显示支付失败信息。
最后，我们需要注意的是，在使用线上收款小程序前，需要确保自己的企业已经拥有营业执照。只有具有正规资质的企业才可以通过聚合支付等平台开通线上收款服务。
总之，线上收款小程序的实现需要多方面的考虑和技术支持。但是，只要掌握了上述流程和技巧，就可以轻松开发出自己的线上收款小程序。
