PayPal Commerce Platform (PPCP)

Website Setup

PayPal Commerce Platform (PPCP) integration consists of two main steps

Onboarding: Connect the PayPal seller account to the CORESense app to enable transactions on behalf of sellers.
Website Configuration: Set up the rendering of PayPal buttons on the checkout screen.

Onboarding

To begin the onboarding process, follow these steps:

Create a PPCP payment processor by navigating to Setup -> System Setting -> Payment Processor -> Add new Merchant Account.
Select 'PayPal Commerce Platform', provide the label and environment details, and click Save.
Go to Website Template Manager -> Plugins -> Checkout -> Edit.
Locate the PayPal Commerce Platform payment type and select the Payment Processor created in the previous step.
Click on the Onboard link next to the payment label.
Complete the onboarding process in the popup window. After completion, if the checkout plugin doesn't refresh automatically, manually edit it and scroll to the PPCP section.
You should see the "Merchant ID" which indicates a successful onboarding of the seller.
Enable the PayPal payment type by selecting the checkbox labelled "PayPal Commerce Platform (Onboarded)" and fill in other required values based on your specific requirements. Click Save to apply the changes.

Note: Ensure that another PayPal payment type named "PayPal" is disabled before activating this integration.

Website Configuration

The next step is to make template changes for the configuration in a new website project:

Search for paypal_fragment template and replace its content with the following code snippet:

{literal}
<script type="text/javascript">
	var loadPPCPPlugin = function() {
		PayPalPaymentProcessorPlugin.initialize({
			clientId: '{/literal}{$ppcp_client_id}{literal}',
			paypalEnvironment: '{/literal}{$ppcp_environment}{literal}',
			enableVenmoButton: {/literal}{$ppcp_venmo}{literal},
			enablePayLaterButton: {/literal}{$ppcp_paylater}{literal},
			enableCardButton: {/literal}{$ppcp_card}{literal},
			paypalFragmentId: 'paypalCheckoutContainer',
		})
	}

	if (typeof PayPalPaymentProcessorPlugin === 'undefined') {
		var e = document.createElement('script')
		e.src = '{/literal}{$secure_base_href}javascript/ppcp.js{literal}'
		e.type = 'text/javascript'
		e.addEventListener('load', loadPPCPPlugin)
		document.getElementsByTagName('head')[0].appendChild(e)
	} else {
		loadPPCPPlugin()
	}
</script>
{/literal}
<div id="payment-message"></div>
<div id="paypalCheckoutContainer" style="max-width: 100px;margin-top: 10px;"></div>

Note: Preview website project to test your new integration.

For Developers

Developers can initialize the PPCP payment plugin with various options that can be overridden by passing key-value parameters. Here is the list of available options in JSON format:

{
  "paypalEnvironment": "production",
  "paypalFragmentId": "paypalCheckoutContainer",

  // Buttons
  "enableVenmoButton": false,
  "enablePayLaterButton": false,
  "enableCardButton": false,

  // Button style
  "buttonStyle": {
    "layout": "vertical",   // horizontal | vertical
    "size": "responsive",   // medium | large | responsive
    "shape": "pill",        // pill | rect
    "color": "gold",        // gold | blue | silver | black
    "fundingicons": true,   // true | false
    "tagline": false        // true | false
  },

  // Fragments
  "checkoutFormId": "form#checkout_form",
  "messageBoxId": "payment-message"
}