Home Web Front-end JS Tutorial Implement WeChat payment through vue.js

Implement WeChat payment through vue.js

Jun 06, 2018 pm 02:16 PM
vue.js front end WeChat Pay

Now I will share with you a vue.js WeChat payment front-end code. Has very good reference value. I hope to be helpful.

The example is as follows:

onBridgeReady: function () {
  const openId = localStorage.getItem('openId')
  payService.payment(this.$route.params.orderId, 1, openId).then(rt => { //1:支付类型,可不填
  this.message = rt.t
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest', {
    'appId': this.message.appId,
    'timeStamp': this.message.timeStamp,
    'nonceStr': this.message.nonceStr,
    'package': this.message.package,
    'signType': this.message.signType,
    'paySign': this.message.paySign
    },
   function (res) {
   console.log(res)
   if (res.err_msg === 'get_brand_wcpay_request:ok') {
    Toast('微信支付成功')
    this.$router.push('/MineOrder')
   } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
    Toast('用户取消支付')
    // window.location.href = 'gift_failview.do?out_trade_no=' + this.orderId
   } else if (res.err_msg === 'get_brand_wcpay_request:fail') {
    Toast('网络异常,请重试')
   }
   }
  )
  })
 },
 callpay: function () {
  if (typeof WeixinJSBridge === 'undefined') {
  if (document.addEventListener) {
   document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(), false)
  } else if (document.attachEvent) {
   document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady())
   document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady())
  }
  } else {
  this.onBridgeReady()
  }
 }
Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement the method of adding tr to table in angularjs

How to use json objects to push to an array in angular The method in

How to determine whether an element is contained in an angularjs array

The above is the detailed content of Implement WeChat payment through vue.js. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

If you forget your WeChat payment password, how to retrieve it? If you forget your WeChat payment password, how to retrieve it? Feb 23, 2024 pm 09:40 PM

In WeChat, users can enter their payment password to make purchases, but how do they retrieve their payment password if they forget it? Users need to go to My-Services-Wallet-Payment Settings-to recover their payment password if they forget it. This introduction to how to retrieve your payment password if you forget it will tell you the specific operation method. The following is a detailed introduction, so take a look! WeChat usage tutorial. How to find the WeChat payment password if you forget it? Answer: My-Service-Wallet-Payment Settings-Forgot payment password. Specific method: 1. First, click My. 2. Click on the service inside. 3. Click on the wallet inside. 4. Find the payment settings. 5. Click Forgot payment password. 6. Enter your own information for verification. 7. Then enter the new payment password to change it.

How to set up WeChat payment for Meituan Takeout How to set up WeChat payment How to set up WeChat payment for Meituan Takeout How to set up WeChat payment Mar 12, 2024 pm 10:34 PM

There are many food and snack shops provided in the Meituan takeout app, and all mobile phone users log in through their accounts. Add your personal delivery address and contact number to enjoy the most convenient takeout service. Open the homepage of the software, enter product keywords, and search online to find the corresponding product results. Just swipe up or down to purchase and place an order. The platform will also recommend dozens of nearby restaurants with high reviews based on the delivery address provided by the user. The store can also set up different payment methods. You can place an order with one click to complete the order. The rider can arrange the delivery immediately and the delivery speed is very fast. There are also takeout red envelopes of different amounts for use. Now the editor is online in detail for Meituan takeout users. We show you how to set up WeChat payment. 1. After selecting the product, submit the order and click Now

Can Xianyu pay with WeChat? How to change to WeChat payment method? Can Xianyu pay with WeChat? How to change to WeChat payment method? Mar 12, 2024 pm 12:19 PM

When everyone has nothing to do, they will choose to browse the Xianyu platform. Everyone can find that there are a large number of products on this platform, which can allow everyone to see various second-hand products. Although these products are second-hand products, there is absolutely no problem with the quality of these products, so everyone can buy them with confidence. The prices are very affordable, and they still allow everyone to face-to-face with these products. It is entirely possible for sellers to communicate and conduct some price bargaining operations. As long as everyone negotiates properly, then you can choose to conduct transactions, and when everyone pays here, they want to make WeChat payment, but it seems that the platform It's not allowed. Please follow the editor to find out what the specific situation is. Xianyu

Sharing the steps to apply for a refund with WeChat Pay Sharing the steps to apply for a refund with WeChat Pay Mar 25, 2024 pm 06:31 PM

1. First, we need to open the WeChat APP on the mobile phone, and then click to log in to the WeChat account, so that we enter the WeChat homepage. 2. Click the [Me] button in the lower right corner of the WeChat homepage, then select the [Payment] option. We click to enter the payment page. 3. After entering the [Payment] page, click the [Wallet] option to enter, and click [Bill] in the upper right corner of the [Wallet] page.

How to pay with WeChat on Alibaba_How to pay with WeChat on Alibaba 1688 How to pay with WeChat on Alibaba_How to pay with WeChat on Alibaba 1688 Mar 20, 2024 pm 05:51 PM

Alibaba 1688 is a purchasing and wholesale website, and the items there are much cheaper than Taobao. So how does Alibaba use WeChat payment? The editor has compiled some relevant content to share with you. Friends in need can come and take a look. How does Alibaba use WeChat payment? Answer: WeChat payment cannot be used for the time being; 1. On the page where we purchase goods, we click [Change payment method] 2. Then in the pop-up page, we can only go to [Alipay, staged payment] , cashier] can be selected;

How to set up WeChat payment on Didi Chuxing How to set up WeChat payment How to set up WeChat payment on Didi Chuxing How to set up WeChat payment Mar 13, 2024 pm 01:22 PM

The Didi Chuxing app provides more convenience for everyone's daily travel. You can go wherever you want, and all Didi vehicles are on call. You no longer need to wait anxiously. Dozens of taxi red envelopes are available for free. Travel faster. Open the homepage of the software, enter the starting point and destination according to your personal itinerary, and freely choose from vehicles of different prices below. Place an order with one click and publish the itinerary. Didi drivers will receive the order in seconds and arrive at the designated location as quickly as possible. For the location, just check your mobile phone number before getting on the bus. Of course, there are many ways to pay for the fare, including WeChat and Alipay, but everyone usually uses WeChat. It is easy to set up payment with one click. Now the editor is online carefully paying for Didi one by one. Travel users bring how to set up WeChat payment. 1. We are on the mobile phone

How to activate WeChat Pay? WeChat Pay activation settings How to activate WeChat Pay? WeChat Pay activation settings Mar 14, 2024 am 10:00 AM

WeChat is an instant messaging application launched by Tencent. It supports cross-platform and cross-operator message sending and receiving. It has rich functions, including voice, video chat, and sharing in Moments. It is deeply loved by the majority of users. WeChat Pay is a payment function in WeChat Wallet, providing users with a more convenient payment experience. Let’s learn how to activate WeChat Pay. How to activate WeChat Pay? WeChat Pay Activation Settings 1. Open WeChat on your mobile phone, click [Me] in the lower right corner to enter the personal homepage, 2. Click the [Service] option. 3. Then click the [Wallet] icon. 4. Under the [Wallet] section, click [Split Payment] to enter the introduction page. 5. At the bottom of the payment introduction page, click the [View my payment limit] button. 6. Read the distribution carefully

Can WeChat Pay be used on Baidu Maps? Tutorial on how to set up payment Can WeChat Pay be used on Baidu Maps? Tutorial on how to set up payment Mar 12, 2024 am 11:34 AM

Baidu Maps provides everyone with high-quality travel. You can use this software every day and enjoy high-quality travel. No matter where you want to go, you can use this software for navigation. You can use it how you want every day without any problems. You can take a taxi here. There are a lot of platforms. You can initiate a taxi call here with just one click to help you get a taxi quickly. It is very convenient and makes your travel more convenient. Friends in need, please check it out. When it comes to use, some people are worried about payment issues. They want to know how to set up payment methods and how to use WeChat payment. Here I will provide you with the setting method. Friends in need can use it! 1. Open your phone and click to enter the Baidu Map app 2. Click to enter

See all articles