The first section ~ enterprise wechat applet registration text and text detailed explanation

Stone brother’s company finally registered down, so the next, stone brother can also happy to register an enterprise micro channel small program, mainly want to achieve micro channel payment function, access to user phone number function, these need small enterprise program. So sign up for a business mini program today. By the way, this process is recorded through this article. After the registration of wechat pay merchant number, and the realization of small program payment function, the corresponding article will be written.

Registering business applet is a must

• 1. A brand new mailbox, no small program registered, no public account registered mailbox
• (2) Business license of enterprises or individual industrial and commercial households

1. Email registration interface

First, select the applet on the registration screenIf your email has been used, the following error will occurIf the email has not been used, it will take you to the following page, which is used to verify the email

2. Enterprise registration interface

After the above mailbox verification is successful, we will choose the enterprise here, of course, if you are individual industrial and commercial households, you can also choose individual industrial and commercial households.Fill in the information here truthfullyOnce the information has been filled out, there will be the following confirmation box when submittingIn this way, we can register the business small program, you can see the business small program background has the option of wechat pay, personal small program is not this option.

3. Log in to the small program background and do wechat payment association

At this time, if we want to directly do wechat pay merchant number association, the following error will be displayed.That is to say, we have to be authenticated by wechat before we can associate with wechat Pay. The so-called wechat authentication, which is to pay 300 yuan authentication fee to wechat every year.

4, wechat authentication

Click here for authenticationTake a look carefully, wechat authentication to fill in the information or moreFill in the invoice information, that is, you spend 300 yuan to wechat, wechat will issue you an invoice.Then it’s 300 yuan to wechat.After the payment, wait for the wechat review. Only after the authentication review can we do other operationsWait patiently, after authentication, I can associate wechat pay merchant number, can happily do the payment function. I’ll see you in the next video.

I submitted the certification in the evening, the next day is Wednesday working day in the morning, the certification agency called me, is a little sister, voice is very nice, confirm some information, and then asked me to the public account received a sum of 2 cents in the number, do the verification, the audit passed.

Section 2 ~ Registration of wechat Pay merchant number

We have registered a small business program on the last section, this section we will register wechat pay merchant number, the realization of wechat pay must be a step, because there is no wechat pay merchant number, just like you do not have a bank card, how to collect money.

Writing in the front

Wechat merchant number application is more troublesome, not only need to fill in a lot of information, and the most troublesome step is the real map of the business site verification, this step is very troublesome, I have revised many times, only through the verification.

1. Register wechat Pay merchant number

• 1. When connecting to wechat Pay, wechat officially has the corresponding registration document.Kf.qq.com/product/wec… Application Address:Pay.weixin.qq.com/index.php/a…This address may change, if so, go to the official document above and follow the steps.Then follow the steps step by step truthfully fill in.Then there is the information page

Two, the registration of matters needing attention

Now I will give you some notes about the registration process. I use here is wechat payment service provider associated registration (as for why to do so, here is not disclosed, only to say to you, with service provider registration can reduce wechat payment commission), you can register wechat merchants, stone brother, stone brother will now wechat payment service providers…Then comes the long process of filling out the documents.This is the most troublesome, so I’ll focus on it. If you have an offline store, take the photo below and upload itIf you have a verified wechat service numberIf you have already on-line small program or have their own small program design diagram, you can use the following one, but small program application wechat pay is usually more troublesome, the simplest is offline stores and public account.To apply for an APP, you need the following.If you have a website, you can use these.Enterprise wechat can also register wechat Pay.Settlement rules here try to choose the low rate, in line with their business scenario.Data submission is also relatively slow, just wait patiently.Then there’s one more step of verification.After verification, wait for the audit.

Once the submission is complete, wait patiently for the review. If there is an audit does not pass the situation, according to the actual situation to modify. Only after the review is passed here can we carry out the next operation of small program binding to wechat pay. If the submission fails to pass the review for many times, we can ask Stone brother for help.

Below is the screenshot after I approved it the next dayAfter the approval, the agreement needs to be signedAfter the agreement was signed, our wechat Pay merchant number was formally applied down.

The third section ~ with the cloud development of 10 lines of code to achieve small program payment function

In the last article, we have registered the enterprise mini program and successfully completed the wechat authentication. In this section, we will start the formal association of wechat Pay, and give our small program access to the payment function. Portal: “Enterprise wechat small program registration text and text detailed explanation”

Prerequisite for

• 1, must register wechat pay merchant number
• 2, enterprise small program must pass certification
• 3. The small program is associated with the wechat Pay merchant number

First, the small program is associated with wechat merchants

1. Log in to the applet background and click to associate more merchant numbers2. The APPID is required to associate the merchant number. Click to associate more Appids as shown belowLet’s copy the appID of our little programThen go to the authorization associated with our wechat pay merchant numberAfter the application of wechat merchant number down, you can directly scan the wechat code to log in, and then you can associate the small program in the merchant number.We need to confirm the authorization in the mini program.After the authorization is completed, our small program side will appear like this, click confirm.Click confirm in the image below, and then click Authorize as shown in the image below.You can see that our small program and wechat merchant number successfully associatedHere we small program and business number association operation is completed.

2. Open cloud development and bind wechat merchant number

1, then create a small program, start the code part. The appID here must be associated with a wechat Pay merchant, and it must be a small business program. Remember to choose not to use cloud services when you create your project here, because using the default cloud will create a lot of useless files.2. Open the cloud development functionThe protocol will pop up. Just click ok

3. Give your cloud development environment a name, in English or PinyinNow cloud development can only be free trial for one month, if you learn, one month is enough, so here you can choose any payment method. The next step is to select a quota, and then submit it.Wait for the creation of cloud development, after the creation of the following.4. Then click Settings, global Configuration, you can see a wechat Payment configurationSome students here can not see the wechat pay configuration, because your small program development tool version is too low. It is best to download the latest version of developer tools. 5. Cloud development and configuration of wechat merchant number.After adding, you need to confirm authorization on your phone6. Confirm on wechatYou can see that the binding has been authorizedWe’ll talk about refunds later. At this point, we’re all ready to go, and happy to write code.

Third, write the payment code of cloud development

1, look at the official document, actually said very detailed, next I take you through.

Here also posted the official link to everyone.Developers.weixin.qq.com/miniprogram…In fact, the official gave us a complete example.All we need to do is copy this code into our own cloud function.

2. Create cloud functions for unified payment of cloud development

We first create the root directory of the cloud functionThen create a new cloud function, pay0610Then copy the official example directly into our own cloud function

3. Replace the information in the cloud function with our own

It’s important to replace it with your own. Then save the changes and deploy the cloud function

4. Write pages

Write a button in the index. WXML that will activate our payment cloud function when clickedThen write the click event in index.jsSo let’s just hit Pay at this point, and see if we can get paidThis time a lot of hot, look carefully, you can see that our cloud development environment ID is not initialized.

5. Configure the cloud development environment ID in app.js

I’m going to get the environment ID hereThen configure it in app.jsThen we click on Pay again, and you can see that we have successfully adjusted the payment

6. Then I will try to pay with wechat

After successful payment, our console will also have corresponding log print.Here we can successfully use wechat pay in the small program, the following is nothing more than to make the price and commodity name work, make dynamic incoming. After I will also put the source code into the network disk, there is a need for students, to my public number reply “cloud development payment” can be obtained.

The fourth section, commodity order payment case explanation

Above we learned to pay the function, so we will use a simple case to teach you to try the next simple mall small program, including the following functions

• 1. List of goods
• 2. Order list (paid and to be paid)
• 3. Payment function
• 4. Solve some common problems in payment

As usual, take a look at the renderings

The page is relatively simple, because I mainly teach you how to realize the payment function here, so the page beautification problem, you have time after class, do their own beautification.

First, configure multiple tabbar pages in app.json

Since we use two pages here, or on the basis of our previous chapter, directly modify the page. When we configure multiple pages, we use tabbars. So let’s create an order page, and I won’t go into the details of how the page is created. We’ve talked about this a lot in the mini program basics class. Then configure it in app.json as followsSince this configuration is not the focus of this section, I’m going to give you the code so you can paste it into your own project.

"tabBar": { "color": "#a9b7b7", "selectedColor": "#11cd6e", "borderStyle": "white", "list": [{ "selectedIconPath": "image/home_yes.png", "iconPath": "image/home_no.png", "pagePath": "pages/good/good", "text": }, {"selectedIconPath": "image/order_yes. PNG ", "iconPath": "image/order_no. PNG ", "pagePath": "Pages /order/order", "text":" my order"}]},Copy the code

The images used here, which I put in the course resources, are as followsEveryone after class to ask for stone brother on the line (limited purchase class users), download the resources down, create a new image folder, and then put the resources into the image file can be.Now that the Tabbar is configured, we’re ready to move on to the code.

Two, put the product into the database

When we learned earlier, we used local data, and then I will show you how to put the product data into the database for later dynamic modification.

1. Create goods collection in the cloud development database (table)

Once you’ve created it, make sure you change the permissions to everyone read and writeOnce the Goods collection has been created, it’s time to add data to it, making it live by writing the data we previously wrote locally.The added data is as follows

2. Modify the product list code

Our previous commodity data was written locally, this time we can request the data in the cloud development database, which can be dynamically added, deleted and modified in the later period.From the figure above, we can see that the commodity data has been successfully requested to the database, and then the data is dynamically bound to the small program page.As you can see, our data has been successfully displayed. At this point our product list page transformation is completed.

Third, create the order

We learned earlier that click to buy and pay directly, without a dynamic record of an order. So what we’re going to do in this video is show you how to create an order.

1, create order table

We want to generate orders in the cloud development database, which is essentially adding data to the order table. So I’m gonna go ahead and create my order setNote here that our order table permissions are set to “creator read/write only”. Why? Because we don’t want anyone to see our orders. So we set the order to be read and written only by the creator, so only we can read the order. The goods table above is only set to be universally readable because our goods data is intended to be visible to every customer.

2, create order code writing

After we create the order table above, when our users click to buy, they can’t directly pay. They should first create an order and then pay. So let’s just break it down. Teach you to implement order creation.The code comment above is clear. When we create an order, we need to save the product name, amount, order time and order status in the order. Then look at the order data in the Order table as followsSo our new order has been created successfully. When creating an order, we use a method to get the current time, this method is our own, because it is not the focus of this section, I will post this method code for you, you can directly put the code in your own project to use.

// GetCurrentTime () {var d = new Date(); var month = d.getMonth() + 1; var date = d.getDate(); var day = d.getDay(); var hours = d.getHours(); var minutes = d.getMinutes(); var seconds = d.getSeconds(); var ms = d.getMilliseconds(); Var curDateTime = d.getfullYear () + 'year '; If (month > 9) curDateTime += month + ' '; Else curDateTime += month + 'month '; If (date > 9) curDateTime = curDateTime + date + "date "; Else curDateTime = curDateTime + date + "date "; If (hours > 9) curDateTime = curDateTime + hours + "; Else curDateTime = curDateTime + hours + "; If (minutes > 10) curDateTime = curDateTime + minutes + "; Else curDateTime = curDateTime + minutes + "minutes "; return curDateTime; },Copy the code

Iv. Order payment

After we have created the order above, we should start the payment in the callback when the order was created successfully. In fact, the payment code is basically the same as we learned earlier, the only change is that we need to pass our new order ID to the payment cloud function, using the order ID as the order number when the payment.The figure above shows the information returned when we created the order. You can see that there is an _ID field in the return information, which is also in our order table.In fact, when we pay, the order number should be guaranteed to be unique. In fact, the _ID is automatically created for us by wechat official, which is unique, so it can be directly used. So we can slightly modify the goPay payment method before. Pass this _id to the payment cloud function as the order number.You can see that we can still pay successfully when we adjust the payment in the callback of creating the order success. The only change to our Pay0611 cloud function is to make the order number live.Important note:If there are any changes to our cloud functions, remember to redeploy them.At this point our payment and order parts are transformed, and the next step is to implement the unpaid and paid list of orders.

V. Display of order page (paid and unpaid)

This is a little bit of a tricky video, but I’m going to post the code first, and I’m going to walk you through it in detail in the video.

• order.wxml

The code for the toggle unpaid and paid categories is as follows:

<! - the navigation bar - > < the view class = "navbar" > < lable wx: for = "{{navbar}}" data - independence idx = "{{index}}" class = "item {{currentTab = = index? 'active' : ''}}" wx:key="unique" bindtap="navbarTap"> <text>{{item}}</text> </lable> </view> <! <view wx:if="{{list.length>0}}"> <! - outer layer - > < view wx: for = "{{list}}" wx: key = "key" > <! {{item.goodname}}</text> <text > <text > <text > </text> <text class='seriac_name'> Order time :{{item.time}}</text> <text Wx: if = "{{item. The status = = 0}}" class = "coent_log_base 'data - the item =' {{item}} 'bindtap =' payOrder '> to pay < / text > < / view > < / view > </view> <! --> <view wx:else class='cont_count'> <label class='none_tab'>Copy the code

• roder.js

Here is the key code, directly put the complete code to everyone.

var app = getApp() let DB = wx.cloud.database(); let orderStatus = 0; Page({data: {navbar: [" unpaid ", "paid "], // Default menu select navbar: [" unpaid "," paid "], []}, / / at the top of the TAB to switch navbarTap: function (e) {let index = e.c. with our fabrication: urrentTarget. Dataset. Independence idx; This.setdata ({currentTab: index}) console.log("index", index) if (index == 1) {orderStatus = 1; this.setdata ({currentTab: index}) console.log("index", index) } else { orderStatus = 0; } this.getMyOrderList(); }, onLoad() { this.getMyOrderList(); }, // Get the order getMyOrderList() {let that = this; DB.collection("order") .where({ status: orderStatus }) .get({ success: Function (res) {console.log(" get success ", res.data) let datalist = res.data; console.log(res); if (datalist && datalist.length > 0) { that.setData({ list: datalist }) } else { that.setData({ list: []})}}}}), / / payment order payOrder (event) {let good = event. The currentTarget. Dataset. The item the console. The log (' pay good ', good) wx.cloud.callFunction({ name: 'pay0611', data: { outTradeNo: good._id, goodName: good.name, totalFee: good.totalFee }, success: Res => {console.log(" get payment parameter successfully ", res) const Payment = res.result.payment // call wx.requestPayment({... Payment, success(res) {console.log(' payment succeeded ', res)}, fail(res) {console.error(' payment failed ', res)}})}, fail: Res => {console.log(" failed to get payment parameter ", res)},})}})Copy the code

I’m going to go through this in detail in this video, and I’m going to show you how to type this out.

Micro Channel Cloud Development to realize small Program Payment Function