Page History

...

PayPal Express checkout can be implemented on BPD websites quickly and easily, using the guides below.  

Image Removed

by following the guide below. Please note that implementation differs slightly for sites using Click & Collect. 

Prerequisites

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.
   Image Added 

Step-by-step guide

...

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

...

. 

The 'Checkout with PayPal ' button on the product detail page can behave in 1 one of 2 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 1A: 

1. Navigate to Content --> Standard Pages. 
2. Select the Product Detail template. 
3. Add the 'PayPalExpressButton' widget to the template.
4. Click 'Edit' on the PayPalExpressButton widget to open configuration options.
5. Ensure 'Display Button?' is unticked. 
6. Click 'Save'. 
7. Click 'Edit' on the Product Purchase Details widget to open configuration options. 
8. Tick 'Show PayPal Express Checkout?'.
9. Click 'Save'.
   
    

Option 2B: 

1. Navigate to Content --> Standard Pages. 
2. Select the Product Detail template. 
3. Add the 'PayPalExpressButton' widget to the template.
4. Click 'Edit' on the PayPalExpressButton widget to open configuration options.
5. Tick 'Display Button?'.
6. Click 'Save'. 
7. Click 'Edit' on the Product Purchase Details widget to open configuration options. 
8. Ensure 'Show PayPal Express Checkout?' is unticked.
9. Click 'Save'. 
   
    

...

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).
   

   

    

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, implementation is slightly different.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 method 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. 

3. Add the additional widgets to the Product Detail page. 

1. Navigate to Content --> Standard Pages.
2. Select the Product Detail template. 
3. Add the following widgets to any zone (placement does not matter, as these are not rendered in the page view): 
   1. Overlay
   2. Cart Delivery Options Store Click And Collect
   3. Overlay
   4. PayPal Express Navigation Overlay
      Image Added 
4. Click 'Edit' on the first Overlay widget. 
5. Add a Description, for example 'Click & Collect Overlay'.
6. Enter the Template Name - widget-cart-delivery-options.
7. Tick 'Modal'.
8. Tick 'Header Content From Template'.
9. Click 'Save'.
   Image Added 
10. Click 'Edit' on the second Overlay widget. 
11. As before, enter a Description. For example: 'PayPal Express Overlay'.
12. Enter the Template Name - widget-pay-pal-express-navigation-overlay.
13. Tick 'Modal'.
14. Click 'Save'.
    Image Added 

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 Added

Congratulations, PayPal Express is now implemented on your website! 

Related articles