Why not embed payment pages in the same page?



  • In my experience, when purchasing something online, the checkout page of the vendor usually redirects to a https://en.wikipedia.org/wiki/Payment_gateway of the company handling the payments. I insert my credit card details on the payment gateway page, the payment is processed, which then redirects me back to the vendor’s website.

    Would it lead to a better user experience if the payment gateway is embedded in an https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe on the vendor’s website instead? This would allow customers to complete the purchase without any navigation in the browser.



  • I've worked on this problem in the past; musefan's comment is exactly why you see hosted order pages.

    Many payment systems offer APIs that can be embedded seamlessly into a site, but then your organization becomes responsible for keeping them secure, and hackers spend a lot of time performing junk transactions and other attacks to breach your site. If you're a smaller organization without a big infosec team, a hosted order page brings a lot of peace of mind.

    Why not embed the external payment page in an iframe? Here's what I ran into:

    1. iframes don't play well with responsive design. You end up struggling with making things work on a variety of viewports, and it looks hinky.
    2. The hosted order page provider usually limits how much customization you can do. You can usually get the CSS looking 90% like your site, but something won't match, and again, looks hinky.
    3. Cross-domain warnings can pop up on occasion. The iframe is https, your site is hopefully also https, the certificates don't match, and browsers get mad and throw warnings about embedded scripts, images, and other stuff. Users don't like entering sensitive info into sites that throw warnings.

    Hosted order pages aren't the greatest experience, either, but users can be prompted to expect them, and they "feel" more secure. The payment gateway or provider is 100% responsible for keeping them safe to use. It's better for the user, and better for the merchant.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2