import * as React from "react"; import { Button } from "@/components/ui/button"; import { ModalDialogBillingAuthentication3dsSix } from "@/registry/modal-dialog-billing-authentication-3ds-six/modal-dialog-billing-authentication-3ds-six"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof ModalDialogBillingAuthentication3dsSix >; const bank: NonNullable = { name: "Summit National Bank", logo: "https://images.unsplash.com/photo-1507679799987-c73779587ccf?auto=format&fit=crop&w=100&q=80", maskedAccount: "••42", }; export function ModalDialogBillingAuthentication3dsSixDemo() { const [open, setOpen] = React.useState(false); const [status, setStatus] = React.useState(null); return (

Billing 3DS authentication modal

Open the modal to experience OTP capture, countdown, and secure bank framing.

{status ? (

Last status: {status}

) : null}

{ await new Promise((resolve) => setTimeout(resolve, 1200)); setStatus(`Verified with code ${otp}`); }} onResend={async () => { await new Promise((resolve) => setTimeout(resolve, 600)); setStatus("Sent a new authentication code"); }} />

); } export default ModalDialogBillingAuthentication3dsSixDemo;

Simple