PayPal Custom Checkout
January 30, 2017
For a long time PayPal has offered ‘Custom Payment Pages‘ to it’s users. Custom payment pages help you streamline the user experience and allow you to provide a customized checkout via PayPal that includes your website logo and/or business name etc. Recently I was working on an e-commerce website that used PayPal and I wanted take advantage of PayPal’s custom payment pages feature to provide a beautiful checkout with the site’s header logo at the top of the page. I went through all the required steps as described in the custom payment pages link above and included the hidden form field in my PayPal button code (example below) but my custom checkout page was not working. Instead I kept getting my default checkout page that just displayed my business name and not the logo of the site like I wanted.
<input name="page_style" type="hidden" value="MyPageStyleName" />
This was rather frustrating as I’ve setup a custom payment page with PayPal several times in the past and it always worked perfectly. As long as you made sure you host your header logo for the checkout on HTTPS everything worked perfectly. If you mistakenly hosted your header logo on an HTTP link then your customers would be presented with a mixed-content warning in their browser and you don’t want that!
I began digging around online to see if other users have also been having issues with the custom payment pages. After going through several posts on the PayPal Support Forum, I came across another user complaining that the custom checkout pages were no longer working. It seems that right around the time that PayPal upgraded it’s website and forced the new user interface (no longer offering the PayPal Classic option) the custom payment pages no longer worked. If you configured your PayPal checkout button with the page_style hidden form field, users would just get your default checkout page and not the intended custom page style you setup. Luckily I found a workaround for this problem! The solution is to change the hidden form field in your PayPal button. The page_style form field no longer works; instead you now need to use image_url to get the custom checkout experience you want. Below is an example of the hidden form field you’ll need to add to your PayPal button code:
<input name="image_url" type="hidden" value="https://www.mydomain.com/images/paypal-checkout-header.png" />
Instead of creating the page style in your PayPal account then specifying it’s name you just specify the custom header image for your checkout using the image_url form field. Just make sure that your image is hosted on an HTTPS link and that it’s width doesn’t exceed 400px and its height doesn’t exceed 90px. That’s all there is to it! Now you can again enjoy having custom checkout pages for your e-commerce websites. One added bonus of setting up the custom checkout pages using the image_url method is there is no limit on the number of custom checkout experiences you can create. With the previous page_style method you were limited to a maximum of three custom payment pages. I hope this post helps anyone that might have also experienced trouble with PayPal custom checkout pages. Thanks!