PAYONE Commerce Platform Client JavaScript SDK

Welcome to the PAYONE Commerce Platform Client JavaScript SDK for the PAYONE Commerce Platform. This SDK provides everything a client needs to easily complete payments using Credit or Debit Card, PAYONE Buy Now Pay Later (BNPL) and Apple Pay.

Features

Credit Card Tokenizer: Securely tokenize credit and debit card information.
Fingerprinting Tokenizer: Generate unique tokens for device fingerprinting.
Apple Pay Session Integration: Seamlessly integrate Apple Pay into your payment workflow.

Installation

To install the PAYONE Commerce Platform Client JavaScript SDK, you can use either npm, yarn, or pnpm. Choose the command that corresponds to your package manager:

Using npm:

npm install pcp-client-javascript-sdk

Using yarn:

yarn add pcp-client-javascript-sdk

Using pnpm:

pnpm add pcp-client-javascript-sdk

back to top

Usage

Credit Card Tokenizer

The Credit Card Tokenizer is an essential component for handling payments on the PAYONE Commerce Platform. It securely collects and processes credit or debit card information to generate a paymentProcessingToken, which is required for the Server-SDK to complete the payment process. Without this token, the server cannot perform the transaction. The tokenizer ensures that sensitive card details are handled securely and is PCI DSS (Payment Card Industry Data Security Standard) compliant.

To integrate the Credit Card Tokenizer feature into your application, follow these steps:

1. Setup Input Containers and Submit Button:

Create a container for each input iframe. For example:

<div id="cardpanInput"></div>
<div id="cardcvc2Input"></div>
<div id="cardExpireMonthInput"></div>
<div id="cardExpireYearInput"></div>

Create a submit button to trigger the credit card check:
```
<button id="submit">Submit</button>
```
If you want to use the credit card icons from the PAYONE CDN, make sure to have a container for them:
```
<div id="ccIcons"></div>
```

2. Import Tokenizer and Types from the SDK:

import {
  PCPCreditCardTokenizer,
  Config,
  Request,
} from 'pcp-client-javascript-sdk';

3. Configuration Object:

The configuration object sets up styles, auto card type detection, credit card icons, and callbacks.

Example Configuration Object:

  const config: Config = {
    fields: {
      cardpan: { selector: '#cardpanInput', type: 'text' },
      cardcvc2: {
        selector: '#cardcvc2Input',
        size: '4',
        maxlength: '4',
        type: 'password',
        length: { V: 3, M: 3, A: 4, J: 0 },
      },
      cardexpiremonth: { selector: '#cardExpireMonthInput', type: 'text' },
      cardexpireyear: { selector: '#cardExpireYearInput', type: 'text' },
    },
    defaultStyle: {
      input: 'font-size: 1em; border: 1px solid #000; width: 175px;',
      inputFocus: 'border: 1px solid #00f;',
      select: 'font-size: 1em; border: 1px solid #000; width: 175px;',
      iframe: {
        width: '100%',
        height: '40px',
      },
    },
    autoCardtypeDetection: {
      supportedCardtypes: ['V', 'M', 'A', 'D', 'J'],
      callback: (detectedCardtype) => {
        console.log(`Detected card type: ${detectedCardtype}`);
      },
    },
    language: 'de',
    submitButtonId: 'submit',
    ccIcons: {
      selector: '#ccIcons',
      mapCardtypeToSelector: {
        V: '#visa',
        M: '#mastercard',
        A: '#american-express',
        D: '#diners-club',
        J: '#jcb',
      },
      style: {
        height: '20px',
        width: '30px',
      },
    },
    creditCardCheckCallback: (response) => {
      console.log('Credit card check response:', response);
      // Handle the response as needed
    },
  };

Below are the details for each field in the configuration object:

Property: fields

Defines the various input fields for credit card details.

Property	Type	Description
`cardpan`	`FieldConfig`	Configuration for the card number field.
`cardcvc2`	`FieldConfig`	Configuration for the card CVC2 field.
`cardexpiremonth`	`FieldConfig`	Configuration for the card expiration month field.
`cardexpireyear`	`FieldConfig`	Configuration for the card expiration year field.
`cardtype`	`CardtypeFieldConfig` (optional)	Configuration for the card type field.

FieldConfig

selector: string
The CSS selector for the input element.
element: HTMLElement (optional)
The actual DOM element if not using a selector.
size: string (optional)
The size attribute for the input element.
maxlength: string (optional)
The maximum length of input allowed.
length: { [key: string]: number } (optional)
Specifies the length for various card types (e.g., { V: 3, M: 3, A: 4, J: 0 }).
type: string
The type attribute for the input element (e.g., text, password).
style: string (optional)
CSS styles applied to the input element.
styleFocus: string (optional)
CSS styles applied when the input element is focused.
iframe: { width?: string; height?: string } (optional)
Dimensions for the iframe if used.

CardtypeFieldConfig

selector: string
The CSS selector.
element: HTMLElement (optional)
The actual DOM element if not using a selector.
cardtypes: string[]
List of supported card types (e.g., ['V', 'M', 'A', 'D', 'J']). The new card type "#" enforces user selection and displays "Please select" initially.

Property: defaultStyle

Defines the default styling for various elements.

Property	Type	Description
`input`	`string`	CSS styles for input elements.
`inputFocus`	`string`	CSS styles for focused input elements.
`select`	`string`	CSS styles for select elements.
`iframe`	`{ width?: string; height?: string }`	Dimensions for the iframe.

Property: autoCardtypeDetection

Configuration for automatic card type detection.

Property	Type	Description
`supportedCardtypes`	`string[]`	List of supported card types.
`callback`	`(detectedCardtype: string) => void`	Callback function triggered upon card type detection.
`deactivate`	`boolean` (optional)	If true, deactivates auto card type detection.

Additional Configurations

Property	Type	Description
`language`	`string`	The language for the SDK (e.g., `'de'`).
`submitButton`	`SubmitButtonConfig`	Configuration for the submit button.
`submitButtonWithOutCompleteCheck`	`SubmitButtonConfig` (optional)	Configuration for the submit button that skips the completeness check.
`ccIcons`	`CreditCardIconsConfig` (optional)	Configuration for loading credit card icons from the PAYONE CDN and mounting them on the specified selector with individual selectors for easy access.
`error`	`string` (optional)	The name of the div-container where error messages should be displayed.
`creditCardCheckCallback`	`(response: { [key: string]: string; status: string; pseudocardpan: string; truncatedcardpan: string; cardtype: string; cardexpiredate: string }) => void`	Callback function for credit card check responses.
`formNotCompleteCallback`	`() => void` (optional)	Callback function triggered when the form is not complete.
`payOneScriptId`	`string` (optional)	The ID for the PAYONE script to be loaded. Defaults to `payone-hosted-script`.

SubmitButtonConfig

selector: string (optional)
The CSS selector for the submit button.
element: HTMLElement (optional)
The actual DOM element if not using a selector.

CreditCardIconsConfig

selector: string (optional)
The CSS selector for the container of the credit card icons.
element: HTMLElement (optional)
The actual DOM element if not using a selector.
mapCardtypeToSelector: Partial<Record<Cardtype, string>> (optional)
Maps card types to their corresponding icon selectors (e.g., { V: '#visa', M: '#mastercard' }).
style: { [key: string]: string | undefined; height?: string; width?: string; } (optional)
CSS styles for the icons (e.g., { height: '20px', width: '30px' }).

Card Types

The Cardtype enum defines the supported credit card types within the SDK. Each card type corresponds to a particular credit card brand and has specific BIN (Bank Identification Number) ranges for automatic detection. The following table provides details on each card type, its value, and the BIN ranges used for automatic detection:

Cardtype	Value	BIN Range	Comment
`V`	Visa	4
`M`	MasterCard	51-55, 2221-2720
`A`	American Express	34, 37
`D`	Diners / Discover	300-305, 3095, 36, 38, 39, 601, 64, 65
`J`	JCB	3528-3589
`O`	Maestro International	50, 56-58, 602, 61, 620, 627, 63, 67
`P`	China Union Pay	62212600-62299800, 624-626, 6282-6288
`U`	UATP / Airplus	1220, 1920	Coming soon; not available yet
`G`	girocard	68	Currently only viable for e-commerce payments via Apple Pay

The Cardtype values are used within the configuration object to specify the supported card types for various fields and functionalities, such as the automatic card type detection and the selection of credit card icons.

4. Request Object:

The Request object is a crucial component used to initiate a credit card check via the PAYONE API. Below are the detailed instructions on how to construct the Request object, including descriptions of its properties and their required values.

Example Request Object

const request: Request = {
  request: 'creditcardcheck',
  responsetype: 'JSON',
  mode: 'test', // or 'live'
  mid: '123456789', // your Merchant ID
  aid: '987654321', // your Account ID
  portalid: '12340001', // your Portal ID
  encoding: 'UTF-8', // or 'ISO-8859-1'
  storecarddata: 'yes',
  api_version: '3.11',
  checktype: 'TC', // optional, for Deutsche Bahn only
  // The hash is generated by the PAYONE Commerce Platform Client JavaScript SDK.
};

Request Object Properties

Attribute	Value	Description
`request`	`'creditcardcheck'`	Fixed value indicating the type of request.
`responsetype`	`'JSON'`	Fixed value indicating the response format.
`mode`	`'live'` or `'test'`	Mode for transactions.
`mid`	Your Merchant ID	Merchant ID
`aid`	Your Account ID	Account ID
`portalid`	Your Portal ID	Portal ID
`encoding`	`'ISO-8859-1'` or `'UTF-8'`	Character encoding to be used.
`storecarddata`	`'yes'` or `'no'`	Specifies whether a pseudocardnumber shall be generated for later use (e.g. payment request)
`api_version`	`'3.11'`	Recommended API version to be used; it's recommended to use the newest version
`checktype`	`'TC'` (optional)	Configuration valid for Deutsche Bahn only. Indicates starting `creditcardcheck` with travel cards.
`hash`	Generated hash value	SHA-2 384 hash over request values plus the portal key in your PMI portal configuration.

Hash Generation

The hash attribute is a security feature that ensures the integrity and authenticity of the request. It is generated by creating an HMAC-SHA384 hash of the concatenated request values (in alphabetical order) and your portal key. The PAYONE Commerce Platform Client JavaScript SDK handles the hash generation, so no additional implementation is necessary on your part.

5. Initialize the Credit Card Tokenizer:

Initialize the Credit Card Tokenizer with the configuration and request objects, along with your PMI Portal Key:

const pmiPortalKey = 'your-pmi-portal-key';
const creditCardTokenizer = await PCPCreditCardTokenizer.create(
  config,
  request,
  pmiPortalKey,
);

6. Handle Credit Card Input and Submission:

When the user enters valid credit card information and clicks the submit button, the creditCardCheckCallback will be triggered, providing the response with all necessary information for the server to continue the credit card payment process.

For further information see: https://docs.payone.com/pcp/commerce-platform-payment-methods/credit-and-debit-card-payments and https://docs.payone.com/integration/channel-client-api/client-api-hosted-iframe-mode

back to top

Fingerprinting Tokenizer

To detect and prevent fraud at an early stage for the secured payment methods, the Fingerprinting Tokenizer is an essential component for handling PAYONE Buy Now, Pay Later (BNPL) payment methods on the PAYONE Commerce Platform. During the checkout process, it securely collects three different IDs to generate a snippetToken in the format <partner_id>_<merchant_id>_<session_id>. This token must be sent from your server via the API parameter paymentMethodSpecificInput.customerDevice.deviceToken. Without this token, the server cannot perform the transaction. The tokenizer sends these IDs via a code snippet to Payla for later server-to-Payla authorization, ensuring the necessary device information is captured to facilitate secure and accurate payment processing.

To integrate the Fingerprinting Tokenizer feature into your application, follow these steps:

1. Import Tokenizer from the SDK:

import { PCPFingerprintingTokenizer } from 'pcp-client-javascript-sdk';

2. Setup Selector for Script and Link Tag:

Ensure you have a selector for the script and link tag. You can use a specific element or simply use the body as the selector:
```
<div id="fingerprintContainer"></div>
```
Alternatively, you can use the body selector:
```
<body></body>
```

3. Create a New Fingerprinting Tokenizer Instance:

Initialize a new FingerprintingTokenizer instance by invoking the static create method with the appropriate parameters, including a unique session ID for each checkout experience. If you don't have a session ID, you can generate one using a GUIDv4 function or let the SDK generate it automatically:

const selector = '#fingerprintContainer'; // or 'body'
const environment = 't'; // 't' for test, 'p' for production
const paylaPartnerId = 'your-payla-partner-id';
const partnerMerchantId = 'your-partner-merchant-id';
const sessionId = yourUniqueSessionId || generateGUIDv4() || undefined; // Optional: You can pass a unique session ID or let the SDK generate one

const paylaScriptId = 'your-payla-script-id'; // Optional: The ID for the Payla script element. Default is "paylaDcs"
const paylaStylesheetId = 'your-payla-stylesheet-id'; // Optional: The ID for the Payla stylesheet element. Default is "paylaDcsStylesheet"

const fingerprintingTokenizer = await PCPFingerprintingTokenizer.create(
  selector,
  environment,
  paylaPartnerId,
  partnerMerchantId,
  sessionId,
  paylaScriptId,
  paylaStylesheetId,
);

4. Get Snippet Token:

Once the scripts are loaded, you can obtain the snippet token required for the special payment process by calling:
```
const token = fingerprintingTokenizer.getSnippetToken();
```
This snippet token is automatically generated when the PCPFingerprintingTokenizer instance is created and is also stored by Payla for payment verification. You need to send this snippet token to your server so that it can be included in the payment request. Add the token to the property paymentMethodSpecificInput.customerDevice.deviceToken.

5. (Optional) Get Unique SessionID:

If you need to retrieve the unique session ID that was used or generated during the creation of the PCPFingerprintingTokenizer instance, you can do so by calling the getUniqueId method:
```
const sessionID = fingerprintingTokenizer.getUniqueId();
```

For further information see: https://docs.payone.com/pcp/commerce-platform-payment-methods/payone-bnpl/payone-secured-invoice

back to top

Apple Pay Session Integration

This section guides you through integrating Apple Pay into your web application using the pcp-client-javascript-sdk. The integration involves configuring the Apple Pay button and handling the Apple Pay session.

1. Setup Your Server and Environment

Make sure that your server is set up and your environment is configured correctly according to the Apple Developer documentation. Follow the guidelines in the following resources:

2. Setup Selector for Apple Pay Button

Ensure you have a selector for the apple pay button element:
```
<div id="apple-pay-button"></div>
```

3. Import PCPApplePaySession and Types from the SDK

import {
  ApplePayButton,
  encodeToBase64,
  PCPApplePaySession,
  PCPApplePaySessionConfig,
} from 'pcp-client-javascript-sdk';

4. Session Configuration Object

The PCPApplePaySessionConfig interface extends ApplePayJS.ApplePayPaymentRequest and includes additional properties required for managing the Apple Pay session.

Additional PCPApplePaySessionConfig Properties

Property	Type	Description
applePayVersion	`number`	The version of Apple Pay on the Web that your website supports. See version history.
validateMerchantURL	`string`	The URL your server must use to validate itself and obtain a merchant session object.
processPaymentURL	`string`	The URL your server must use to process the payment.
applePayButtonId	`string` (optional)	The ID for the Apple Pay button element. Default is "apple-pay-button-script".
paymentMethodSelectedCallback	`(paymentMethod: ApplePayJS.ApplePayPaymentMethod) => Promise<ApplePayJS.ApplePayPaymentMethodUpdate>` (optional)	Callback function called when the user selects a new payment method.
couponCodeChangedCallback	`(couponCode: string) => Promise<ApplePayJS.ApplePayCouponCodeUpdate>` (optional)	Callback function called when the user enters or updates a coupon code.
shippingMethodSelectedCallback	`(shippingMethod: ApplePayJS.ApplePayShippingMethod) => Promise<ApplePayJS.ApplePayShippingMethodUpdate>` (optional)	Callback function called when the user selects a shipping method.
shippingContactAddressSelectedCallback	`(shippingContact: ApplePayJS.ApplePayPaymentContact) => Promise<ApplePayJS.ApplePayShippingContactUpdate>` (optional)	Callback function called when the user selects a shipping contact in the payment sheet.
cancelCallback	`() => void` (optional)	Callback function called when the payment UI is dismissed.
errorCallback	`(type: ErrorType, error: Error) => void` (optional)	Callback function called when an error occurs.

Example Session Configuration Object:

import {
  PCPApplePaySessionConfig,
  encodeToBase64,
} from 'pcp-client-javascript-sdk';

const applePaySessionConfig: PCPApplePaySessionConfig = {
  applePayVersion: 3,
  countryCode: 'DE',
  currencyCode: 'EUR',
  merchantCapabilities: ['supports3DS'], // mandatory
  supportedNetworks: ['visa', 'masterCard', 'amex', 'girocard'],
  total: {
    label: 'Demo',
    type: 'final',
    amount: '200.99',
  },
  requiredBillingContactFields: ['postalAddress', 'name', 'email'],
  requiredShippingContactFields: ['postalAddress', 'name', 'email'],
  shippingMethods: [
    {
      label: 'Standard Shipping',
      amount: '5.00',
      detail: 'Arrives in 5-7 days',
      identifier: 'standard',
    },
    {
      label: 'Express Shipping',
      amount: '10.00',
      detail: 'Arrives in 2-3 days',
      identifier: 'express',
    },
  ],
  validateMerchantURL: 'https://your-merchant.url/validate-merchant',
  processPaymentURL: 'https://your-merchant.url/process-payment',
  // A Base64-encoded string used to contain your application-specific data. (See: https://developer.apple.com/documentation/apple_pay_on_the_web/applepayrequest/2951834-applicationdata)
  applicationData: encodeToBase64(
    JSON.stringify({
      foo: 'bar',
    }),
  ),
  paymentMethodSelectedCallback: async (paymentMethod) => {
    console.log('paymentMethodSelectedCallback', paymentMethod);
    return {
      newTotal: applePaySessionConfig.total,
    };
  },
  couponCodeChangedCallback: async (couponCode) => {
    console.log('couponCodeChangedCallback', couponCode);
    return {
      newTotal: applePaySessionConfig.total,
    };
  },
  shippingMethodSelectedCallback: async (shippingMethod) => {
    console.log('shippingMethodSelectedCallback', shippingMethod);
    return {
      newTotal: applePaySessionConfig.total,
    };
  },
  shippingContactAddressSelectedCallback: async (shippingContact) => {
    console.log('shippingContactAddressSelectedCallback', shippingContact);
    return {
      newTotal: applePaySessionConfig.total,
    };
  },
  cancelCallback: () => {
    console.log('cancelCallback');
  },
  errorCallback: (type, error) => {
    console.error('Apple Pay Error:', type, error);
  },
};

5. Apple Pay Button Configuration

You need to configure the appearance and behavior of the Apple Pay button. The ApplePayButtonConfig interface allows you to specify the style, type, and locale of the button, as well as additional CSS styles.

ApplePayButtonConfig Properties

Property	Type	Description
buttonstyle	`'black' \| 'white' \| 'white-outline'`	The appearance of the Apple Pay button. See button styles.
type	Various types	The kind of Apple Pay button. See button types.
locale	`string`	The language and region used for the displayed Apple Pay button. See button locales.
style	`object`	Additional CSS styles to apply to the Apple Pay button.

Example Apple Pay Button Configuration:

import { ApplePayButton } from 'pcp-client-javascript-sdk';

const applePayButton: ApplePayButton = {
  selector: '#apple-pay-button',
  config: {
    buttonstyle: 'black',
    type: 'plain',
    locale: 'de-DE',
    style: {
      width: '100%',
      height: '50px',
      borderRadius: '10px',
    },
  },
};

6. Integrating the Apple Pay Session

To integrate the Apple Pay session, you need to create an instance of the session using the PCPApplePaySession.create method. This method takes the session configuration and the button configuration as parameters.

Example:

import {
  ApplePayButton,
  PCPApplePaySession,
  PCPApplePaySessionConfig,
} from 'pcp-client-javascript-sdk';

const applePaySessionConfig: PCPApplePaySessionConfig = {...};
const applePayButton: ApplePayButton = {...};

await PCPApplePaySession.create(applePaySessionConfig, applePayButton);

For further information see: https://docs.payone.com/payment-methods/apple-pay

back to top

PAYONE Commerce Platform Compliant Interfaces

In addition to the Client-SDK, we also provide multiple Server-SDKs. If you want to directly expose PAYONE Commerce Platform compliant objects from your client, you can find all the necessary interfaces within the interfaces folder.

Example:

import type { CreateCheckoutRequest } from 'pcp-client-javascript-sdk';

const createCheckoutRequest: CreateCheckoutRequest = {...}

back to top

Demonstration Projects

You can find demonstration projects for each feature in the corresponding directories:

Credit Card Tokenizer: Check out the creditcard-tokenizer-demo folder.
Fingerprinting Tokenizer: See the fingerprinting-tokenizer-demo folder.
Apple Pay Session Integration: Refer to the applepay-demo folder.

Building the SDK

Before running a demo project, you need to build the SDK in the root folder. This is necessary because the dist folder that gets created during the build process is targeted by the dependency with file:.. that is referenced in the credit card tokenizer and fingerprinting tokenizer demo projects.

To build the SDK, run the following command in the root folder:

npm run build

This command compiles the SDK and creates the dist folder, making it available for the demo projects to use.

Environment Variables

All the demos are using .env files for passing in sensitive information such as Keys, Identifier, URLs, and other configuration details. If you want to try out these demos, you must add an .env (or .env.local) file according to the given .env.example with your own credentials.

VITE_ Prefix

Each demo app uses Vite as the build tool. Vite exposes environment variables on the special import.meta.env object, which are statically replaced at build time. This ensures that the configuration is securely managed and tailored for different environments (development, production, etc.).

Environment variables with the VITE_ prefix are exposed to your client-side code. This is a security measure to prevent accidental exposure of sensitive data. Vite will only expose variables prefixed with VITE_, which ensures that server-only variables are not included in the client bundle.

Example .env file for the apple pay demo:

# client demo environment variables
VITE_APPLE_PAY_VALIDATE_MERCHANT_URL=https://your-merchant-domain.de/validate-merchant
VITE_APPLE_PAY_PROCESS_PAYMENT_URL=https://your-merchant-domain.de/process-payment
# server demo environment variables
APPLE_PAY_MERCHANT_IDENTIFIER=merchant.de.your.project
MERCHANT_DOMAIN_WITHOUT_PROTOCOL_OR_WWW=your-merchant-domain.de

back to top

Contributing

See CONTRIBUTING.md

back to top

Releasing the library

Preparing the Release

Checkout develop branch
Create release branch (release/0.1.0)

git checkout -b release/0.1.0

Apply versioning

npm version major|minor|patch

Changelog Generation with Conventional Changelog

The changelog gets generated automatically when the npm version gets bumped via npm version major|minor|patch within the version.sh script.

Conventional Commit Messages:
- Ensure all commit messages follow the conventional commit format, which helps in automatic changelog generation.
- Commit messages should be in the format: type(scope): subject.
Enforcing Commit Messages:
- We enforce conventional commit messages using Lefthook with commitlint.
- This setup ensures that all commit messages are validated before they are committed.

Merging the Release Branch

Create PR on develop branch
Merge develop in master branch

GitHub Action for Release

After successfully merging all changes to the master branch, an admin can trigger a GitHub Action to finalize and publish the release. This action ensures that the release process is automated, consistent, and deploys the new release from the master branch.

Triggering the GitHub Action:

Only admins can trigger the release action.
Ensure that all changes are committed to the master branch.
Navigate to the Actions tab on your GitHub repository and manually trigger the release action for the master branch.

Optional: Creating a GitHub Release

Once the release has been published to npm, developers can start using the latest version of the SDK. However, if you want to make the release more visible and include detailed release notes, you can optionally create a GitHub release.

Navigate to the Releases Page: Go to the "Releases" section of your repository on GitHub.
Draft a New Release: Click "Draft a new release".
Tag the Release: Select the version tag that corresponds to the version you just published on npm (e.g., v0.1.0).
Release Title: Add a descriptive title for the release (e.g., v0.1.0 - Initial Release).
Auto-Generated Release Notes: GitHub can automatically generate release notes based on merged pull requests and commit history. You can review these notes, adjust the content, and highlight important changes.
Publish the Release: Once you're satisfied with the release notes, click "Publish release".

Creating a GitHub release is optional, but it can provide additional context and visibility for your users. For detailed guidance, refer to the GitHub documentation on managing releases.

By following these steps, you can efficiently manage and streamline the release process for the PAYONE Commerce Platform Client JavaScript SDK, ensuring that the new release is published from the master branch while maintaining consistency and reliability.

back to top

Minimum Supported Browser Versions

The PAYONE Commerce Platform Client JavaScript SDK targets ES6 (ECMAScript 2015) and supports the following minimum browser versions:

Browser	Minimum Supported Version
Google Chrome	51+
Mozilla Firefox	54+
Microsoft Edge	15+
Safari	10.1+
Opera	38+
iOS Safari	10.3+
Samsung Internet	5.0+
Android Browser	127+
Opera Mobile	80+
Chrome for Android	127+
Firefox for Android	127+

These versions ensure compatibility with ES6 features such as arrow functions, classes, template literals, and more.

For optimal performance and access to the latest features, we recommend using the most recent versions of your preferred browser.

back to top

License

This project is licensed under the MIT License. For more details, see the LICENSE file.

back to top

Name		Name	Last commit message	Last commit date
Latest commit History 93 Commits
.github/workflows		.github/workflows
applepay-demo		applepay-demo
creditcard-tokenizer-demo		creditcard-tokenizer-demo
fingerprinting-tokenizer-demo		fingerprinting-tokenizer-demo
src		src
.gitignore		.gitignore
.npmignore		.npmignore
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
commitlint.config.js		commitlint.config.js
eslint.config.mjs		eslint.config.mjs
lefthook.yml		lefthook.yml
package-lock.json		package-lock.json
package.json		package.json
sonar-project.properties		sonar-project.properties
tsconfig.json		tsconfig.json
version.sh		version.sh
vitest.config.ts		vitest.config.ts

License

PAYONE-GmbH/PCP-client-javascript-SDK

Folders and files

Latest commit

History

Repository files navigation

PAYONE Commerce Platform Client JavaScript SDK

Table of Contents

Features

Installation

Usage

Credit Card Tokenizer

1. Setup Input Containers and Submit Button:

2. Import Tokenizer and Types from the SDK:

3. Configuration Object:

Property: fields

FieldConfig

CardtypeFieldConfig

Property: defaultStyle

Property: autoCardtypeDetection

Additional Configurations

SubmitButtonConfig

CreditCardIconsConfig

Card Types

4. Request Object:

Example Request Object

Request Object Properties

Hash Generation

5. Initialize the Credit Card Tokenizer:

6. Handle Credit Card Input and Submission:

Fingerprinting Tokenizer

1. Import Tokenizer from the SDK:

2. Setup Selector for Script and Link Tag:

3. Create a New Fingerprinting Tokenizer Instance:

4. Get Snippet Token:

5. (Optional) Get Unique SessionID:

Apple Pay Session Integration

1. Setup Your Server and Environment

2. Setup Selector for Apple Pay Button

3. Import PCPApplePaySession and Types from the SDK

4. Session Configuration Object

Additional PCPApplePaySessionConfig Properties

5. Apple Pay Button Configuration

ApplePayButtonConfig Properties

6. Integrating the Apple Pay Session

PAYONE Commerce Platform Compliant Interfaces

Demonstration Projects

Building the SDK

Environment Variables

VITE_ Prefix

Contributing

Releasing the library

Preparing the Release

Changelog Generation with Conventional Changelog

Merging the Release Branch

GitHub Action for Release

Optional: Creating a GitHub Release

Minimum Supported Browser Versions

License

About

Resources

License

Stars

Watchers

Forks

Releases 1

Packages 0

Contributors 2

Languages

Packages