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

用的是官方提供的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>

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

之前整理过uniapp对接paypal 过几天发上来