Cloudbeds Payment Element Web Component - CDN Example

ℹ️ Note: This demo loads the web component via CDN. The API key & property ID are set to test values.

Demo

Payment Form Example

Using <cloudbeds-payment-element>

⏳ Loading payment form...

✅ Payment Successful!

Payment Method Hash:
✅ All fields are valid and ready for submission!

CDN Usage

<script src="https://cdn.jsdelivr.net/npm/@cloudbeds/payment-element-webcomponent@^0/cloudbeds-payment-element.min.js"></script>

Component Properties

The <cloudbeds-payment-element> web component accepts the following attributes:

Property
Type
Required
Default
api-key
string
Required
-
▼
Current Value (from demo above)
api-key="pbl.MLJRSscYMBpdoAHOwXiSpUvDWOqnMImTOJJdzF6NGo8="
Usage Examples
Example 1: Basic usage with API key
<cloudbeds-payment-element api-key="pbl.YOUR_API_KEY_HERE" property-id="12345" amount="100.00" ></cloudbeds-payment-element>
Example 2: In production with real API key
<cloudbeds-payment-element api-key="pbl.AbCdEfGhIjKlMnOpQrStUvWxYz123456789" property-id="177070" amount="250.00" currency="usd" env="prod" ></cloudbeds-payment-element>
Additional Notes
Your Cloudbeds API key for authentication. Obtain this from your Cloudbeds dashboard.
property-id
string
Required
-
▼
Current Value (from demo above)
property-id="177070"
Usage Examples
Example:
<cloudbeds-payment-element api-key="pbl.YOUR_API_KEY" property-id="177070" amount="150.00" ></cloudbeds-payment-element>
Additional Notes
Your unique Cloudbeds property ID. This identifies which property the payment is associated with and determines the available payment methods and processor configurations for that property.
amount
string
Required
-
▼
Current Value (from demo above)
amount="100.00"
Usage Examples
Example 1: Fixed amount
<cloudbeds-payment-element api-key="pbl.YOUR_API_KEY" property-id="177070" amount="100.00" currency="usd" ></cloudbeds-payment-element>
Example 2: Dynamic amount from reservation
<script> // Calculate amount dynamically const reservationTotal = 347.50; const element = document.querySelector('cloudbeds-payment-element'); element.setAttribute('amount', reservationTotal.toFixed(2)); </script> <cloudbeds-payment-element id="payment" api-key="pbl.YOUR_API_KEY" property-id="177070" amount="10.12" ></cloudbeds-payment-element>
Additional Notes
The payment amount as a string with decimal precision (e.g., "100.00"). This should include the decimal portion even for whole numbers, to maintain consistency across different currencies.
currency
string
Optional
Property's currency
▼
Current Value (from demo above)
currency="usd"
Usage Examples
Example 1: USD currency
<cloudbeds-payment-element api-key="pbl.YOUR_API_KEY" property-id="177070" amount="100.00" currency="usd" ></cloudbeds-payment-element>
Example 2: EUR for European property
<cloudbeds-payment-element api-key="pbl.YOUR_API_KEY" property-id="177070" amount="85.00" currency="eur" lang="fr" ></cloudbeds-payment-element>
Additional Notes
ISO 4217 currency code (e.g., "usd", "eur", "gbp"). If not specified, the property's default currency will be used.
env
string
Optional
"prod"
▼
Current Value (from demo above)
env="prod"
Allowed Values
"prod" "stage" "dev" "local"
Usage Examples
Example 1: Production environment
<cloudbeds-payment-element api-key="pbl.YOUR_API_KEY" property-id="177070" amount="100.00" env="prod" ></cloudbeds-payment-element>
Example 2: Staging environment for testing
<cloudbeds-payment-element api-key="pbl.YOUR_STAGING_API_KEY" property-id="177070" amount="100.00" env="stage" ></cloudbeds-payment-element>
Additional Notes
The environment to use for API requests. Valid values are "prod" (production), "stage" (staging), "dev" (development), or "local" (local development). Use "stage" for testing before deploying to production.
lang
string
Optional
"en"
▼
Current Value (from demo above)
lang="en" (default, not explicitly set)
Usage Examples
Example 1: English (default)
<cloudbeds-payment-element api-key="pbl.YOUR_API_KEY" property-id="177070" amount="100.00" lang="en" ></cloudbeds-payment-element>
Example 2: Spanish localization
<cloudbeds-payment-element api-key="pbl.YOUR_API_KEY" property-id="177070" amount="100.00" currency="usd" lang="es" ></cloudbeds-payment-element>
Additional Notes
Language code for UI localization (e.g., "en", "es", "fr", "de", "pt"). This controls the language of labels, error messages, and other UI text. If not specified, defaults to "en" (English).
guest
string
Optional
null
▼
Current Value (from demo above)
guest='{"firstName":"John","lastName":"Doe","email":"john.doe@example.com","phone":"555-123-4567"}'
Usage Examples
Example 1: Guest with all fields
<cloudbeds-payment-element api-key="pbl.YOUR_API_KEY" property-id="177070" amount="100.00" guest='{ "firstName": "Jane", "lastName": "Smith", "email": "jane.smith@example.com", "phone": "+1-555-987-6543" }' ></cloudbeds-payment-element>
Example 2: Minimal guest data
<cloudbeds-payment-element api-key="pbl.YOUR_API_KEY" property-id="177070" amount="100.00" guest='{ "firstName": "John", "email": "john@example.com" }' ></cloudbeds-payment-element>
Additional Notes
Guest information as a JSON string. Supported fields: firstName, lastName, email, and phone. This data can be used to pre-fill form fields or associate the payment with a guest record. The JSON must be properly escaped when used as an HTML attribute.
theme
string
Optional
SDK default
▼
Current Value (from demo above)
theme not set (using SDK default)
Usage Examples
Example 1: Custom colors
<cloudbeds-payment-element api-key="pbl.YOUR_API_KEY" property-id="177070" amount="100.00" theme='{ "colors": { "primary": "#0074d9", "text": "#333333", "border": "#e0e0e0" } }' ></cloudbeds-payment-element>
Example 2: Custom fonts and colors
<cloudbeds-payment-element api-key="pbl.YOUR_API_KEY" property-id="177070" amount="100.00" theme='{ "colors": { "primary": "#2c3e50", "background": "#ecf0f1" }, "fonts": { "base": "Arial, sans-serif" } }' ></cloudbeds-payment-element>
Additional Notes
Custom theme configuration as a JSON string. Allows you to customize the appearance of the payment element to match your branding. Supports customization of colors, fonts, and other visual properties. If not provided, the SDK's default theme is used.
allowed-payment-methods
string
Optional
All allowed
▼
Current Value (from demo above)
allowed-payment-methods not set (all methods enabled)
Usage Examples
Example 1: Card and PayPal only
<cloudbeds-payment-element api-key="pbl.YOUR_API_KEY" property-id="177070" amount="100.00" allowed-payment-methods='["card", "paypal"]' ></cloudbeds-payment-element>
Example 2: Card only
<cloudbeds-payment-element api-key="pbl.YOUR_API_KEY" property-id="177070" amount="100.00" allowed-payment-methods='["card"]' ></cloudbeds-payment-element>
Additional Notes
JSON array of allowed payment methods (e.g., '["card", "paypal", "oxxo", "google_pay", "apple_pay"]'). This restricts which payment methods are shown to the user, even if more methods are configured for the property. If not specified, all payment methods configured for the property are available.
scoped-css
string
Optional
"false"
▼
Current Value (from demo above)
scoped-css="false" (default)
Allowed Values
"true" "false"
Usage Examples
Example 1: Disabled (default)
<cloudbeds-payment-element api-key="pbl.YOUR_API_KEY" property-id="177070" amount="100.00" scoped-css="false" ></cloudbeds-payment-element>
Example 2: Enabled for style isolation
<cloudbeds-payment-element api-key="pbl.YOUR_API_KEY" property-id="177070" amount="100.00" scoped-css="true" ></cloudbeds-payment-element>
Additional Notes
Enable scoped CSS to isolate the component's styles from the host page. Set to "true" to enable or "false" to disable (default). When enabled, the component's styles won't affect or be affected by global page styles, which is useful for preventing style conflicts.
capture
string
Optional
"auto"
▼
Current Value (from demo above)
capture="auto" (default)
Allowed Values
"auto" "manual"
Usage Examples
Example 1: Auto capture (immediate)
<cloudbeds-payment-element api-key="pbl.YOUR_API_KEY" property-id="177070" amount="100.00" capture="auto" ></cloudbeds-payment-element>
Example 2: Manual capture for authorization
<cloudbeds-payment-element api-key="pbl.YOUR_API_KEY" property-id="177070" amount="100.00" capture="manual" ></cloudbeds-payment-element>
Additional Notes
Payment capture mode. "auto" (default) captures the payment immediately upon authorization. "manual" only authorizes the payment, allowing you to capture it later (useful for scenarios like pre-authorization or when you need to confirm order details before charging).
💡 Tip: Properties that accept JSON strings should be properly escaped when used in HTML attributes. For complex objects, consider setting them via JavaScript after the component is mounted.