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>