@one-cp/web-checkout NPM

1-CP Corporate Checkout Web SDK

The 1-CP Web SDK is a lightweight yet powerful JavaScript library that seamlessly integrates the 1-CP Corporate Checkout experience directly into your web applications. It's designed to streamline corporate purchasing, making it as effortless and intuitive as your favorite online shopping experience.

Why choose the 1-CP Web SDK?

Seamless Integration: Easily embed the 1-CP Corporate Checkout technology into your existing web applications, regardless of your tech stack.
Enhanced User Experience: Provide your employees with a familiar, user-friendly checkout process that boosts adoption and satisfaction, leading to higher compliance.

Usage

Installation

You can install the 1-CP Web SDK via npm:

npm install @one-cp/web-checkout

Alternatively, you can include it directly in your HTML file using a script tag:

<script src="https://one-cp-public.s3.eu-central-1.amazonaws.com/init.min.js"></script>

Initialization

To integrate the 1-Cp checkout into your web application, follow these steps:

Import or include the One-CP Web SDK in your JavaScript file or HTML file.
Call the init function with the required parameters:

import { init } from '@one-cp/web-checkout'; 

// Initialize 1-Cp checkout
init({
  transactionID: 'transaction_id',
  widgetID: 'your_widget_id',
  config: {
    env: 'sandbox', // or 'production'
    mode: 'lightbox', // or 'inline'
    containerID: 'checkout-container', // required only for inline mode
    expand: false 
    viewOnly: false
  },
  onScuuess: function() {
    // Callback function on successful transaction
    console.log('Transaction completed successfully');
  },
  onError: function(errorMessage) {
    // Callback function on transaction error
    console.error('Transaction failed:', errorMessage);
  },
  onClose: function() {
    // Callback function on iframe close
    console.log('Checkout iframe closed');
  }
});

Parameters

Parameter	Description	Values	Default Value
`transactionID`	Unique ID for the transaction.	-	-
`widgetID`	ID of the widget associated with the transaction.	-	-
`config`	Configuration object for customizing the checkout.	(optional) See config object	-
`onScuuess`	Callback function called on successful transaction.	(optional)	-
`onError`	Callback function called on transaction error.	(optional)	-
`onClose`	Callback function called when checkout is closed.	(optional)	-

Config

Parameter	Description	Values	Default Value
`env`	Environment for the checkout.	`'sandbox'` or `'production'`	`'sandbox'`
`mode`	Mode of checkout display.	`'lightbox'` or `'inline'`	`'lightbox'`
`containerID`	ID of the container element for inline mode.	(optional)	-
`expand`	Expanded or open/close the expanded component.	`true` or `false`	`false`
`viewOnly`	Hidden actions.	`true` or `false`	`false`
`colors`	Custom colors for the checkout interface.	(optional) See Colors object	-
`logoURL`	Custom logo URL for the provider.	string	-
`hidePriceOverThumbnail`	Hide/Show price over thumbnail	`true` or `false`	`false`
`hideCo2Tag`	Hide/Show co2 tag	`true` or `false`	`false`
`lang`	ISO 639 language codes the checkout interface language.	`'en'` or `'de'`	`'en'`

Note: Please note, that passing a widget ID will overwrite the logo URL parameter. If no logo is found in the widget configuration, the logoURL passed in the configuration will be used. If neither is available, a default company logo will be shown.
Note: Please note, that passing a widget ID will overwrite the hidePriceOverThumbnail and hideCo2Tag parameters.
Note: Please note, that passing a language will override the browser's default language. The language selector in the footer will not be shown. This is particularly useful for ensuring a consistent language experience for users, regardless of their browser settings.

Colors

Color Parameter	Description	Default Values
`lightbox-color`	Lightbox overlay color.	#2e2f4690
`primary-color`	Main color for header text and buttons.	#2e2f46
`light-primary-text`	Text color on the main color buttons and components.	#ffffff
`primary-color-white`	The main background color.	#ffffff
`primary-color-light`	Gray color background.	#f9f9fb
`dark-primary-text`	Main text color.	##000000de
`medium-color-shade`	Disabled buttons and other disabled elements color.	#808289
`medium-color-gray`	Border color for input fields	#8d8d8d
`accent-color`	Hover effects on buttons and other elements.	#6992c9
`tertary-color-shade-tint`	Borders and checkbox color.	#d8e4e3
`danger-color`	Danger color for alerts background and validation forms errors.	#eb445a
`danger-color-text`	Danger color text for error messages and alerts.	#ffffff

Note: Please note, that passing a widget ID will overwrite the color configuration.

How to obtain a transaction ID:

Your backend needs to call the /initilize endpoint 1-CP API. To obtain clint-id and client-secret on the 1-CP Dashboard please go to

config -> widget create your one widget and configure it. then you will have the clint-id, and client-secret.

Example HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>One-Cp Checkout Example</title>
</head>
<body>
  <div id="checkout-container"></div>
  <script src="https://one-cp-public.s3.eu-central-1.amazonaws.com/init.min.js"></script>

  <script>
    const transactionID = await request('your-api-to-create-transaction')

    // Initialize One-Cp checkout
    OneCP.init({
      transactionID,
      widgetID: 'your_widget_id',
      config: {
        env: 'sandbox',
        mode: 'inline',
        containerID: 'checkout-container', // required only for inline mode
        expand: false 
        viewOnly: false
        lang: 'de' // Set checkout interface to German
      },
      onScuuess: function() {
        console.log('Transaction completed successfully');
      },
      onError: function(errorMessage) {
        console.error('Transaction failed:', errorMessage);
      },
      onClose: function() {
        console.log('Checkout iframe closed');
      }
    });
  </script>
</body>
</html>

11 months ago

11 months ago

12 months ago

1 year ago

1 year ago