Можно ли и разрешено ли использовать пользовательскую (собственную) кнопку PayPal с Express Checkout и REST API?

Я реализовал интеграцию 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/

требует рендеринга кнопки PayPal, используя checkout.js библиотечный скрипт. Я хочу использовать свою кнопку, но не знаю, как позвонить, чтобы подтвердить платеж. И я не знаю, разрешено ли это вообще. Не могу найти хороший ответ нигде. Пожалуйста помоги.

6 ответов

Решение

Нет, не так просто. Ссылка на настройку, представленная выше, является плохой имитацией настройки. Адаптация к большинству разработчиков, скорее всего, будет означать возможность выбирать любую кнопку и взаимодействовать с помощью API программно. Плохой API, предоставляемый PayPal, в настоящее время позволяет выбирать только цвет / размер их кнопок. Это также заставляет вас использовать их checkout.js при загрузке, чтобы они могли отслеживать ваших пользователей. Я бы избежал этого, если это возможно.

В основном ваш выбор сейчас:

  1. Используйте экспресс-оформление заказа с помощью checkout.js, который они предоставляют, и отправьте на отслеживание / ограниченную настройку PayPals. Говоря о маркетинге PayPal, используйте оптимизированную кнопку загрузки с полностью согласованным брендом PayPal.

  2. Используйте базовую проверку, которая требует перенаправления туда и обратно. Старая школа технологий все еще работает.

  3. Попробуйте обойти ограниченный checkout.js и найдите секретный API за ним, чтобы создать свою настраиваемую кнопку.

Я пошел на вариант 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; }

Да, но почему так сложно использовать собственную кнопку Paypal:^)

Более или менее вы можете настроить кнопки

например, если вы хотите одну кнопку без "визы" и другие вещи, попробуйте это

                <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>

документация

Как показано в документах PayPal:

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

И в примере по ссылке, когда вы выбираете "Оплатить с помощью PayPal" и нажимаете "Подтвердить", запускается функция оплаты. Вы можете снять условные флажки и флажки и изменить кнопку подтверждения дизайна, как вам нравится:

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

Мы можем покрыть iFrame кнопки Paypal целиком с помощью настраиваемой кнопки и использовать «события указателя: нет», чтобы пользователь мог щелкнуть по ней. См. Мое решение здесь https://nguyenphongthien.medium.com/customize-paypal-button-with-html-and-css-b08a98ee3eb0

Ваше здоровье

Да, возможно использование нестандартных дизайнов, я предлагаю вам ознакомиться с оригинальной ссылкой на PayPal.

Проверьте: https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/customize-button/

Другие вопросы по тегам