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:

CDN Usage

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

Component Properties

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

Property Type Required Default Description
api-key string Required - Your Cloudbeds API key for authentication
property-id string Required - Your property ID
amount string Required - Payment amount (e.g., "100.00")
currency string Optional Property's currency Currency code (e.g., "USD", "EUR")
env string Optional "prod" Environment: "prod", "stage", "dev", or "local"
lang string Optional "en" Language code for localization (e.g., "en", "es", "fr")
guest string Optional null Guest information as JSON string (firstName, lastName, email, phone)
theme string Optional SDK default Custom theme configuration as JSON string
allowed-payment-methods string Optional All allowed Allowed payment methods as JSON array (e.g., '["card", "paypal"]')
scoped-css string Optional "false" Enable scoped CSS ("true" or "false")
capture string Optional "auto" Payment capture mode ("auto" or "manual")
💡 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.