PayPal Integration - Merchant Signup Button

To simplify onboarding of existing or new PayPal merchant accounts, you can add the "Sign up with PayPal" button to your web interface using a Preczn-hosted JavaScript client

1. Include the Preczn PayPal boarding client on your page

Add the secure, hosted JavaScript reference in the <head> of your page:

<script src="https://api.preczn.com/v1/clients/paypalBoarding.min.js?merchantId=2zyd88xrnr90xskmjmqpd0x1vj&publicApiKey=2482re32338cd9z5048v7bhmb5&redirectUrl=https%3A%2F%2Fwww.preczn.com"></script>

The two following query parameters on the script src URL are required:

Parameter	Value
`merchantId`	The Preczn merchantId for which you want to display the PayPal onboarding button.
`publicApiKey`	Your platform public API key for authentication.
`redirectUrl`	The HTTP or HTTPS URL to which to redirect after the merchant signup process has completed. (This value must be URL encoded.)

2. Define the button location

Define the location for the button on your page, we suggest containing it within a <div>:

<div id="paypal-signup-button-container" style="width: 200px"></div>

📘
Note that the button's minimum width is 200px.
It's maximum width is unconstrained, and fills the available width by default.

3. Optionally define the JavaScript error callback function

Define a JavaScript callback function for approved transaction results:

var paypalSignupErrorCallback = function(errors) {
	console.error(`Sign up with PayPal errors:\r\n - ${errors.join('\r\n - ')}`);
}

If no errors occurred, the errors parameter value will be null, otherwise errors will contain an array of strings describing any error conditions.

4. Add the button

Call the Preczn JavaScript client to create the button:

<script type="text/javascript">
  Preczn.PayPal.addSignupButton("paypal-signup-button-container", paypalSignupErrorCallback);
</script>

The addSignupButton function requires 1 parameter:

Parameter	Type	Description
1. Container ID	`string`	The HTML DOM element ID for the element which will contain the PayPal onboarding button (we suggest containing it within a `<div>` element).

This will load all of the required scripts and stylesheets from both Preczn and PayPal into the <head> of your page, and render the merchant PayPal signup button!

The resulting button

🚀

PayPal Merchant Boarding Button

Open Recipe

Merchant not yet connected to PayPal

If the merchant ID provided does not have a PayPal connection associated with it, the following button will be rendered, which will trigger the PayPal flow described here in the PayPal documentation.
Note that you need no integration to PayPal's API or SDKs here, Preczn handles all of that for you!

Merchant connected to PayPal

Once the merchant completes the connection process, or if the merchant already has a PayPal connection and credentials configured in Preczn, the following button will be rendered:

Error conditions

If any error conditions occur, such as invalid merchantId, failed authentication, etc. then the Preczn PayPal script will not load any PayPal dependencies or render the button on your page. Instead, the script will call a provided error callback function with an array of strings indicating that one or more errors have occurred.

Error	Description
`Unauthorized.`	The provided `publicApiKey` was not valid.
`Platform does not have required PayPal credentials.`	Your platform account at Preczn does not have a PayPal connection configured with requisite credentials. The required credentials include `Account ID`, `Client ID`, and `Client Secret`.
`Merchant not found.`	The provided `merchantId` query parameter was not valid.
`Invalid redirect URL.`	The provided `redirectUrl` query parameter is not a valid HTTP or HTTPS URL value.

Using with a Content Security Policy

If you are using a Content Security Policy to secure your client-side web application, you will need to extend your policy to allow paypalBoarding.min.js to load and connect to the Preczn API, as well as to load the PayPal scripts and connect to PayPal.

Please add the following directives to your content security policy:

Directive	Values
`script-src`	`api.preczn.com *.paypal.com`
`connect-src`	`api.preczn.com *.paypal.com`