Skip to content

@cloudbeds Cloudbeds

payment-element-webcomponent 0.5.7

Install from the command line:
Learn more about npm packages
$ npm install @cloudbeds/payment-element-webcomponent@0.5.7
Install via package.json:
"@cloudbeds/payment-element-webcomponent": "0.5.7"

About this version

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

View Interactive 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.7/cloudbeds-payment-element.min.js"></script>

Quick Start

CDN Usage

<!DOCTYPE html>
<html>
<head>
  <script src="https://payment-element.cloudbeds.com/0.5.7/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

Details

Assets

  • payment-element-webcomponent-0.5.7.tgz

Download activity

  • Total downloads 0
  • Last 30 days 0
  • Last week 0
  • Today 0

Recent versions

View all