# 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.