paypal Javascript sdk 笔记

最新推荐文章于 2025-04-09 10:26:25 发布

一尾鱼汤

最新推荐文章于 2025-04-09 10:26:25 发布

阅读量2.5k

点赞数 3

分类专栏： Vue方法总结文章标签： js

本文链接：https://blog.csdn.net/qq_42105170/article/details/124011511

版权

Vue方法总结专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Vue应用中使用PayPal JavaScript SDK，区分并配置测试（sandbox）与正式（live）环境，包括创建沙盒账号、获取client_id，并演示如何动态渲染PayPal支付按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过引入第三方npm包下载 javascript sdk插件

可以分正式环境和测试环境
https://developer.paypal.com/sdk/js/

测试环境: sandbox mode

创建一个沙盒账号用于测试付款，create一个App生成client_id用于收款

正式环境: live mode

code

//通过v-if渲染，避免渲染重复
 <div v-if="isShowPaypal"
      id='paypal-button-container'>
 </div>

loadScript({ "client-id": 'AZMsaDjxE2mAJ4UpvFP2NpsrRHgQXTdH0xYVOzcAg1ey7r4gJ96-e8g63IKAFl0U2QizjeldeSa09nd2' })
                .then((paypal) => {
                  paypal.Buttons({
                    style: {
                      layout: 'vertical',
                      color: 'blue',
                      shape: 'pill',
                      label: 'paypal'
                    },
                    //初始化
                    onInit: function (data, actions) {
                      console.log(data)
                      // Disable the buttons
                      //actions.disable();
                      //actions.enable();
                    },
                    //创建订单
                    createOrder: function(data, actions) {
                      // Set up the transaction
                      return actions.order.create({
                        purchase_units: [{
                          amount: {
                            value: payData.amount,
                            // currency_code: ''
                          }
                        }]
                      });
                    },
                    onApprove: async (data, actions) => {
                      this.$toast('支付成功' + JSON.stringify(data) + '=======' + JSON.stringify(actions))
                    },
                    //取消支付
                    onCancel:  (data) => {
                      this.$toast('支付取消')
                      this.$router.push('/gameStoreCenter')
                    },
                  }).render('#paypal-button-container')
                })
                .catch((err) => {
                  console.error("failed to load the PayPal JS SDK script", err);
                });