paypal html5 支付,PayPal H5支付组件

//- Title: H5 PayPal 支付 组件

.paypal.flex-cc

#loading

van-loading#loading(size='36' type='spinner' color='#666')

#paypal-container

.money

span ￡

span {{$route.query.totalAmount}}

#paypal-payment-button

import Cookies from 'js-cookie'

export default {

name: 'paypal',

components: {},

props: {},

data() {

return {}

},

created() {

// 创建PayPal支付

this.createPayPal()

},

methods: {

// 创建PayPal支付

createPayPal() {

// clientId 客户端ID & currency 支付货币种类

const { clientId, currency } = this.$route.query

// 创建script标签，引入PayPal SDK文件

let script = document.createElement('script')

script.type = 'text/javascript'

// clientId

script.src = `https://www.paypal.com/sdk/js?client-id=${clientId}&disable-funding=credit,card&currency=${currency}`

// 添加元素到head

document.getElementsByTagName('head')[0].appendChild(script)

// 引入成功

script.onload = () => {

console.log('js资源已加载成功了')

// 创建支付按钮

this.createPayPalButton()

}

// 引入失败

script.onerror = () => {

console.log('js资源加载失败了，返回原生')

}

},

// 创建支付按钮

createPayPalButton() {

const BASE_API_URL = process.env.VUE_APP_BASE_API // 请求根路径

const Authorization = Cookies.get('Authorization')

const { payId } = this.$route.query

// 创建script标签

let script = document.createElement('script')

script.type = 'text/javascript'

script.text = `

paypal.Buttons({

style : {

layout: 'vertical',

color: 'black',

shape: 'rect',

label: 'checkout',

tagline: false

},

onInit: () => {

// 支付按钮加载完成 通知原生关闭loading

console.log('--------1.支付按钮加载完成 关闭loading--------')

// 自动点击 执行支付

console.log('--------2.自动点击 执行支付--------')

// 如果按钮获取到 就 自动执行点击 否则显示按钮

const paypalButton = window.frames[1].document.querySelector('.paypal-button')

if (paypalButton) paypalButton.click()

else {

document.querySelector('#paypal-container').style.display = 'block'

document.querySelector('#loading').style.display = 'none'

}

},

createOrder: function (data, actions) {

return fetch('${BASE_API_URL}api/payment/paypal/v2/create', {

method: 'post',

headers: {

'content-type': 'application/json',

'Authorization': '${Authorization}',

},

body: JSON.stringify({

payId: '${payId}',

})

}).then(function (res) {

return res.json();

}).then(function (data) {

console.log('--------3. 获取支付ID-------- payId: ', data.data)

if (!data.data) alert('retCode: ' + data.retCode + ' message: ' + data.message)

else {

document.querySelector('#paypal-container').style.display = 'none'

document.querySelector('#loading').style.display = 'block'

}

return data.data;

});

},

onApprove: function (data, actions) {

return fetch('${BASE_API_URL}api/payment/paypal/v2/capture', {

method: 'POST',

headers: {

'content-type': 'application/json',

'Authorization': '${Authorization}',

},

body: JSON.stringify({

orderID: data.orderID,

})

}).then(function (res) {

return res.json();

}).then(function (details) {

if (details.error === 'INSTRUMENT_DECLINED') {

return actions.restart();

}

console.log("--------4.创建订单Success--------")

console.log("--------5.打开Loading--------")

return fetch('${BASE_API_URL}api/payment/paypal/v2/order', {

method: 'post',

headers: {

'content-type': 'application/json',

'Authorization': '${Authorization}',

},

body: JSON.stringify({

orderID: data.orderID

})

}).then(function (res) {

return res.json();

}).then(function (ret) {

console.log(ret.retCode);

if (ret.retCode != 200) {

// 支付失败，跳转到支付失败页 todo

console.log('--------6.支付失败 返回原生--------')

return;

}

// 跳转到支付成功页 todo

console.log('--------6.支付成功 返回原生--------')

});

});

},

onCancel: function (data) {

// 跳回原生 todo

console.log('--------7.点击取消 返回原生--------')

}

}).render('#paypal-payment-button')

`

// 引入script

document.getElementsByTagName('head')[0].appendChild(script)

},

},

}

.paypal {

width 100%

height 100vh

flex-direction column

background #F5F5F5

}

#paypal-container {

width calc(100% - 40px)

display none

.money {

font-size 26px

font-weight 700

text-align center

margin-bottom 150px

span:last-child {

font-size 40px

}

}

}