Instructions for accessing and using the payment function of UniApp

Instructions for accessing and using the payment function of UniApp

With the popularity of mobile payment, many applications need to integrate payment functions to facilitate users to make online payments. As a cross-platform development framework based on Vue.js, UniApp has the characteristics of one-time development and multi-platform use, and can easily implement the payment function. This article will introduce how to access the payment function in UniApp and give code examples.

1. Access to the payment function

1. Add payment permissions in the manifest.json file on the App side:

"permissions": {
  "payment": {
    "description": "用于进行支付操作"
  }
}

2. On the H5 side Add payment permissions to the manifest.json file:

"permissions": {
  "payment": {
    "description": "用于进行支付操作"
  }
}

3. Add the payment module to the import.js file of the native component of the mini program:

export default {
  payment: {
    module: 'wx',
    provider: 'wxpay'
  }
}

4. In the payment page, introduce the uni.payment object:

import uni from 'uni-modules'

export default {
  methods: {
    pay() {
      uni.payment.requestPayment({
        provider: 'wxpay',
        orderInfo: {...}, // 支付订单信息
        success: res => {
          console.log('支付成功', res)
        },
        fail: err => {
          console.log('支付失败', err)
        }
      })
    }
  }
}

2. Instructions for using the payment function

1. Obtaining payment order information

Before making payment, you need to obtain relevant information about the payment order. This information usually includes order number, payment amount, product description, etc. This information can be obtained by calling the server-side interface and then passed to the payment page.

2. Initiate a payment request

In the payment page, call the uni.payment.requestPayment method, passing in the payment order information and the callback function when the payment is successful or failed. This method will open the payment interface and wait for the user to enter the payment password or confirm payment.

3. Processing payment results

After the payment is successful, the success callback function will be triggered. In this function, the logic after the payment is successful can be processed, such as updating the order status and jumping. Go to the payment success page and so on.

When the payment fails, the fail callback function will be triggered. The logic after the payment failure can be processed in this function, such as prompting the user that the payment failed, jumping to the payment failure page, etc.

3. Code Example

The following example is the code for WeChat payment on the payment page:

<script>
import uni from 'uni-modules'

export default {
  methods: {
    pay() {
      uni.payment.requestPayment({
        provider: 'wxpay',
        orderInfo: {...}, // 支付订单信息
        success: res =&gt; {
          console.log('支付成功', res)
        },
        fail: err =&gt; {
          console.log('支付失败', err)
        }
      })
    }
  }
}
</script>

4. Summary

This article introduces the use of UniApp in UniApp Steps to access the payment function and code examples are given. Through the above steps, developers can easily implement the payment function and adjust the style and payment logic of the payment page according to their own needs. I hope this article will help you access the payment function in UniApp.

The above is the detailed content of Instructions for accessing and using the payment function of UniApp. For more information, please follow other related articles on the PHP Chinese website!