@hesabe-pay/embedded-hosted-checkout
v1.0.14
Published
Hesabe Payments JavaScript SDK for embedded payment processing
Readme
@hesabe-pay/embedded-hosted-checkout
JavaScript SDK for Hesabe payment gateway integration with support for KNET, Credit/Debit Cards (MPGS), and Apple Pay.
Installation
Via CDN
<script src="https://unpkg.com/@hesabe-pay/embedded-hosted-checkout@latest/cdn/hesabe-payments.min.js"></script>Via NPM
npm install @hesabe-pay/embedded-hosted-checkout<script src="node_modules/@hesabe-pay/embedded-hosted-checkout/cdn/hesabe-payments.min.js"></script>Usage
Basic Setup
- Create a container element in your HTML:
<div id="hesabe-payments"></div>- Initialize the payment form:
const config = {
environment: "sandbox", // or "production"
sessionID: "pass checkout response data",
paymentTypes: ["knet", "card", "applepay"],
debug: true,
callback: function(result) {
console.log('Payment result:', result);
// Handle payment result
if (result.status === 'SUCCESS') {
console.log('Payment successful:', result.data);
} else if (result.status === 'FAILED') {
console.log('Payment failed:', result.data);
} else if (result.status === 'ERROR') {
console.log('Payment initiz error');
} else if (result.status === 'CANCELLED') {
console.log('Payment cancelled');
}
}
};
hesabePayment.init(config);Configuration Options
| Option | Type | Required | Description |
|--------|------|----------|-------------|
| environment | string | Yes | Environment: "sandbox", "production" |
| sessionID | string | Yes | session data from Hesabe Checkout API response |
| paymentTypes | array | Yes | Payment methods: ["knet", "card", "applepay"] |
| callback | function | No | Callback function for payment results |
| debug | boolean | No | Enable debug logging (default: false) |
Payment Types
knet- KNET debit card paymentscard- Credit/Debit card payments via MPGSapplepay- Apple Pay payments (Safari only)
Callback Response
The callback function receives a response object with the following structure:
{
status: "SUCCESS" | "FAILED" | "CANCELLED" | "ERROR",
method: "knet" | "card" | "applepay",
data: {
// Transaction details
token: "transaction_token",
amount: "10.000",
currency: "KWD",
status: "SUCCESS"
// ... other transaction data
}
}Example
<!DOCTYPE html>
<html>
<head>
<title>Hesabe Payments Example</title>
<script src="https://unpkg.com/@hesabe-pay/embedded-hosted-checkout@latest/cdn/hesabe-payments.min.js"></script>
</head>
<body>
<div id="hesabe-payments"></div>
<script>
// Your session data from Hesabe API checkout response
const sessionData = "eyJ0eXAiOiJKV1QiLCJhbGc...";
const config = {
environment: "sandbox",
sessionID: sessionData,
paymentTypes: ["knet", "card", "applepay"],
debug: true,
callback: function(result) {
if (result.status === 'SUCCESS') {
console.log('Transaction:', result.data);
} else {
console.log('Payment failed: ' + result.data);
}
}
};
// Initialize payment form
hesabePayment.init(config);
</script>
</body>
</html>Browser Support
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
Features
- ✅ Responsive design
- ✅ Multiple payment methods
- ✅ Real-time validation
- ✅ Transaction verification
- ✅ Loading states and animations
Support
For technical support or questions, please contact Hesabe support team.
License
MIT