
Research
/Security News
Weaponizing Discord for Command and Control Across npm, PyPI, and RubyGems.org
Socket researchers uncover how threat actors weaponize Discord across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
@cloudbeds/payment-element-webcomponent
Advanced tools
Web component wrapper for Cloudbeds Payment SDK
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.
Experience the payment component in action with our live demo featuring:
If your project is built with React, instead use @cloudbeds/payment-sdk.
<script src="https://cdn.jsdelivr.net/npm/@cloudbeds/payment-element-webcomponent@^0/cloudbeds-payment-element.min.js"></script>
npm install @cloudbeds/payment-element-webcomponent
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@cloudbeds/payment-element-webcomponent/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>
import { PaymentElementWebComponent } from '@cloudbeds/payment-element-webcomponent';
// Register the web component (if not already registered)
if (!customElements.get('cloudbeds-payment-element')) {
customElements.define('cloudbeds-payment-element', PaymentElementWebComponent);
}
const { PaymentElementWebComponent } = require('@cloudbeds/payment-element-webcomponent');
// Register the web component (if not already registered)
if (!customElements.get('cloudbeds-payment-element')) {
customElements.define('cloudbeds-payment-element', PaymentElementWebComponent);
}
import { PaymentElementWebComponent, PaymentHandles } from '@cloudbeds/payment-element-webcomponent';
// Register the web component (if not already registered)
if (!customElements.get('cloudbeds-payment-element')) {
customElements.define('cloudbeds-payment-element', PaymentElementWebComponent);
}
// Type-safe event handling
const paymentElement = document.querySelector('cloudbeds-payment-element') as PaymentElementWebComponent;
let paymentHandles: PaymentHandles = null;
paymentElement['on-render'] = (handles: PaymentHandles) => {
// handles.submit() and handles.validate() are properly typed
paymentHandles = handles;
};
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 | 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 | ❌ |
interface PaymentHandles {
submit(): Promise<PaymentResult>;
validate(): Promise<boolean>;
}
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);
<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.
See the included example html file for a comprehensive example showing:
Payment SDK works with any modern JavaScript framework:
For issues and questions, please contact support@cloudbeds.com
FAQs
Web component wrapper for Cloudbeds Payment SDK
The npm package @cloudbeds/payment-element-webcomponent receives a total of 37 weekly downloads. As such, @cloudbeds/payment-element-webcomponent popularity was classified as not popular.
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.
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.
Research
/Security News
Socket researchers uncover how threat actors weaponize Discord across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Socket now integrates with Bun 1.3’s Security Scanner API to block risky packages at install time and enforce your organization’s policies in local dev and CI.
Research
The Socket Threat Research Team is tracking weekly intrusions into the npm registry that follow a repeatable adversarial playbook used by North Korean state-sponsored actors.