Paypal api – 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