How to use Alipay to pay with uniapp

In recent years, mobile payment has become one of the more convenient, faster and safer transaction methods. As the most widely used mobile payment platform in China, Alipay is deeply favored by users. With the popularity of uniapp (a cross-platform development framework based on Vue.js), many developers also want to integrate Alipay payment functions into uniapp. This article will give a brief introduction on how to use Alipay payment in uniapp.

1. Alipay Open Platform Registration

Before using Alipay to pay, developers first need to register on the Alipay Open Platform. After entering the Alipay open platform (https://opendocs.alipay.com/open), select "Open Platform Registration" and fill in the relevant information to complete the registration.

2. Integrate Alipay SDK

After successful registration, developers need to download Alipay SDK and integrate it into the project. You can quickly access Alipay SDK through the uni-app-plus tool provided on the uniapp official website. The process of using uni-app-plus is as follows:

1. Install uni-app-plus

npm install -g uni-app-plus

2. Use uni-app-plus to create a uni-app project

uni-app-plus init myApp

3. Enter the myApp directory and add the Alipay plug-in

cd myApp
uni-app-plus plugin add ali-pay

4. After adding the plug-in, a reference to the Alipay plug-in will be automatically added to the manifest.json:

"plugins": {
    "ali-pay": {
      "version": "1.4.4",
      "provider": "com.baidu.capacitor.alipay.AliPaySdkPlugin"
    }
},
"compilerOptions": {
    ...
    "provider": {
      "ali-pay": {
        "alias": "ap"
      }
    }
}

5. Use uni-app- plus built-in HBuilderX tool for development.

Among them, the Alipay SDK needs to be downloaded from the developer center of the Alipay open platform. After downloading, unzip it to get the "AlipaySDK.framework" folder and "APAuthV2Info.h", "APOrderInfo.h", and "APOrderService." h" three header files, drag them into the "Destination" folder to complete the SDK addition.

3. Configure Alipay payment information

After completing the integration of Alipay SDK, developers need to configure Alipay payment information. The specific process is as follows:

1. Create an application on the Alipay open platform and obtain the application's APP_ID, PID, PRIVATE_KEY and other information.

2. During use, configure the APPID, PARTNERID, merchant private key, Alipay public key and other information into the project. Example:

const ap = uni.requireNativePlugin('ali-pay') // 引入支付宝插件

const privateKey = `-----BEGIN RSA PRIVATE KEY-----
*****此处为商户私钥*****
-----END RSA PRIVATE KEY-----`
const aliPublicKey = `*****此处为支付宝公钥*****`

const orderInfo = { // 订单信息
    body: '测试商品',
    subject: '测试商品',
    out_trade_no: '1544665957487', // 订单号
    timeout_express: '30m',
    total_amount: '0.01'
}

4. Implementation of Alipay payment

After completing the integration of Alipay SDK and the configuration of Alipay payment information, you can start using uniapp to implement the Alipay payment function.

1. Initiate Alipay payment

Use the pay() method of the Alipay plug-in to initiate a payment request to Alipay:

ap.pay({
    orderInfo: orderInfo, // 订单信息
    privateKey: privateKey, // 商户私钥
    aliPublicKey: aliPublicKey // 支付宝公钥
}, function(retJson) {
    console.log(JSON.stringify(retJson))
})

2. Alipay payment results Callback

After Alipay payment is completed, the payment result can be obtained through Alipay's callback method:

document.addEventListener('AlipayPayResult', function (res) {
    // res.detail.code ==> 9000支付成功 6001取消支付 4000支付失败
    ...
})

So far, we have successfully implemented the function of using Alipay payment in uniapp. Generally speaking, only a small amount of configuration and code writing is required to complete this function, which brings great convenience to developers.

In the future, the demand for mobile payments will become higher and higher. As a cross-platform development framework, uniapp's integration with Alipay SDK will have extremely high application value.

The above is the detailed content of How to use Alipay to pay with uniapp. For more information, please follow other related articles on the PHP Chinese website!