Issue with paypal smart buttons integration

问题

I've already setup a paypal payments flow. In which if a user were to click to 'pay with PayPal', a pop up opens up which asks the user the sign in to their paypal account and then make the payment from there. This flow works as it is. The issue I'm facing is with the 'pay with credit or debit card' button which the PayPal smart button JavaScript SDK provides. When clicking on this button, it does not open a pop up like it does for the 'pay with PayPal' button. Instead it opens an inline form. I've seen sites where clicking on the 'pay with credit or debit card' button opens a pop up where the form is rendered. What am I missing? I've gone through their Smart Buttons API docs and they have not mentioned how to switch between rendering things inline and a pop up. This is the how I've configured the SDK:

paypal.Buttons({
    enableStandardCardFields: true,
    locale: 'en_US',
    commit: true,
    style: {
      label: 'pay',
      layout: 'vertical',
      fundingicons: 'true'
    },
    funding: {
      allowed: [ paypal.FUNDING.CARD ]
    },
    onInit: function(data, actions) {
      actions.enable()
    },
    createOrder: function() {
      $('div.loading-container').append('<h2>Processing your payment...</h2>')
      return fetch('/create_order', {
        method: 'post',
        headers: {
          'content-type': 'application/json'
        }
      }).then(function(res) {
        return res.json();
      }).then(function(data) {
        return data.table.id;
      });
    },
    onCancel: function(data) {
      $('div.loading-container').empty()
      return;
    },
    onApprove: function(data) {
      return fetch('/capture_order', {
        method: 'post',
        headers: {
          'content-type': 'application/json'
        },
        body: JSON.stringify({
          orderID: data.orderID
        })
      }).then(function(res) {
        return res.json();
      }).then(function(details) {
        if (details.status == 400) {
          window.location.reload();
          return;
        }
        window.history.pushState({ urlPath:'/orders/thanks' }, "" , '/orders/thanks' );
        window.location.reload();
      })
    }
  }).render('div.paypal_container');

Note: You can find the expected behaviour in this link

回答1:

The black Debit or Credit Card button always renders inline (exception: a few countries it isn't enabled for). Most people want this, and consider it nice.

There's no way to make that black button open a window. You can disable the black button, leaving only the normal PayPal button, which has the other behavior.

来源：https://stackoverflow.com/questions/62952208/issue-with-paypal-smart-buttons-integration

标签

javascript

paypal