The One-CP Web SDK is a library designed to facilitate the integration of the One-Cp checkout system into web applications. It provides a simple and seamless way to embed the One-Cp checkout experience into your web pages.
You can install the One-CP Web SDK via npm:
npm install @one-cp/web-checkoutAlternatively, you can include it directly in your HTML file using a script tag:
<script src="//one-cp-web-checkout/init.js"></script>
To integrate the One-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'; // for npm installation
// Initialize One-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
},
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');
}
});
| Parameter | Description | Values | Default Value |
|---|---|---|---|
transactionID |
Unique ID for the transaction. | - | - |
widgetID |
ID of the widget associated with the transaction. | - | - |
config.env |
Environment for the checkout. |
'sandbox' or 'production'
|
'sandbox' |
config.mode |
Mode of checkout display. |
'lightbox' or 'inline'
|
'lightbox' |
config.containerID |
ID of the container element for inline mode. | (optional) | undefined |
onScuuess |
Callback function called on successful transaction. | (optional) | undefined |
onError |
Callback function called on transaction error. | (optional) | undefined |
onClose |
Callback function called when checkout is closed. | (optional) | undefined |
Your backend needs to call /init-transaction endpoint One-CP API and provide the clint-id and clinet-secret in the headers. To obtain clint-id and clinet-secret on the One-CP Dashboard please go to - config -> widget create your one widget and config it.
then you will have the widget-id, clint-id, and clinet-secret.
<!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="//one-cp-web-checkout/init.js"></script>
<script>
const transactionID = await request('your-api-to-create-transaction')
// Initialize One-Cp checkout
init({
transactionID,
widgetID: 'your_widget_id',
config: {
env: 'sandbox',
mode: 'inline'
},
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>