@computop_paygate_gmbh/computop-paypal

JavaScript SDK for PayPal via Computop

The Computop PayPal JavaScript module provides you with all the client-side technology to complement with the integration of PayPal V2 via Computop.

First and foremost, this module will facilitate placing PayPal buttons on your storefront. This includes PayPal, Pay Later, and Venmo (the latter only for US-based merchants though). Using this module brings the additional advantage to allow the PayPal payment flow to take place in a modal that appears as an overlay in your storefront (so-called "in-context" flow).

The general use cases for the PayPal button components are: Render...

• a (single) stand-alone payment button (such as for PayPal or Pay Later)
• a so-called button wall, which means a combination of all available PayPal payment methods
• an express checkout PayPal button that pulls the buyer's address from PayPal
• a button to ask for buyer consent to create a PayPal billing agreement

Combinations of these are also applicable in some cases.

Prerequisites

• Existing PayPal business account (merchant id---sometimes also calles payer id---to identify the account, to be indicated to Computop Helpdesk), Example: ABCGE2Y64Y2RSXYZ
• Existing Computop merchant id (with PayPal pre-configured as a payment method), Example: mymid_ecom
• Third party permissions granted to Computop using the onboarding referral link from the Computop documentation

Installation

You can choose between the following two methods of installation.

Node package manager (NPM)

If you are working with a modern SPA framework (or at least a JS bundler), install the computop-paypal package using npm (or any equivalent package manager):

  npm install @computop_paygate_gmbh/computop-paypal

Then, import the required functions as needed:

import { initPayPal, smartPaymentButton } from "computop-paypal";

Using a <script> tag (UMD)

Otherwise, we also provide Computop PayPal in a Universal Module Definition (UMD) format. To get started, add the following <script> tag to your html file or template:

<script src="js/computop-paypal.umd.js"></script>

Afterwards, access the functions like this:

const { initPayPal, smartPaymentButton } = ComputopPayPal;

Usage

Overview

To display a button or the button wall create a configuration object containing at least all required parameters. Thereafter you can call smartPaymentButton() which will initialize the SDK and display the button(s) in one step.

const smartPaymentButton = ComputopPayPal.smartPaymentButton;

const config = {
  isSandbox: true,
  script: {
    merchantId: "HYT2WXGRCV83G",
  },
  button: {
    fundingSource: "paypal",
  },
  computop: {
    merchantId: "Generic3DSTest",
    len: "230",
    data: "CDC44...",
  },
};

smartPaymentButton(config);

Configuration

The configuration object contains two optional parameters as well as three subobjects:

Subobject	Type	Description
containerId	string	Name of the -element that will contain the button. Default value: "paypal-button-container"
isSandbox	boolean	Decides if PayPal's sandbox or live system should be used. Default value: false
script	object	Required. General configuration for initializing PayPal SDK
button	object	Contains parameters related to the button itself, usually a funding source or style subobject
computop	object	Required. All parameters that are required for Computop Paygate

script Parameters

Parameter	Type	Description
merchantId	string	Required. PayPal MerchantID, also known as PayerID. Do not confuse with Computop MerchantID.
components	string	The PayPal components you intend to render on your page. Default value: "buttons,funding-eligibility"
commit	boolean	Use false for PayPal Express. Default value: true
intent	string	Decides if you want to perform a SALE action ("capture"), create a BillingAgreement ("tokenize") or authorize ("authorize"). Default value: "capture"
vault	boolean	For creating billingAgreementIDs use true. Default value: false
currency	string	Transaction currency. Default value: "EUR"

For full documentation of supported parameters, see JavaScript SDK > Script Configuration > Query parameters on PayPal Developer. Note that at this point in time, only camelCase arguments are supported. Please convert kebab-case arguments as needed.

button Parameters

Parameter	Type	Description
fundingSource	string	To show only the default PayPal button, use 'paypal'; to show only the Pay Later button, use 'paylater'.
style	object	All styling parameters that are supported by PayPal are available and can get passed

For full documentation of supported parameters, see JavaScript SDK > Complete Reference > Buttons on PayPal Developer. Note that at this point in time, only camelCase argumenst are supported. Please convert kebab-case arguments as needed.

computop Parameters (key-value pairs API)

Please see the Computop Documentation for further information: https://developer.computop.com/pages/viewpage.action?pageId=35754745 This SDK supports both Computop APIs. If you use Computop's classic API send the following parameters:

Parameter	Type	Description
merchantId	string	Required. Computop MerchantID that should be used
len	string	Required. Length of the unencrypted blowfish string
data	string	Required. Encrypted data block

computop Parameters (CT REST API)

Computop REST API will fully support this payment method in the future. This module is already enabled to be used with the REST flow.

Parameter	Type	Description
useRest	boolean	Required. Use true to indicate that REST API is in use
payId	string	Required. Computop PayID that has been received
obtainedOrderId	string	Required. OrderID that has been received

Fast configurations with modes

To simplify the integration process, you can pass a mode parameter to the SDK. This parameter automatically configures commonly used settings that are often combined, reducing the need for manual setup. Each mode applies a specific set of default parameters tailored for typical payment scenarios, allowing for faster and easier configuration.

smartPaymentButton(config, "<mode>");

Mode	Description
common	Sets the button label to "Buy now" (default)
express	For PayPal Express. Sets commit to false and the button label to "Checkout"
baid	For generating Billing Agreements. Sets intent to "tokenize", vault to true and the button label to "Paypal"

Show multiple buttons separately

There are use cases where you want to control when the script is loaded (such as for performance optimization).

Sometimes, you might also want to render various buttons in different positions on your page individually. PayPal calls this "standalone payment buttons".

Both becomes possible by the dedicated initPayPal function. Call initPayPal first and render the buttons as you like afterwards.

const smartPaymentButton = ComputopPayPal.smartPaymentButton;
const initPayPal = ComputopPayPal.initPayPal;

const initialConfig = {
  isSandbox: true,
  script: {
    merchantId: "HYT2WXGRCV83G",
  },
};

const buttonOneConfig = {
  containerId: "paypal-button-container-one",
  button: {
    fundingSource: "paypal",
  },
  computop: {
    merchantId: "Generic3DSTest",
    len: "230",
    data: "CDC4...",
  },
};

const buttonTwoConfig = {
  containerId: "paypal-button-container-two",
  button: {
    fundingSource: "paylater",
  },
  computop: {
    merchantId: "Generic3DSTest",
    len: "230",
    data: "CDC4...",
  },
};

// Make sure that the async function initPayPal() finishes before showing the buttons. You can either use callbacks or the "await" syntax.
// smartPaymentButton function is asynchronous as well. So depending on your use case, handle runtime accordingly.
await initPayPal(initialConfig);

smartPaymentButton(buttonOneConfig);
smartPaymentButton(buttonTwoConfig);

Styling options

All styling parameters that are supported by PayPal are available and can get passed as needed to button --> style. Example :

{
  layout: "vertical",
  color: "gold",
  shape: "rect",
  label: "paypal",
};

React to actions other than success (Optional)

In case a customer closes the popup a Cancel-event will be dispatched. to receive it and react to it, subscribe to the payment-canceled event as follows:

document.addEventListener("payment-canceled", () => console.info("Canceled!"));

You can react to errors by listening to the payment-failed event as follows:

document.addEventListener("payment-failed", (err) => console.error(err.detail));

Demos

This module comes with a demo folder containing common examples.

Folder	Scenario
01-button	Only the standard PayPal button should get presented to customers.
02-button-wall	All available buttons should get presented to the customer.
03-custom-button	PayPal button with some styling options to make it match your web page design
04-express-button	PayPal Express button (Shortcut) that would typically be placed on product pages
05-paylater-button-and-banner	Example to demonstrate how to show only paylater button and Buy Now Pay Later banners.
06-multiple-standalone-buttons	You want to display two or more buttons separately at different places.
07-paypal-button-separate-capture	You want to capture later and only authorize during checkout.
08-paypal-button-with-baid	Example to show button for generation of Billing Agreement IDs (BAID).

Debugging and support

In case of any issues, you can usually find more details in your browser's developer tools console (F12).

If additional guidance is required, you can contact Computop Helpdesk as usual ([e-mail]). Please provide as much information as possible and include request and response from the server-side API call to Computop Paygate.

Further resources

Please also check the Computop documentation to learn more about possible parameters and the flow in general: https://developer.computop.com/pages/viewpage.action?pageId=35754745