前端-pc端对接paypal支付（vue3）

原创已于 2024-03-06 14:26:21 修改 · 2.8k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2024-02-17 16:04:05 首次发布

本文介绍了如何在Vue项目中使用PayPal官方提供的JavaScriptSDK实现支付功能，包括创建订单、支付处理和取消操作的事件监听。

用的是官方提供的dome，稍稍改了一下，话不多说直接上代码，可以直接用至于放在哪用，随便吧

<script setup>
import { ref, onMounted } from 'vue'

// 页面一开始加载就创建标签
onMounted(() => {
// 在页面中创建script标签
const script = document.createElement('script')

script.src =
'https://www.paypal.com/sdk/js?client-id=你的clientId'
script.addEventListener('load', setLoaded)
document.body.appendChild(script)
})
const paypalRef = ref(null) //
const setLoaded = () => {
// 加载完成后初始化 PayPal 按钮
window.paypal
.Buttons({
//初始化按钮
style: {
layout: 'vertical', //按钮样式
color: 'gold', //颜色
shape: 'pill', //
label: 'checkout', //按钮文本
tagline: false //
},
locale: 'zh_CN', //按钮的语言locale: 'en_US'
createOrder: (data, actions) => {
return actions.order.create({
purchase_units: [
{
//名称
description: '购买', // 更换实际订单描述
amount: {
//币种
currency_code: 'USD', // 更换实际币种
//金额
value: 0.01 // 更换实际订单金额
}
}
]
})
},
onApprove: (data, actions) => {
// 用户支付成功回调
return actions.order.capture().then((details) => {
console.log('支付成功订单详情', details)
})
},
// 取消付款点击底部的取消并返回执行
onCancel: function (data) {
console.log(data, '用户取消支付并返回到网站')
},
// 用户点击付款按钮的时候执行
onClick: function (data) {
console.log(data, '用户点击付款按钮')
}
})
.render(paypalRef.value)
}
</script>
<template>
<div style="width: 400px" ref="paypalRef"></div>
</template>

<style lang="scss" scoped></style>