# @mostajs/pay-panel-ui — fiche LLM
> Panneau de paiement headless + Web Component : plans × providers × récurrence → checkout. Compose @mostajs/payment.

- Version: 0.2.0 · Licence: AGPL-3.0-or-later · Auteur: Dr Hamid MADANI <drmdh@msn.com>
- Chemin: mostajs/mosta-pay-panel-ui · Statut: 0.2 (cœur + web component + React)

## RÔLE
Couche de PRÉSENTATION du paiement. Ne contient AUCUN secret et AUCUNE route d'app : tout est injecté
(`plans`, `providers`, `onCheckout`). Cœur headless (état + logique + i18n/RTL) + adaptateur Web Component
`<pay-panel>` (HTML pur / tout framework). Compose @mostajs/payment (PaymentPage en 0.2, redirection en 0.1).
Aligné @mostajs/subscriptions-plan 0.4.0 (intervalle month|year|one_time, scope course).

## INSTALLATION
npm i @mostajs/pay-panel-ui

## EXPORTS
- "." (cœur, sans framework) : createPayPanel(config) → PayPanelController
  { getState, subscribe, load, select, buildCheckout, checkout, t, setLocale } ;
  i18n : PAYPANEL_I18N, isRTL, makeTranslator, intervalLabel, formatPrice ;
  types : PlanView, PayPanelConfig, PayPanelState, Selection, CheckoutSelection, CheckoutResult, Scope, Locale, Theme.
- "./web" : PayPanelElement (classe), definePayPanelElement(tag?) ; auto-enregistre <pay-panel> à l'import.
- "./react" : usePayPanel(config) (hook), <PayPanel config renderCheckout? className?/> (composant).
  renderCheckout({selection,state,checkout}) = slot pour checkout embarqué (ex. payment.PaymentPage).
  Thème React via variables CSS --pp-* (card/bd/accent/ok/danger/fg/mut). react = peer OPTIONNEL.

## CONFIG (injection — PayPanelConfig)
- plans: PlanView[] | () => Promise<PlanView[]>
- providers: string[] | () => Promise<string[]>
- onCheckout: (CheckoutSelection) => Promise<{ checkoutUrl? }>
- scope?: { type, id }          // ex. { type:'course', id }
- locale?: 'fr'|'en'|'ar'       // 'ar' ⇒ RTL
- theme?: 'light'|'dark'|'auto'
- messages?: surcharge i18n partielle
- autoRedirect?: boolean (défaut true) — redirige sur checkoutUrl

## WEB COMPONENT <pay-panel>
- attributs : locale, theme ; propriété JS : config ; event : checkout { detail:{selection,result} }
- la config (fonctions) se passe par PROPRIÉTÉ (`el.config = {...}`), pas par attribut.

## PIÈGES
- Le module est 100% FRONT : la résolution provider/secret reste côté backend (@mostajs/payment).
- Récurrence DZD (Chargily/SATIM) : pas de renouvellement natif → re-checkout (l'UI affiche l'intervalle).
- React (<PayPanel/>, ./react) arrive en 0.2 (composera payment.PaymentPage pour un checkout embarqué).
