You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 9 Next »

Overview
 

With PayPal Express, users are able to complete the checkout process in very few steps. Customers can use the delivery and billing address information they have stored with PayPal, rather than re-entering it all again on your website. This makes checkout quicker and easier, and can therefore increase conversion rates.

PayPal Express checkout can be implemented on BPD websites 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: 
  5. Click 'Update' to save.
     
     

For testing on your Stage site, use the following credentials:



Step-by-step guide

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: 

  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 B: 

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


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

 

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

 

Congratulations, PayPal Express is now implemented on your website! 
 

 

  • No labels

© Copyright 2001-2023 Commerce Vision Pty Ltd. Use of this site signifies your acceptance of Commerce Vision’s Terms & Conditions. CV Connect, the Commerce Vision logos, and other Commerce Vision marks are assets of Commerce Vision Pty Ltd.