CODEWITHSUNDEEP
paypalpolymershadow-dom
Neilujd
Neilujd

Reputation: 81

Impossible to integrate Paypal Checkout on my e-commerce website using Polymer and Shadow-DOM

I want to integrate Paypal Checkout on my website build with Polymer. To do so I try to use Paypal Smart Payment Buttons which is supposed to be the simplest way to integrate Paypal. But it seems that the Paypal Checkout library is not really compliant with Polymer and 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"));
...

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

Also I observed that when I test my HTML page apart which is supposed to be include with an iframe the checkout works fine.

Upvotes: 0

Views: 337

Answers (1)

Michael Allen
Michael Allen

Reputation: 11

You can work around this limitation in PayPal by adding an additional step to the checkout.

On our site we show selection of "Paypal, Apple Pay, Google Pay, CC". When the user selects Paypal we add the following elements to the body (not in shadow dom)...

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

After that call window.paypal.Button.render with 

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

This will put the PayPal button, PayPal credit button and PayPal CC buttons centered on the screen.

Then in the render onCancel/onError/onAuthorize tear down the backdrop and the paypal buttons.

Upvotes: 1

Related Questions