Embedded Checkout Design Guide This guide is for PayPal Payflow Link and PayPal Payments Advanced Pay now Pay later Credit card number Expiration date OCTOBER 2011 / v.
© 2011 PayPal, Inc. All rights reserved. PayPal is a registered trademark of PayPal, Inc. The PayPal logo is a trademark of PayPal, Inc. Other trademarks and brands are the property of their respective owners. The information in this document belongs to PayPal, Inc. It may not be used, reproduced or disclosed without the written approval of PayPal, Inc. Copyright © PayPal. All rights reserved. PayPal S.à r.l. et Cie, S.C.A., Société en Commandite par Actions.
Contents About this guide ................................................................................................................................... 4 Intended Audience................................................................................................................................. 4 About PayPal’s Embedded Checkout......................................................................................................... 5 Recommended Checkout Design....................................
About this Guide Embedded Checkout Design Guide provides the recommended best practices for integrating PayPal’s embedded checkout onto your website. Intended Audience This guide is for: • Developers and Partners who are integrating embedded checkout into their websites, shopping carts, and/or other ecommerce applications. • Merchants who would like an overview of the possibilities and constraints when using PayPal’s embedded checkout. PayPal Embedded Checkout Design Guide v.
About PayPal’s Embedded Checkout PayPal’s embedded checkout is an embedded mini-page that can be inserted onto a website to collect payment information. The plug-in was designed to integrate visually with most websites so buyers feel like they are still on your site (see highlighted section in Figure 1). However, PayPal is actually hosting the mini-page, so you don’t have to collect credit card data and deal with the PCI compliance (credit card security compliance) burden for PayPal transactions.
You are able to customize certain elements of PayPal’s embedded checkout to help you better match your website design. These elements are called out in Figure 2 below. Color of Header Text Color of label text Color of Border Color of button and color of text on button Figure 2 – Elements of PayPal’s embedded checkout that can be customized by the merchant. PayPal Embedded Checkout Design Guide v.
Recommended Checkout Design In order to create a great shopper experience and process payments effectively, PayPal recommends the following checkout design: 1 Shopping Cart: Add to cart page. 2 Billing and Shipping: Enter billing address, shipping address and shipping method. Allow consumers to pre-fill shipping address from billing address. Any other data entry fields necessary, such as gift note or discount code, would go on this page. 3 Review and Pay: Review order and pay.
There is one alternate design that you may wish to consider. This design is similar to the recommended design, except that detailed order review is presented before the payment page is presented. This design can be very effective, and it is just as easy to execute technically as the recommended design. The potential downside is that it is not as common a sequence as the recommended design, so buyers may accidentally think they have placed the order before proceeding to the payment page.
Checkout Design to Avoid Some merchants have retrofitted existing checkout flows with PayPal’s embedded checkout in a way that PayPal does not recommend. These sites originally asked for payment information before a detailed order review page.
Other Important Considerations PayPal’s embedded checkout is extremely flexible and can be implemented on nearly any website by a qualified developer. However, it may be necessary to make certain changes to the checkout flow in order to accommodate the feature. • Do not include any other data entry fields on the same page as PayPal’s embedded checkout. For example, billing address cannot be entered on the same page where embedded checkout resides.
