@one-cp/web-checkout
v1.0.0
Published
This is the One-CP Web Checkout package
Downloads
9
Readme
One-CP Web SDK
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.
Installation
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>Usage
Initialization
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');
}
});Parameters
| 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 |
How to optian a transactionId:
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.
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="//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>