@computop_paygate_gmbh/computop-paypal

v1.0.1

Published

a year ago

npm package allowing to integrate Paypal easier

0High
0Medium
0Low

computop_paygate_gmbh

psp computop paypal paylater venmo npm button payment express

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

`script` Parameters

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

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)

`computop` Parameters (CT REST API)

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>");

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 ([email protected]). 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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme