Невозможно интегрировать Paypal Checkout на мой сайт электронной коммерции, используя Polymer и Shadow-DOM - PullRequest
0 голосов
/ 28 мая 2019

Я хочу интегрировать Paypal Checkout на моем сайте с Polymer. Для этого я пытаюсь использовать интеллектуальные кнопки оплаты Paypal, которые должны быть простейшим способом интеграции Paypal. Но похоже, что библиотека Paypal Checkout не совсем совместима с Polymer и Shadow-DOM.

  • Сначала я попытался интегрировать кнопки из Shadow-DOM, чтобы кнопки появлялись, а затем исчезают всего на секунду позже. Я перепробовал много конфигураций, но не нашел никаких решений.
  • Затем я попытался объединить кнопки внутри iframe, указывающего на файл HTML, который правильно отображает кнопки. Когда я нажимаю на кнопку, я правильно перенаправляюсь на страницу Paypal Checkout, но на странице Paypal возникает ошибка блокировки, и я не могу завершить платеж.
  • Я также пытался интегрировать Paypal Checkout, избегая библиотеки Paypal, но я не нашел согласованной документации для этого.

  • первая попытка (в Shadow-DOM):

<div id="button"></div>
...
initPayment () {
  paypal.Buttons({
    createOrder: function(data, actions) {
      console.log(data, actions);
      let order = actions.order.create({
        purchase_units: [{
          amount: {
            value: "0.01",
            currency_code: "EUR"
          },
          reference_id: "123"
        }]
      });
      return order;
    },
    onApprove: function(data, actions) {
      return actions.order.capture().then((detail) => {
        console.log(detail);
      });
    },
    onError: function(error) {
      console.log(error);
    },
    onCancel: (data, actions) => {
      console.log(data);
    },
}).render(this.shadowRoot.querySelector("#button"));
...
  • Вторая попытка (в iframe):
...
<body>
  <script>
    paypal.Buttons({
      createOrder: function(data, actions) {
        console.log(data, actions);
        let order = actions.order.create({
          purchase_units: [{
            amount: {
              value: "0.01",
              currency_code: "EUR"
            },
            reference_id: "123"
          }]
        });
        return order;
      },
      onApprove: function(data, actions) {
        return actions.order.capture().then((detail) => {
          console.log(detail);
        });
      },
      onError: function(error) {
        console.log(error);
      },
      onCancel: (data, actions) => {
        console.log(data);
      },
    }).render("#button");
  </script>
  ...
  <div id="button"></div>
</body>

Также я заметил, что когда я тестирую свою HTML-страницу отдельно, которая должна быть включена с iframe, проверка работает нормально.

1 Ответ

0 голосов
/ 13 июня 2019

Вы можете обойти это ограничение в PayPal, добавив дополнительный шаг к оформлению заказа.

На нашем сайте мы показываем выбор "Paypal, Apple Pay, Google Pay, CC".Когда пользователь выбирает Paypal, мы добавляем следующие элементы в тело (не в тени) ...

<div style="display: flex; width:100vw; height: 100vh;opacity:.8;background:#000">
    <div id="paypal-button" style="display:flex;flex-grow:1;align-self:center;justify-content:center"></div>
</div>

После этого вызываем window.paypal.Button.render с

style: { size: 'responsive', layout: 'vertical' }

При этом кнопки PayPal, кнопки кредитования PayPal и кнопки PayPal CC будут расположены по центру экрана.

Затем при рендеринге onCancel / onError / onAuthorize разбейте фон и кнопки PayPal.

...