Payment Status

8.0 KB gzip for the class module

Variants

Recorded states

• error recorded state; no setter
• reduced motion recorded state; no setter
• processing recorded state; no setter
• verifying recorded state; no setter
• success recorded state; no setter
• failed recorded state; no setter
• refunded recorded state; no setter

Usage

Import

import '/components/payment-status/define.js';

// or register it yourself
import { DetentPaymentStatus } from '/components/payment-status/payment-status.js';

Attributes

• amount
• currency
• date
• error-message
• last4
• merchant-name
• payment-method
• refund-reason
• status
• transaction-id

Properties

• items
• onChangePaymentMethod
• onDownloadReceipt
• onRetry
• onViewReceipt

Slots

No slots are recorded for this component.

Events

• detent-retry — {}
• detent-change-payment-method — {}
• detent-download-receipt — {}
• detent-view-receipt — {}

Example

Runnable example: site/examples/payment-status.ts. The snippet below is generated from the catalogued attributes.

<detent-payment-status
  amount="$149.00"
  currency="{{MAIN}}quot;
  date="Today at 3:42 PM"
  error-message
  last4="4242"
  merchant-name="Detent Cloud"
  payment-method="Apple Pay"
  refund-reason
  status="processing"
  transaction-id="tx_9842a8d11c7f"
></detent-payment-status>

Property-only values

const element = document.querySelector('detent-payment-status');
if (element !== null) {
  // items: PaymentReceiptItem[]
  element.items = [];
  // onRetry: () => void
  element.onRetry = () => {};
  // onChangePaymentMethod: () => void
  element.onChangePaymentMethod = () => {};
}

Source

The pinned upstream source for this row:

• src/components/ui/PaymentStatus.tsx sha256 e8284c0343ad…

Native files

The native module and its artifacts:

• src/components/payment-status/payment-status.ts
• src/components/payment-status/styles.css
• src/components/payment-status/define.ts
• docs/components/payment-status.md
• site/examples/payment-status.ts
• tests/browser/payment-status.spec.ts
• evidence/components/payment-status.md

API

Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.

Attributes

Properties

Events

Slots

No slots are recorded for this component.

CSS customisation

• React callback props become typed composed CustomEvents; programmatic state assignment emits none.
• Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
• React state/hooks replaced by element-owned state with pre-upgrade property preservation.
• The receipt download is consumer-owned: upstream builds a Blob and clicks a synthetic <a download>; the native row exposes a read-only receiptText and emits detent-download-receipt, with zero network requests.
• Framer Motion springs and AnimatePresence become CSS transitions plus hidden toggling so the live region stays mounted; the checkmark pathLength becomes stroke-dashoffset whose reduced-motion form is the fully drawn stroke.
• Action boundaries use #6b6b6b instead of the upstream #1f1f1f to reach the WCAG 1.4.11 3:1 non-text ratio; dividers keep the hairline.
• The pinned card was one fixed dark surface because the source has no dark: variants; this port follows the theme tokens in both colour schemes, and the --detent-payment-status-* custom properties still override every value.
• errorMessage and refundReason are exposed as the error-message and refund-reason attributes pinned from source (the upstream meta omitted them), and the transaction-ID copy uses the async Clipboard API with the upstream execCommand fallback: a blocked clipboard never throws and never suppresses the confirmation.
• Default demo copy and labels use Detent branding instead of EasyUI (pre-release rebrand).