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. |
This guide covers the implementation of PayPal Express checkout on BPD websites. Please note that implementation differs slightly for sites using Click & Collect.
Before beginning, have your PayPal Merchant credentials handy and ensure your CSS is up-to-date for PayPal Express:
- Login to the CMS.
- Navigate to Settings --> Settings.
- Select the PayPalExpress tab.
- 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)
- Click 'Update' to save.
For testing on your Stage site, use the sandbox environment credentials. Contact Commerce Vision Support if you require assistance with this.
The PayPal button on the product detail page can behave in one of two ways:
Follow the steps below for your preferred option.
Option A:
- Navigate to Content --> Standard Pages.
- Select the Product Detail template.
- Add the 'PayPalExpressButton' widget to the template.
- Click 'Edit' on the PayPalExpressButton widget to open configuration options.
- Ensure 'Display Button?' is unticked.
- Click 'Save'.
- Click 'Edit' on the Product Purchase Details widget to open configuration options.
- Tick 'Show PayPal Express Checkout?'.
- Click 'Save'.
Option B:
- Navigate to Content --> Standard Pages.
- Select the Product Detail template.
- Add the 'PayPalExpressButton' widget to the template.
- Click 'Edit' on the PayPalExpressButton widget to open configuration options.
- Tick 'Display Button?'.
- Click 'Save'.
- Click 'Edit' on the Product Purchase Details widget to open configuration options.
- Ensure 'Show PayPal Express Checkout?' is unticked.
- Click 'Save'.
- Navigate to Content --> Standard Pages.
- Select the Cart template.
- 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.
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.
- Navigate to Content --> Standard Pages.
- Select the Product Detail template.
- Add the following widgets to any zone (placement does not matter, as these are not rendered in the page view):
- Overlay
- Cart Delivery Options Store Click And Collect
- Overlay
- PayPal Express Navigation Overlay
- Click 'Edit' on the first Overlay widget.
- Add a Description, for example 'Click & Collect Overlay'.
- Enter the Template Name - widget-cart-delivery-options.
- Tick 'Modal'.
- Tick 'Header Content From Template'.
- Click 'Save'.
- Click 'Edit' on the second Overlay widget.
- As before, enter a Description. For example: 'PayPal Express Overlay'.
- Enter the Template Name - widget-pay-pal-express-navigation-overlay.
- Tick 'Modal'.
- Click 'Save'.
- Click 'Edit' on the PayPalExpressButton widget.
- 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
- Tick 'Display Navigation Overlay?'.
- Click 'Save'.
Congratulations, PayPal Express is now implemented on your website!
Related articles appear here based on the labels you select. Click to edit the macro and add or change labels.