Product
Announcing Bun and vlt Support in Socket
Bringing supply chain security to the next generation of JavaScript package managers
By Ricky Reusser, Eli Insua - Nov 19, 2025
🚀 DAY 3 OF LAUNCH WEEK:Announcing Bun and vlt Support in Socket.Learn more →
@cloudbeds/payment-element-webcomponent
Advanced tools
@cloudbeds/payment-element-webcomponent
Web component wrapper for Cloudbeds Payment SDK
Cloudbeds Payment Element Web Component
A web component wrapper for the Cloudbeds Payment SDK, enabling easy integration of payment processing into any website or application. This package provides both CDN and NPM distribution methods for maximum flexibility.
🚀 Try the Live Demo
Experience the payment component in action with our live demo featuring:
- Multiple payment methods (cards, PayPal, bank transfers)
- Real-time form validation
- Theme customization examples
- Event handling demonstrations
Features
- 🚀 Easy Integration: Drop-in web component that works with any framework
- 🌐 Universal Compatibility: Works with vanilla HTML, Vue, Angular, etc.
- 🎨 Customizable: Full theming support and customizable styling
- 🔒 PCI Compliant: Secure tokenization with industry-standard security
- 🌍 Internationalization: Multi-language support
Installation
React
If your project is built with React, instead use @cloudbeds/payment-sdk.
Via CDN (For direct HTML usage - most projects will use it like this)
<script src="https://payment-element.cloudbeds.com/0.5.4/cloudbeds-payment-element.min.js"></script>
Quick Start
CDN Usage
<!DOCTYPE html>
<html>
<head>
<script src="https://payment-element.cloudbeds.com/0.5.4/cloudbeds-payment-element.min.js"></script>
</head>
<body>
<cloudbeds-payment-element
api-key="YOUR_API_KEY"
property-id="YOUR_PROPERTY_ID"
amount="100.00"
currency="usd"
env="prod"
></cloudbeds-payment-element>
<button id="submit-btn">Submit Payment</button>
<script>
let paymentHandles = null;
const paymentElement = document.querySelector('cloudbeds-payment-element');
/**
* onRender callback to receive payment handles (for sending & validating payments).
* @param {Object} handles - Object containing submit & validate functions.
*/
const onRender = (handles) => {
paymentHandles = handles;
};
// Attach function to save submit and validate functions to paymentElement lifecycle.
paymentElement['on-render'] = onRender;
// Submit payment
document.getElementById('submit-btn').addEventListener('click', async () => {
if (!paymentHandles) return;
// Validate form before submitting
const isValid = await paymentHandles.validate();
if (!isValid) {
alert('Please complete all required fields');
return;
}
const result = await paymentHandles.submit();
console.log('Payment hash:', result?.paymentData?.paymentMethodHash);
});
</script>
</body>
</html>
API Reference
Attributes
| Attribute | Type | Required | Default | Description |
|---|---|---|---|---|
api-key | string | ✅ | - | Your Cloudbeds API key |
property-id | string | ✅ | - | Your property ID |
amount | string | ✅ | - | Payment amount (e.g., "100.00") |
currency | string | ❌ | Property's currency setting ("usd" if none) | Currency code in lowercase, e.g. "usd", "eur" |
env | string | ❌ | "prod" | Environment: "prod", "stage", "dev", or "local" |
lang | string | ❌ | "en" | Language code for localization (e.g. "en", "es") |
guest | string | ❌ | null | Guest information as JSON string |
theme | string | ❌ | SDK default theme object | Custom theme configuration as JSON string |
allowed-payment-methods | string | ❌ | All payment method the property allows | Allowed payment methods as JSON array |
scoped-css | string | ❌ | "false" | Enable scoped CSS ("true" or "false") |
capture | string | ❌ | "auto" | Payment capture mode ("auto" or "manual") |
Event Handlers
| Event | Description | Callback Data | Required |
|---|---|---|---|
onRender | Runs when component renders | PaymentHandles object | ✅ |
onChange | Runs when form data changes | Form data object | ❌ |
onError | Runs when an error occurs | Error object | ❌ |
onSubmit | Runs after payment submission | Submission result | ❌ |
PaymentHandles Methods
interface PaymentHandles {
submit(): Promise<PaymentResult>;
validate(): Promise<boolean>;
}
Setting Amount Dynamically
Instead of hardcoding the amount in HTML, you can set it from a JavaScript variable:
const paymentElement = document.getElementById('cloudbeds-payment-element');
paymentElement.setAttribute('amount', 12.21);
Example
<payment-element-webcomponent
id="payment-element"
api-key="YOUR_API_KEY"
property-id="YOUR_PROPERTY_ID"
currency="usd"
env="prod"
></payment-element-webcomponent>
<script>
// Calculate amount from your cart/order
const amount = calculateAmount();
// Set the amount attribute
document
.getElementById('payment-element')
.setAttribute('amount', amount.toFixed(2));
</script>
Note: Always use .toFixed(2) to ensure proper decimal formatting.
Complete Example
See the included example html file for a comprehensive example showing:
- Multiple payment methods
- Event handling
- Validation
- Error handling
Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
Support
For issues and questions, please contact support@cloudbeds.com
FAQs
Web component wrapper for Cloudbeds Payment SDK
We found that @cloudbeds/payment-element-webcomponent demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 91 open source maintainers collaborating on the project.
Package last updated on 22 Oct 2025
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Product
Announcing Socket Certified Patches: One-Click Fixes for Vulnerable Dependencies
A safer, faster way to eliminate vulnerabilities without updating dependencies
By Mikola Lysenko, Jordan Harband, Jonah Ghebremichael - Nov 18, 2025
Product
Reachability for Ruby Now in Beta
Reachability analysis for Ruby is now in beta, helping teams identify which vulnerabilities are truly exploitable in their applications.
By Oskar Haarklou Veileborg - Nov 17, 2025