Page History

...

This guide covers the implementation of PayPal Express checkout on BPD websites. Please note that implementation differs slightly for sites using Click & Collect. 

...

Step-by-step guide

To enable PayPal Express for your BPD site: 

1. Login to the CMS. 
2. Navigate to Settings --> Website Features.
3. Click the grey 'minus' icon to enable PayPal Express. 
4. Verify that the icon changes to a green tick, and an 'Edit' button appears for the feature.
   (screenshot here) 
5. Click 'Edit'.
6. Enter your xxxx credentials. 
   (screenshot here) 
7. Enter overrides if required. 
   (screenshots here) 
8. Update the Product Detail and Cart settings - these determine where the 'Check out with PayPal' button will appear. 
9. Click 'Save' to save changes and stay on the page, or 'Save and Exit' to save changes and return to the Features index.
   
   

Congratulations, PayPal Express is now implemented on your website! 

Before beginning, have your PayPal Merchant credentials handy and ensure your CSS is up-to-date for PayPal Express:  

1. Login to the CMS. 
2. Navigate to Settings --> Settings.
3. Select the PayPalExpress tab. 
4. Populate the fields as follows: 
   • PayPal Express Login URL = https://www.paypal.com/cgi-bin/webscr?cmd=_express-checkout
   • PayPal Express Endpoint = https://api-3t.paypal.com/nvp
   • PayPal Express Username = (Your PayPal Merchant username)
   • PayPal Express Password = (Your PayPal Merchant password)
   • PayPal Express Signature = (Your PayPal Merchant Signature)
5. Click 'Update' to save.
    
    

...

1. Add the PayPal Express button to the Product Detail page. 

The PayPal button on the product detail page can behave in one of two ways: 

• Option A -  add that product to the cart, then redirect to the PayPal site
• Option B -  immediately redirect to the PayPal site with the current contents of the cart (e.g. the user must add the product to cart first)

Follow the steps below for your preferred option.

Option A: 

...

Option B: 

...

2. Add the PayPal Express button to the Cart page: 

1. Navigate to Content --> Standard Pages.
2. Select the Cart template. 
3. Add the 'Cart PayPalExpress Button' widget to Zone BottomAfter (or other location consistent with your site's design).
   

   Image Removed

    

If your site does not use Click & Collect, that's it! PayPal Express is now implemented and ready for use. 

If your site is using Click & Collect, continue with implementation below. 
 

Additional Steps (sites using Click & Collect)

For sites using Click & Collect, additional widgets are required. Overlays are used for scenarios where the user has not yet selected a fulfillment method (Delivery vs Pickup). The overlay is similar to a modal window, where the user is prompted to select their delivery option before being redirected to PayPal. A second overlay is shown when the user is actually redirected. Each 'Overlay' widget requires a corresponding widget to provide its content. 

PayPal Express + Click & Collect	Click & Collect Checkout overlay
Image Removed	Image Removed

...

1. Overlay
2. Cart Delivery Options Store Click And Collect
3. Overlay
4. PayPal Express Navigation Overlay
   Image Removed 

...

...

4. Edit settings for the PayPal Express Button widget. 

1. Click 'Edit' on the PayPalExpressButton widget. 
2. Enter the same overlay template names you referenced in the Overlay templates earlier: 
   • Click And Collect Overlay Template Name - widget-cart-delivery-options
   • Navigation Overlay Template Name - widget-pay-pal-express-navigation-overlay
3. Tick 'Display Navigation Overlay?'.
4. Click 'Save'.
   Image Removed

...

Related articles