当前位置：网站首页>Realize applet payment function with applet cloud development (including source code)
Realize applet payment function with applet cloud development (including source code)
2022-07-06 14:22:00 【Programming pebbles】
When we do the development of small program payment , There are always these problems . When the applet calls wechat payment , You must have your own server , Have your own domain name for filing , Have their own background development . This leads to a great cost when we do small program payment . This section will teach you how to use applet cloud development to realize the development of applet payment function . Don't build your own server , Don't have your own filing domain name . Simply use the applet cloud development .
The old rule is to see the effect picture first ：
Knowledge points in this section
1, Deployment and use of cloud development
2, Payment related cloud function development
3, List of goods
4, Order list
5, Wechat payment and successful callback of payment
The function of sending push messages to users after successful payment will be explained later .
Let's teach you how to use the applet payment function with the help of cloud development .
Configuration information required for payment
1, Applet appid
2, Cloud development environment id
3, Wechat merchant No
4, Merchant key
One , preparation
1, Has applied for an applet , Get the applet AppID and Secret stay Applet tube 理 backstage in ,【 Set up 】 →【 Development and setup 】 You can get wechat applet AppID and Secret.
2, Wechat payment merchant number , Obtain the merchant number and merchant key in wechat payment merchant management 理 In the platform ,【 Account center 】→【 Merchant information 】 You can get the wechat payment merchant number .
stay 【 Account center 】 ‒> 【API Security 】 You can set merchant key .
Here's a special note , There is no way for personal applets to use wechat to pay . So if you want to use wechat payment function , Must be a non personal account number （ Of course, individuals can apply for a self-employed business license to register non personal applet accounts ）
3, Wechat developers IDE https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
4, Open the applet cloud development function ：javascript:void(0)
Two , Implementation of product list
The renderings are as follows , Since this section focuses on the realization of payment , So here's just the key code .
wxml The layout is as follows ：
<view class="container">
<view class="good-item" wx:for="{{goods}}" wx:key="*this" ontap="getDetail" data-goodid="{{item._id}}">
<view class="good-image">
<image src="{{pic}}"></image>
</view>
<view class="good-detail">
<view class="title"> goods : {{item.name}}</view>
<view class="content"> Price ： {{item.price / 100}} element </view>
<button
class="button"
type="primary"
bindtap="makeOrder"
data-goodid="{{item._id}}"
> Place an order </button>
</view>
</view>
</view>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
All we need to do is get the commodity information in the cloud database with the help of cloud development , Then show it to the product list , About cloud development, get the product list and display it. This section does not explain （ Interested students can read my history blog , Have you written ）
3、 ... and , Creation of payment cloud function
First, let's take a look at what our payment cloud functions contain
Simply explain the use of each
config Under the index.js It is used for payment configuration , It mainly configures account information related to payment
lib It's a third-party payment bank , There is no explanation here .
The focus is on cloud function entry index.js
Let's teach you how to configure
1, To configure config Under the index.js,
All you need to do in this step is put the applet appid, Cloud development environment ID, Merchant id, Merchant key . Fill in .
2, Configure the entry cloud function
The detailed code is as follows , The comments in the code are very clear , There will be no separate explanation here ：
const cloud = require('wx-server-sdk')
cloud.init()
const app = require('tcb-admin-node');
const pay = require('./lib/pay');
const {
mpAppId,
KEY
} = require('./config/index');
const {
WXPayConstants,
WXPayUtil
} = require('wx-js-utils');
const Res = require('./lib/res');
const ip = require('ip');
/**
*
* @param {obj} event
* @param {string} event.type Function type
* @param {} userInfo.openId User openid
*/
exports.main = async function(event, context) {
const {
type,
data,
userInfo
} = event;
const wxContext = cloud.getWXContext()
const openid = userInfo.openId;
app.init();
const db = app.database();
const goodCollection = db.collection('goods');
const orderCollection = db.collection('order');
// Of the order document status 0 Did not pay 1 Paid 2 closed
switch (type) {
// [ Place... Here unifiedorder Related code ]
case 'unifiedorder':
{
// Query the product ID Whether it exists in the database , And extract the data
const goodId = data.goodId
let goods = await goodCollection.doc(goodId).get();
if (!goods.data.length) {
return new Res({
code: 1,
message: ' Product not found '
});
}
// Extract data from cloud functions , Include the name 、 The price is more reasonable and safe ,
// Because the commodity data transmitted from the end is unreliable
let good = goods.data[0];
// Pieced together the parameters of wechat payment unified order
const curTime = Date.now();
const tradeNo = `${goodId}-${curTime}`;
const body = good.name;
const spbill_create_ip = ip.address() || '127.0.0.1';
// The cloud function will not pay http trigger , So here's the callback notify_url You can just fill in .
const notify_url = 'http://www.qq.com'; //'127.0.0.1';
const total_fee = good.price;
const time_stamp = '' + Math.ceil(Date.now() / 1000);
const out_trade_no = `${tradeNo}`;
const sign_type = WXPayConstants.SIGN_TYPE_MD5;
let orderParam = {
body,
spbill_create_ip,
notify_url,
out_trade_no,
total_fee,
openid,
trade_type: 'JSAPI',
timeStamp: time_stamp,
};
// call wx-js-utils Unified ordering method in
const {
return_code,
...restData
} = await pay.unifiedOrder(orderParam);
let order_id = null;
if (return_code === 'SUCCESS' && restData.result_code === 'SUCCESS') {
const {
prepay_id,
nonce_str
} = restData;
// Wechat applet payment should be signed separately , And back to the applet side
const sign = WXPayUtil.generateSignature({
appId: mpAppId,
nonceStr: nonce_str,
package: `prepay_id=${prepay_id}`,
signType: 'MD5',
timeStamp: time_stamp
}, KEY);
let orderData = {
out_trade_no,
time_stamp,
nonce_str,
sign,
sign_type,
body,
total_fee,
prepay_id,
sign,
status: 0, // Of the order document status 0 Did not pay 1 Paid 2 closed
_openid: openid,
};
let order = await orderCollection.add(orderData);
order_id = order.id;
}
return new Res({
code: return_code === 'SUCCESS' ? 0 : 1,
data: {
out_trade_no,
time_stamp,
order_id,
...restData
}
});
}
// [ Place... Here payorder Related code ]
case 'payorder':
{
// Relevant orders come out of the end. I believe
const {
out_trade_no,
prepay_id,
body,
total_fee
} = data;
// Check the wechat payment side to see if the order exists , And query the order status , See if the payment has been successful .
const {
return_code,
...restData
} = await pay.orderQuery({
out_trade_no
});
// If the order exists and payment is successful , Then start processing payment
if (restData.trade_state === 'SUCCESS') {
let result = await orderCollection
.where({
out_trade_no
})
.update({
status: 1,
trade_state: restData.trade_state,
trade_state_desc: restData.trade_state_desc
});
let curDate = new Date();
let time = `${curDate.getFullYear()}-${curDate.getMonth() +
1}-${curDate.getDate()} ${curDate.getHours()}:${curDate.getMinutes()}:${curDate.getSeconds()}`;
}
return new Res({
code: return_code === 'SUCCESS' ? 0 : 1,
data: restData
});
}
case 'orderquery':
{
const {
transaction_id,
out_trade_no
} = data;
// Query order
const {
data: dbData
} = await orderCollection
.where({
out_trade_no
})
.get();
const {
return_code,
...restData
} = await pay.orderQuery({
transaction_id,
out_trade_no
});
return new Res({
code: return_code === 'SUCCESS' ? 0 : 1,
data: { ...restData,
...dbData[0]
}
});
}
case 'closeorder':
{
// Close order
const {
out_trade_no
} = data;
const {
return_code,
...restData
} = await pay.closeOrder({
out_trade_no
});
if (return_code === 'SUCCESS' &&
restData.result_code === 'SUCCESS') {
await orderCollection
.where({
out_trade_no
})
.update({
status: 2,
trade_state: 'CLOSED',
trade_state_desc: ' Order closed '
});
}
return new Res({
code: return_code === 'SUCCESS' ? 0 : 1,
data: restData
});
}
}
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
- 149.
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160.
- 161.
- 162.
- 163.
- 164.
- 165.
- 166.
- 167.
- 168.
- 169.
- 170.
- 171.
- 172.
- 173.
- 174.
- 175.
- 176.
- 177.
- 178.
- 179.
- 180.
- 181.
- 182.
- 183.
- 184.
- 185.
- 186.
- 187.
- 188.
- 189.
- 190.
- 191.
- 192.
- 193.
- 194.
- 195.
- 196.
- 197.
- 198.
- 199.
- 200.
- 201.
- 202.
- 203.
- 204.
- 205.
- 206.
- 207.
- 208.
- 209.
- 210.
- 211.
- 212.
- 213.
- 214.
- 215.
- 216.
- 217.
- 218.
- 219.
- 220.
- 221.
- 222.
- 223.
- 224.
- 225.
- 226.
- 227.
- 228.
- 229.
- 230.
- 231.
- 232.
- 233.
- 234.
- 235.
- 236.
- 237.
- 238.
- 239.
- 240.
In fact, the key functions of our payment are in the above codes .
And then look at , Screenshot of relevant payment process
The above figure relates to our order list , Payment status , Callback after successful payment .
Let's talk about it today , We will continue to explain other functions of payment . For example, message push after successful payment , It can also be realized with the help of cloud development .
Because the source code involves some private information , There is no separate link to download the source code , If you are interested , You can write to me , Or leave a message at the bottom . It's OK to ask me for the source code alone
边栏推荐
- Get started with typescript
- . How to upload XMIND files to Jinshan document sharing online editing?
- Force deduction 152 question multiplier maximum subarray
- HackMyvm靶機系列(3)-visions
- How to turn wechat applet into uniapp
- Windows platform mongodb database installation
- Experiment 7 use of common classes
- Renforcer les dossiers de base de l'apprentissage
- Record once, modify password logic vulnerability actual combat
- Feature extraction and detection 14 plane object recognition
猜你喜欢
Hackmyvm target series (1) -webmaster
Sqqyw (indifferent dot icon system) vulnerability recurrence and 74cms vulnerability recurrence
附加简化版示例数据库到SqlServer数据库实例中
Applet Web Capture -fiddler
Matlab opens M file garbled solution
DVWA (5th week)
Intranet information collection of Intranet penetration (5)
7-5 staircase upgrade (PTA program design)
Callback function ----------- callback
图书管理系统
随机推荐
Experiment 7 use of common classes
[insert, modify and delete data in the headsong educator data table]
Mathematical modeling idea of 2022 central China Cup
HackMyvm靶机系列(1)-webmaster
The most popular colloquial system explains the base of numbers
【头歌educoder数据表中数据的插入、修改和删除】
力扣152题乘数最大子数组
Hackmyvm target series (2) -warrior
XSS (cross site scripting attack) for security interview
Wei Shen of Peking University revealed the current situation: his class is not very good, and there are only 5 or 6 middle-term students left after leaving class
Strengthen basic learning records
Attach the simplified sample database to the SQLSERVER database instance
7-8 7104 Joseph problem (PTA program design)
Sqqyw (indifferent dot icon system) vulnerability recurrence and 74cms vulnerability recurrence
《英特尔 oneAPI—打开异构新纪元》
Chain team implementation (C language)
SQL injection
Experiment 4 array
Analysis of penetration test learning and actual combat stage
DVWA (5th week)