Checkout Form

/* Componente: Checkout Form */
/* Categoría: intelligent · Librería: core · Versión: 1.0.1 */
/* Formulario de pago IA-First: dirección, envío y cupón con API declarativa, permisos full, autenticación requerida, límite de uso y confirmación obligatoria; expone total y artículos como contexto. */
/* Importar: npx webmcpcss components import core-checkout-form */

.wm-checkout { display: grid; gap: 14px; width: min(100%, 420px); box-sizing: border-box; padding: 24px; background: var(--wm-surface, #fff); border: 1px solid #e5e7eb; border-radius: var(--wm-radius, 14px); box-shadow: 0 10px 30px -18px rgba(17, 24, 39, .35); font-family: system-ui, sans-serif; }
.wm-checkout__head h2 { margin: 0 0 4px; font-size: 20px; }
.wm-checkout__head p { margin: 0; color: #6b7280; font-size: 14px; }
.wm-field { display: grid; gap: 6px; }
.wm-field label, .wm-checkout__coupon label { font-size: 13px; font-weight: 600; color: #374151; }
.wm-field input, .wm-field select, .wm-checkout__coupon input { padding: 10px 12px; border: 1px solid #d1d5db; border-radius: calc(var(--wm-radius, 14px) - 6px); font: 15px system-ui, sans-serif; background: #fff; width: 100%; min-width: 0; box-sizing: border-box; }
.wm-checkout__coupon { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
@media (max-width: 360px) { .wm-checkout__coupon { grid-template-columns: 1fr; } }
.wm-checkout__note { margin: 0; font-size: 12px; color: #6b7280; text-align: center; }
.wm-btn { min-height: 44px; padding: 10px 18px; border: 1.5px solid transparent; border-radius: calc(var(--wm-radius, 14px) - 4px); font: 600 15px/1 system-ui, sans-serif; cursor: pointer; }
.wm-btn--primary { background: var(--wm-primary, #2563eb); color: var(--wm-on-primary, #fff); }
.wm-btn--outline { background: transparent; color: var(--wm-primary, #2563eb); border-color: var(--wm-primary, #2563eb); }

/* Contrato WebMCP: pago = permisos máximos, autenticación, límite y confirmación */
form[data-form="checkout"] button[type="submit"] {
  webmcp-tool: "placeOrder";
  webmcp-description: "Confirma el pedido con la dirección y el método de envío indicados";
  webmcp-param-email: value(form[data-form="checkout"] [name="email"]);
  webmcp-param-address: value(form[data-form="checkout"] [name="address"]);
  webmcp-param-shipping: value(form[data-form="checkout"] [name="shipping"]);
  webmcp-trigger: "submit" on form[data-form="checkout"];
  webmcp-intent: "submit";
  webmcp-confirmation: "needed";
  webmcp-permissions: "full";
  webmcp-requires: "auth";
  webmcp-scope: "orders:pay";
  webmcp-rate-limit: "5/min";
  webmcp-risk: "high";
  webmcp-doc-email: "Correo para el recibo";
  webmcp-doc-address: "Calle, número, ciudad y código postal";
  webmcp-doc-shipping: "standard (3-5 días, gratis) o express (24 h, 6,90 €)";
}
form[data-form="checkout"] [data-tool="applyCoupon"] {
  webmcp-tool: "applyCoupon";
  webmcp-description: "Aplica un cupón de descuento al pedido";
  webmcp-param-code: value(form[data-form="checkout"] [name="coupon"]);
  webmcp-intent: "action";
  webmcp-confirmation: "none";
  webmcp-permissions: "restricted";
  webmcp-rate-limit: "10/min";
}
form[data-form="checkout"] [data-context="order-total"] { webmcp-context: "orderTotal"; webmcp-format: "currency"; }
form[data-form="checkout"] [data-context="cart-count"] { webmcp-context: "cartCount"; webmcp-format: "number"; }

<form class="wm-checkout" data-form="checkout" toolname="placeOrder" tooldescription="Confirma el pedido con la dirección y el método de envío indicados" action="#" method="post" novalidate>
  <header class="wm-checkout__head">
    <h2>Finalizar compra</h2>
    <p><span data-context="cart-count">3</span> artículos · Total <strong data-context="order-total">129,70 €</strong></p>
  </header>
  <div class="wm-field"><label for="ck-email">Correo</label><input id="ck-email" name="email" type="email" required autocomplete="email" toolparamtitle="email" toolparamdescription="Correo para el recibo"></div>
  <div class="wm-field"><label for="ck-address">Dirección de envío</label><input id="ck-address" name="address" type="text" required autocomplete="street-address" toolparamtitle="address" toolparamdescription="Calle, número, ciudad y código postal"></div>
  <div class="wm-field"><label for="ck-shipping">Envío</label>
    <select id="ck-shipping" name="shipping" required toolparamtitle="shipping" toolparamdescription="Método de envío">
      <option value="standard">Estándar (3-5 días) · gratis</option>
      <option value="express">Exprés (24 h) · 6,90 €</option>
    </select>
  </div>
  <div class="wm-checkout__coupon">
    <label for="ck-coupon">Cupón</label>
    <input id="ck-coupon" name="coupon" type="text" placeholder="AGENTE10">
    <button class="wm-btn wm-btn--outline" data-tool="applyCoupon" type="button">Aplicar</button>
  </div>
  <button class="wm-btn wm-btn--primary" type="submit">Pagar 129,70 €</button>
  <p class="wm-checkout__note">Pago seguro · Se pedirá confirmación antes de cobrar.</p>
</form>

{
  "id": "core-checkout-form",
  "name": "Checkout Form",
  "category": "intelligent",
  "library": "core",
  "version": "1.0.1",
  "description": "Formulario de pago IA-First: dirección, envío y cupón con API declarativa, permisos full, autenticación requerida, límite de uso y confirmación obligatoria; expone total y artículos como contexto.",
  "author": "WebMCPcss Team",
  "tags": [
    "form",
    "checkout",
    "payment",
    "security",
    "declarative",
    "intelligent",
    "core"
  ],
  "controls": [
    {
      "variable": "--wm-primary",
      "label": "Color primario",
      "type": "color",
      "default": "#2563eb"
    },
    {
      "variable": "--wm-on-primary",
      "label": "Texto sobre primario",
      "type": "color",
      "default": "#ffffff"
    },
    {
      "variable": "--wm-radius",
      "label": "Radio",
      "type": "range",
      "default": "14px",
      "min": 0,
      "max": 28,
      "step": 1,
      "unit": "px"
    },
    {
      "variable": "--wm-surface",
      "label": "Fondo de la superficie",
      "type": "color",
      "default": "#ffffff"
    }
  ],
  "promptExamples": [
    "añade un campo de teléfono al formulario de pago",
    "cambia el texto del botón a Confirmar pedido"
  ],
  "animateExamples": [
    "agita el formulario si el cupón no es válido",
    "haz que el total pulse al cambiar"
  ],
  "related": [
    "core-smart-product-card",
    "core-hero-section",
    "core-parallax-scene"
  ],
  "preview": "preview.css",
  "css": "checkout-form.webmcp.css",
  "html": "checkout-form.html"
}