当前位置：首页 > news >正文

前端PayPal支付按钮集成（Vue3）

news 来源：原创 2025/5/26 11:44:43

今天尝试了贝宝（paypal）前端集成，基本按着文档看就实现了

1，在paypal开发者文档注册或登录paypal账号，会自动进入如下页面，是默认模拟的沙盒模式，接着点击下面的Standard Checkout

2，进入后弹出一个指导框，按着他的指示一步步走，会得到client_id，用来对接脚本，还有沙盒模式的模拟信用卡与账户，用来测试

3，得到的client_id填入下面的脚本，再放入你的主页面或使用palpay按钮的页面

<script src="https://www.paypal.com/sdk/js?client-id=你的client_id" async></script>

4，将如下代码放入JS中

const paypal = ref<HTMLElement | null>(null)

onMounted(() => {
    // 确保 PayPal 对象存在
    if (typeof window.paypal !== 'undefined') {
        window.paypal.Buttons({
            style:{
                shape:"pill", // 形状 ract
                color: "gold", // 颜色
                label: "paypal", // 文本内容 还可以是pay 具体看文档
            },
            // PayPal 按钮配置
            createOrder: (data: any, actions: any) => {
                return actions.order.create({
                    purchase_units: [{
                        amount: {
                            value: '999' // 总金额
                        }
                    }]
                });
            },
            onApprove: (data: any, actions: any) => {
                return actions.order.capture().then((details: any) => {
                    console.log('支付成功:', details);
                    // 处理支付成功逻辑
                });
            },
            onCancel(data) {
                // 取消支付的页面
                window.location.assign("/cart");
            },
            onError(err) {
                // 支付错误的页面
                window.location.assign("/404");
            }
        }).render(paypalRef.value);
    }
})
declare global {
    interface Window {
        paypal: any;
    }
}