paypal 智能按钮集成问题

Question

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

Answer 1

You can use this workaround to force the popup:

//Changes credit/debit button behavior to "old" version
onShippingChange: function(data,actions){
    //if not needed do nothing..
    return actions.resolve();
},

see also Paypal Smart Payment buttons bug

Answer 2

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.