是否可以并允许将自定义（自己的）PayPal 按钮与 Express Checkout 和 REST API 一起使用？

Question

我已经实现了 PayPal 休息集成，现在我可以创建付款了。所以我现在必须启用付款批准。我使用了这个文档：

https://developer.paypal.com/docs/integration/web/accept-paypal-payment/

正如我所见，approval_url 的使用是一种遗留方法（它在单独的选项卡中打开审批页面）。但是这里描述了一个现代的：

https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/advanced-integration/#set-up-your-client

确实需要使用 checkout.js 库脚本呈现 PayPal 按钮。我想使用自己的按钮，但不知道要调用什么来执行付款审批。而且我根本不知道它是否被允许。无法在任何地方找到好的答案。请帮忙。

Answer 1

不，这并不容易上面提供的自定义 link 是对自定义的拙劣模仿。大多数开发人员的定制可能意味着能够选择您想要的任何按钮并以编程方式使用 API 进行交互。可怜的paypal提供的API目前只允许选择他们按钮的color/size。它还会强制您在加载时使用他们的 checkout.js，以便他们可以跟踪您的用户。如果可能我会避免它。

基本上你现在的选择是：

使用他们提供的 checkout.js 快速结帐并提交给 paypals tracking/limited 定制。在贝宝营销方面，使用具有完全凝聚力的贝宝品牌的优化加载按钮。
使用基本结帐，需要来回重定向。老派技术仍在使用。
尝试解决有限的 checkout.js 并找到其背后的秘密 API 以创建您的自定义按钮。

我选择了选项 2。

Answer 2

我发现我能够让这个工作...

我正在使用 https://www.paypalobjects.com/api/checkout.js 然后像这样设置我的表单：

paypal.checkout.setup('{{ $paypalMerchantID }}', {
   environment: '{{ $paypalEnvironment }}',
   container: 'paypal-payment-form',
      buttons: [{
         container: 'paypal-payment-form',
            type: 'checkout',
               color: 'gold',
               size: 'responsive',
               shape: 'pill'
      }]
});

这将在容器中创建按钮...但您也可以像这样预先在容器中创建一个按钮：

<button data-paypal-button="true">Pay via Paypal</button>

经过一些测试，您唯一需要的属性是 data-paypal-button="true"。

继续隐藏丑陋的按钮：

.paypal-button-widget { display: none; }

Hacky 是的，但为什么使用自己的 Paypal 按钮这么难 :^)

Answer 3

您或多或少可以自定义按钮

例如，如果您想要没有 "visa" 和其他内容的单个按钮，请尝试此

                <script
                    src="https://www.paypal.com/sdk/js?client-id={{ config('services.paypal.id') }}">
                </script>
                <div id="paypal-button-container"></div>
                <script>
                  paypal.Buttons({
                        style: {
                            layout: 'horizontal',
                            size: 'small',
                            color:  'blue',
                            shape:  'pill',
                            label:  'pay',
                            height: 40,
                            tagline: 'false'
                        },
                        createOrder: function(data, actions) {
                          return actions.order.create({
                            purchase_units: [{
                              amount: {
                                value: '0.01'
                              }
                            }]
                          });
                        }
                    }).render(
                        '#paypal-button-container'
                    );
                </script>

documentation

Answer 4

如 paypal 文档中所示：

https://developer.paypal.com/docs/classic/express-checkout/in-context/javascript_advanced_settings/?mark=checkout.setup#

而在 link 之后的示例中，当您选中 "Pay With PayPal" 并单击确认时，它会触发支付功能。您可以根据需要删除条件复选框和复选框并重新设计确认按钮：

https://plnkr.co/edit/XS7EvmrCY1UlkF1nHe8x?p=preview

Answer 5

我们可以通过自定义按钮覆盖整个Paypal按钮的iFrame，并使用“pointer-events: none”让用户点击它。在这里查看我的解决方案 https://nguyenphongthien.medium.com/customize-paypal-button-with-html-and-css-b08a98ee3eb0

干杯

是否可以并允许将自定义（自己的）PayPal 按钮与 Express Checkout 和 REST API 一起使用？

Is it possible and allowed to use custom (own) PayPal button with Express Checkout and REST API?

javascript

rest

payment

paypal