Open stripe checkout popup in same page in mobile

Question

Stripe is opening checkout popup in same page in PC but on mobile it's opening in new window which is bad for user experience.

So What I'm trying to do is make the user agent is like PC browser and this is worked in PHP but I couldn't find a way to send user agent when I call checkout.js, and her is my code:

$.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader('User-Agent', 'Mozilla/5.0 (Windows NT 10.0; WOW64; rv:46.0) Gecko/20100101 Firefox/46.0');
    }
});
$.ajax({
  url: 'https://checkout.stripe.com/checkout.js',
  type: 'GET',
  dataType: 'script',
  xhrFields: {
    withCredentials: true,
  },
  crossDomain: true,
  success: function(){

    var handler = StripeCheckout.configure({
      key: 'pk_test_6pRNASCoBOKtI',
      locale: 'auto',
      token: function(token) {
        // You can access the token ID with `token.id`.
        // Get the token ID to your server-side code for use.
      }
    });

    $('#customButton').on('click', function(e) {
      // Open Checkout with further options:
      handler.open({
        name: 'Stripe.com',
        description: '2 widgets',
        amount: 2000
      });
      e.preventDefault();
    });

    // Close Checkout on page navigation:
    $(window).on('popstate', function() {
      handler.close();
    });
  }
});

score 1 · Answer 1 · edited May 23 '17 at 12:00

It is not possible to change the user agent in an AJAX request, as explained here: https://stackoverflow.com/a/5862744/5307473.

Besides, there are good reasons for Checkout to use a tab rather than a modal popup on mobile browsers. Even if you succeeded in spoofing the user agent, Checkout would then fail in some cases as some mobile browsers would fail to send the payment information to Stripe, which would result in an even worse experience for your customers.

Open stripe checkout popup in same page in mobile

1 Answers1