Checkout Web SDK

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
  },
  onSuccess: 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	-
onSuccess	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	-
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 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
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
medium-color-gray	Border color for input fields	#8d8d8d

• 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 config 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
      },
      onSuccess: function() {
        console.log('Transaction completed successfully');
      },
      onError: function(errorMessage) {
        console.error('Transaction failed:', errorMessage);
      },
      onClose: function() {
        console.log('Checkout iframe closed');
      }
    });
  </script>
</body>
</html>