<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="payment-method-9-title"> <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10"> <header class="flex w-full flex-col gap-2"> <h2 id="payment-method-9-title" class="text-color-default text-xl font-semibold md:text-2xl">Bank Payment Method</h2> <p class="text-color-placeholder text-sm md:text-base">Select a bank payment option for invoice checkout.</p> </header> <div role="radiogroup" aria-label="Bank payment type" class="grid w-full grid-cols-1 gap-4 md:grid-cols-3"> <article class="border-color-default bg-color-default-default flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-regular fa-building text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-9-method-option" value="ach" checked aria-label="Select ACH Debit"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-normal md:text-lg">ACH Debit</h3> <p class="text-color-placeholder text-xs md:text-sm">2-3 business days</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-solid fa-arrow-right-arrow-left text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-9-method-option" value="wire" aria-label="Select Wire Transfer"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-normal md:text-lg">Wire Transfer</h3> <p class="text-color-placeholder text-xs md:text-sm">Manual bank transfer</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-solid fa-building-columns text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-9-method-option" value="open-banking" aria-label="Select Open Banking"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-normal md:text-lg">Open Banking</h3> <p class="text-color-placeholder text-xs md:text-sm">Instant bank auth</p> </div> </article> </div> <div role="radiogroup" aria-label="Linked bank accounts" class="grid w-full gap-3 xl:grid-cols-2"> <article class="border-color-default bg-color-default-default flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-9-provider-option" value="chase" checked aria-label="Select Chase Business"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <span class="text-color-default text-xs font-semibold">CB</span> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <div class="flex flex-wrap items-center gap-2"> <h3 class="text-color-caption text-base font-semibold md:text-lg">Chase Business</h3> </div> <p class="text-color-placeholder text-xs md:text-sm">Checking ending in 9042</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-9-provider-option" value="mercury" aria-label="Select Mercury"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <span class="text-color-default text-xs font-semibold">M.</span> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <div class="flex flex-wrap items-center gap-2"> <h3 class="text-color-caption text-base font-semibold md:text-lg">Mercury</h3> </div> <p class="text-color-placeholder text-xs md:text-sm">Operating account ending in 1180</p> </div> </article> </div> <plus-button kind="filled" status="default" size="lg" class="w-full self-end xl:w-auto"> <i slot="prefix" class="fa-solid fa-plus" aria-hidden="true"></i> Add Bank Account </plus-button> </article> </section>

<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="payment-method-13-title"> <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10"> <header class="flex w-full flex-col gap-2"> <h2 id="payment-method-13-title" class="text-color-default text-xl font-semibold md:text-2xl">Business Payment Methods</h2> <p class="text-color-placeholder text-sm md:text-base">Choose the method used by workspace invoices and seat upgrades.</p> </header> <div role="radiogroup" aria-label="Business saved methods" class="grid w-full gap-3"> <article class="border-color-default bg-color-default-default flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-13-provider-option" value="corporate-visa" checked aria-label="Select Corporate Visa"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <i class="fa-brands fa-cc-visa text-color-info text-lg"></i> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <div class="flex flex-wrap items-center gap-2"> <h3 class="text-color-caption text-base font-semibold md:text-lg">Corporate Visa</h3> <plus-chip status="success" invert size="sm">Default</plus-chip> </div> <p class="text-color-placeholder text-xs md:text-sm">Finance team - ending 1842</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-13-provider-option" value="backup-mastercard" aria-label="Select Backup Mastercard"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <i class="fa-brands fa-cc-mastercard text-color-info text-lg"></i> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <div class="flex flex-wrap items-center gap-2"> <h3 class="text-color-caption text-base font-semibold md:text-lg">Backup Mastercard</h3> <plus-chip status="warning" invert size="sm">Backup</plus-chip> </div> <p class="text-color-placeholder text-xs md:text-sm">Operations - ending 2563</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-13-provider-option" value="invoice" aria-label="Select Invoice Billing"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <span class="text-color-default text-xs font-semibold">IB</span> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <div class="flex flex-wrap items-center gap-2"> <h3 class="text-color-caption text-base font-semibold md:text-lg">Invoice Billing</h3> </div> <p class="text-color-placeholder text-xs md:text-sm">Net 30 invoice for annual renewals</p> </div> </article> </div> <div class="flex w-full flex-col gap-3 sm:flex-row sm:justify-end"> <plus-button kind="outlined" status="default" size="lg" class="w-full sm:w-auto">Manage Defaults</plus-button> <plus-button kind="filled" status="default" size="lg" class="w-full sm:w-auto"> <i slot="prefix" class="fa-solid fa-plus" aria-hidden="true"></i> Add Business Method </plus-button> </div> </article> </section>

<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="payment-method-10-title"> <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10"> <header class="flex w-full flex-col gap-2"> <h2 id="payment-method-10-title" class="text-color-default text-xl font-semibold md:text-2xl">Pay Over Time</h2> <p class="text-color-placeholder text-sm md:text-base">Choose an installment provider for this purchase.</p> </header> <div role="radiogroup" aria-label="Installment providers" class="grid w-full gap-3 md:grid-cols-3"> <article class="border-color-default bg-color-default-default flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-regular fa-credit-card text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-10-method-option" value="klarna" checked aria-label="Select Klarna"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-normal md:text-lg">Klarna</h3> <p class="text-color-placeholder text-xs md:text-sm">4 payments of $32</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-solid fa-calendar-check text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-10-method-option" value="afterpay" aria-label="Select Afterpay"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-normal md:text-lg">Afterpay</h3> <p class="text-color-placeholder text-xs md:text-sm">Pay every two weeks</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-solid fa-receipt text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-10-method-option" value="affirm" aria-label="Select Affirm"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-normal md:text-lg">Affirm</h3> <p class="text-color-placeholder text-xs md:text-sm">Monthly financing</p> </div> </article> </div> <aside class="bg-color-info-invert-default flex w-full items-start gap-3 rounded p-4" aria-label="Installment estimate"> <i class="fa-solid fa-circle-info text-color-info mt-0.5 text-sm" aria-hidden="true"></i> <p class="text-color-caption text-sm">The selected provider shows the payment schedule before final confirmation.</p> </aside> <plus-button kind="filled" status="default" size="lg" class="w-full self-end xl:w-auto">Continue with Klarna</plus-button> </article> </section>

<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="payment-method-14-title"> <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10"> <header class="flex w-full flex-col gap-2"> <h2 id="payment-method-14-title" class="text-color-default text-xl font-semibold md:text-2xl">Direct Debit</h2> <p class="text-color-placeholder text-sm md:text-base">Authorize recurring bank payments from a linked account.</p> </header> <div role="radiogroup" aria-label="Direct debit accounts" class="grid w-full gap-3 xl:grid-cols-2"> <article class="border-color-default bg-color-default-default flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-14-provider-option" value="operating" checked aria-label="Select Operating Account"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <span class="text-color-default text-xs font-semibold">OA</span> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <div class="flex flex-wrap items-center gap-2"> <h3 class="text-color-caption text-base font-semibold md:text-lg">Operating Account</h3> </div> <p class="text-color-placeholder text-xs md:text-sm">ACH ending 9042</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-14-provider-option" value="reserve" aria-label="Select Finance Reserve"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <span class="text-color-default text-xs font-semibold">FR</span> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <div class="flex flex-wrap items-center gap-2"> <h3 class="text-color-caption text-base font-semibold md:text-lg">Finance Reserve</h3> </div> <p class="text-color-placeholder text-xs md:text-sm">ACH ending 1180</p> </div> </article> </div> <aside class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4" aria-label="Direct debit mandate"> <plus-checkbox>I authorize Plus UI to debit this bank account for recurring charges.</plus-checkbox> <p class="text-color-caption text-sm">You can revoke this mandate from billing settings before the next renewal.</p> </aside> <plus-button kind="filled" status="default" size="lg" class="w-full self-end xl:w-auto">Authorize Direct Debit</plus-button> </article> </section>

<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="payment-method-8-title"> <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10"> <header class="flex w-full flex-col gap-2"> <h2 id="payment-method-8-title" class="text-color-default text-xl font-semibold md:text-2xl">Express Payment</h2> <p class="text-color-placeholder text-sm md:text-base">Choose a saved wallet for faster checkout.</p> </header> <div role="radiogroup" aria-label="Express wallet methods" class="grid w-full gap-3 md:grid-cols-3"> <article class="border-color-default bg-color-default-default flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-brands fa-apple-pay text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-8-method-option" value="apple-pay" checked aria-label="Select Apple Pay"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-normal md:text-lg">Apple Pay</h3> <p class="text-color-placeholder text-xs md:text-sm">Pay with device wallet</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-brands fa-google-pay text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-8-method-option" value="google-pay" aria-label="Select Google Pay"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-normal md:text-lg">Google Pay</h3> <p class="text-color-placeholder text-xs md:text-sm">Use Google wallet</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-brands fa-paypal text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-8-method-option" value="paypal" aria-label="Select PayPal"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-normal md:text-lg">PayPal</h3> <p class="text-color-placeholder text-xs md:text-sm">PayPal account</p> </div> </article> </div> <div class="flex w-full flex-col gap-3 sm:flex-row sm:justify-end"> <plus-button kind="outlined" status="default" size="lg" class="w-full sm:w-auto">Use card instead</plus-button> <plus-button kind="filled" status="default" size="lg" class="w-full sm:w-auto"> <i slot="prefix" class="fa-solid fa-plus" aria-hidden="true"></i> Add Payment Method </plus-button> </div> </article> </section>

<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="payment-method-19-title"> <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10"> <header class="flex w-full flex-col gap-2"> <h2 id="payment-method-19-title" class="text-color-default text-xl font-semibold md:text-2xl">Gift Balance Payment</h2> <p class="text-color-placeholder text-sm md:text-base">Apply gift balance and choose a fallback payment method.</p> </header> <div class="grid w-full gap-6 lg:grid-cols-2"> <article class="border-color-default bg-color-default-default flex flex-col gap-4 rounded border p-5"> <div class="flex items-center justify-between gap-4"> <div> <p class="text-color-default text-base font-medium">Gift balance</p> <p class="text-color-caption text-sm">$64.00 available</p> </div> <plus-toggle checked aria-label="Apply gift balance"></plus-toggle> </div> <plus-input label="Gift Card Code" placeholder="Enter gift code" full-width></plus-input> </article> <div role="radiogroup" aria-label="Fallback payment method" class="grid gap-3"> <article class="border-color-default bg-color-default-default flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-19-provider-option" value="visa" checked aria-label="Select Visa ending 1842"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <i class="fa-brands fa-cc-visa text-color-info text-lg"></i> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <div class="flex flex-wrap items-center gap-2"> <h3 class="text-color-caption text-base font-semibold md:text-lg">Visa ending 1842</h3> </div> <p class="text-color-placeholder text-xs md:text-sm">Charge any remaining total</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-19-provider-option" value="paypal" aria-label="Select PayPal"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <i class="fa-brands fa-paypal text-color-info text-lg"></i> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <div class="flex flex-wrap items-center gap-2"> <h3 class="text-color-caption text-base font-semibold md:text-lg">PayPal</h3> </div> <p class="text-color-placeholder text-xs md:text-sm">Use PayPal for remainder</p> </div> </article> </div> </div> <plus-button kind="filled" status="default" size="lg" class="w-full self-end xl:w-auto">Continue with Balance</plus-button> </article> </section>

<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="payment-method-20-title"> <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10"> <header class="flex w-full flex-col gap-2"> <h2 id="payment-method-20-title" class="text-color-default text-xl font-semibold md:text-2xl">Manual Payment Review</h2> <p class="text-color-placeholder text-sm md:text-base">Submit a method that needs finance-team approval.</p> </header> <div role="radiogroup" aria-label="Manual review payment methods" class="grid w-full gap-4 md:grid-cols-3"> <article class="border-color-default bg-color-default-default flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-solid fa-arrow-right-arrow-left text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-20-method-option" value="bank-transfer" checked aria-label="Select Bank Transfer"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-normal md:text-lg">Bank Transfer</h3> <p class="text-color-placeholder text-xs md:text-sm">Requires review</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-regular fa-file-lines text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-20-method-option" value="invoice" aria-label="Select Invoice"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-normal md:text-lg">Invoice</h3> <p class="text-color-placeholder text-xs md:text-sm">Net terms approval</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-regular fa-credit-card text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-20-method-option" value="card" aria-label="Select Credit Card"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-normal md:text-lg">Credit Card</h3> <p class="text-color-placeholder text-xs md:text-sm">Instant approval</p> </div> </article> </div> <aside class="bg-color-warning-invert-default flex w-full items-start gap-3 rounded p-4" aria-label="Manual review note"> <i class="fa-solid fa-clock text-color-warning mt-0.5 text-sm" aria-hidden="true"></i> <div class="min-w-px"> <p class="text-color-default text-sm font-medium">Finance review required</p> <p class="text-color-caption text-sm">Manual methods are reviewed before the order is released.</p> </div> </aside> <plus-button kind="filled" status="default" size="lg" class="w-full self-end xl:w-auto">Submit for Review</plus-button> </article> </section>

<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="payment-method-16-title"> <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10"> <header class="flex w-full flex-col gap-2"> <h2 id="payment-method-16-title" class="text-color-default text-xl font-semibold md:text-2xl">Payment Needs Attention</h2> <p class="text-color-placeholder text-sm md:text-base">Choose another method or update the failed card.</p> </header> <aside class="bg-color-danger-invert-default flex w-full items-start gap-3 rounded p-4" aria-label="Failed payment notice"> <i class="fa-solid fa-circle-exclamation text-color-danger mt-0.5 text-sm" aria-hidden="true"></i> <div class="min-w-px"> <p class="text-color-default text-sm font-medium">Visa ending 1842 was declined</p> <p class="text-color-caption text-sm">Select a backup method to complete the checkout.</p> </div> </aside> <div role="radiogroup" aria-label="Recovery payment methods" class="grid w-full gap-3"> <article class="border-color-default bg-color-default-default flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-16-provider-option" value="mastercard" checked aria-label="Select Backup Mastercard"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <i class="fa-brands fa-cc-mastercard text-color-info text-lg"></i> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <div class="flex flex-wrap items-center gap-2"> <h3 class="text-color-caption text-base font-semibold md:text-lg">Backup Mastercard</h3> </div> <p class="text-color-placeholder text-xs md:text-sm">Ending in 2563</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-16-provider-option" value="paypal" aria-label="Select PayPal"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <i class="fa-brands fa-paypal text-color-info text-lg"></i> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <div class="flex flex-wrap items-center gap-2"> <h3 class="text-color-caption text-base font-semibold md:text-lg">PayPal</h3> </div> <p class="text-color-placeholder text-xs md:text-sm">Use PayPal balance or linked account</p> </div> </article> </div> <div class="flex w-full flex-col gap-3 sm:flex-row sm:justify-end"> <plus-button kind="outlined" status="default" size="lg" class="w-full sm:w-auto">Update Failed Card</plus-button> <plus-button kind="filled" status="default" size="lg" class="w-full sm:w-auto">Use Backup Method</plus-button> </div> </article> </section>

<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="payment-method-3-title"> <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col items-end gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10"> <header class="flex w-full flex-col gap-2"> <h2 id="payment-method-3-title" class="text-color-default text-xl font-semibold md:text-2xl">Payment Method</h2> <p class="text-color-placeholder text-sm md:text-base">Please select your preferred payment method to proceed with your purchase.</p> </header> <div class="flex w-full flex-col gap-8 md:gap-9 xl:gap-11"> <div role="radiogroup" aria-label="Payment method type" class="grid w-full grid-cols-1 gap-4 md:grid-cols-3"> <article class="border-color-default bg-color-surface flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-regular fa-address-card text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-3-method-option" value="card" checked aria-label="Select Card"></plus-radio> </div> <h3 class="text-color-default mt-auto text-base font-normal md:text-lg">Card</h3> </article> <article class="border-color-default bg-color-surface flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-regular fa-building text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-3-method-option" value="bank" aria-label="Select Bank"></plus-radio> </div> <h3 class="text-color-default mt-auto text-base font-normal md:text-lg">Bank</h3> </article> <article class="border-color-default bg-color-surface flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-regular fa-paper-plane text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-3-method-option" value="transfer" aria-label="Select Transfer"></plus-radio> </div> <h3 class="text-color-default mt-auto text-base font-normal md:text-lg">Transfer</h3> </article> </div> <div role="radiogroup" aria-label="Payment providers" class="grid w-full grid-cols-1 gap-3 xl:grid-cols-2"> <article class="border-color-default bg-color-default-default flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-3-provider-option" value="credit-card" checked aria-label="Select Credit Card"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <i class="fa-brands fa-cc-visa text-color-info text-lg"></i> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <h3 class="text-color-caption text-base font-semibold md:text-lg">Credit Card</h3> <p class="text-color-placeholder text-xs md:text-sm">Pay with Visa, Mastercard or AMEX</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-3-provider-option" value="paypal" aria-label="Select PayPal"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <i class="fa-brands fa-paypal text-color-info text-lg"></i> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <h3 class="text-color-caption text-base font-semibold md:text-lg">PayPal</h3> <p class="text-color-placeholder text-xs md:text-sm">Secure checkout with your PayPal account.</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-3-provider-option" value="stripe" aria-label="Select Stripe"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <i class="fa-brands fa-stripe text-color-primary text-lg"></i> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <h3 class="text-color-caption text-base font-semibold md:text-lg">Stripe</h3> <p class="text-color-placeholder text-xs md:text-sm">Fast and secure card payment.</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-3-provider-option" value="klarna" aria-label="Select Klarna"></plus-radio> <span class="border-color-default bg-color-default-default text-color-default flex h-6 w-9 shrink-0 items-center justify-center rounded border text-xs font-semibold" aria-hidden="true"> K. </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <h3 class="text-color-caption text-base font-semibold md:text-lg">Klarna</h3> <p class="text-color-placeholder text-xs md:text-sm">Buy now, pay later with Klarna.</p> </div> </article> </div> </div> <plus-button kind="filled" status="default" size="lg" class="w-full xl:w-auto"> <i slot="prefix" class="fa-solid fa-plus" aria-hidden="true"></i> Add Payment Method </plus-button> </article> </section>

<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="payment-method-17-title"> <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10"> <header class="flex w-full flex-col gap-2"> <h2 id="payment-method-17-title" class="text-color-default text-xl font-semibold md:text-2xl">Payment Plan</h2> <p class="text-color-placeholder text-sm md:text-base">Select how this purchase should be charged.</p> </header> <div role="radiogroup" aria-label="Payment plan options" class="grid w-full gap-4 md:grid-cols-3"> <article class="border-color-default bg-color-default-default flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-solid fa-bolt text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-17-method-option" value="full" checked aria-label="Select Pay in Full"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-normal md:text-lg">Pay in Full</h3> <p class="text-color-placeholder text-xs md:text-sm">$240 today</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-regular fa-calendar text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-17-method-option" value="two" aria-label="Select Two Payments"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-normal md:text-lg">Two Payments</h3> <p class="text-color-placeholder text-xs md:text-sm">$120 now and later</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-solid fa-chart-simple text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-17-method-option" value="monthly" aria-label="Select Monthly"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-normal md:text-lg">Monthly</h3> <p class="text-color-placeholder text-xs md:text-sm">$42 per month</p> </div> </article> </div> <div class="border-color-default bg-color-surface flex w-full flex-col gap-3 rounded border p-4 md:flex-row md:items-center md:justify-between"> <div> <p class="text-color-default text-base font-medium">Visa ending 1842</p> <p class="text-color-caption text-sm">Charge $240.00 today</p> </div> <plus-chip status="primary" invert size="sm">Selected plan</plus-chip> </div> <plus-button kind="filled" status="default" size="lg" class="w-full self-end xl:w-auto">Confirm Plan</plus-button> </article> </section>

<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="payment-method-2-title"> <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col items-end gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 lg:gap-10 lg:p-10"> <header class="flex w-full flex-col gap-2"> <h2 id="payment-method-2-title" class="text-color-default text-xl font-semibold md:text-2xl">Payment Method</h2> <p class="text-color-placeholder text-sm md:text-base">Please select your preferred payment method to proceed with your purchase.</p> </header> <plus-segmented-picker size="md" status="default" aria-label="Payment method type" class="max-w-full"> <plus-segmented-picker-item value="card" checked> <i class="fa-regular fa-window-maximize" aria-hidden="true"></i> Card </plus-segmented-picker-item> <plus-segmented-picker-item value="bank"> <i class="fa-regular fa-building" aria-hidden="true"></i> Bank </plus-segmented-picker-item> <plus-segmented-picker-item value="transfer"> <i class="fa-regular fa-paper-plane" aria-hidden="true"></i> Transfer </plus-segmented-picker-item> </plus-segmented-picker> <div role="radiogroup" aria-label="Payment providers" class="grid w-full grid-cols-1 gap-4 md:grid-cols-3"> <article class="border-color-default bg-color-surface flex min-h-36 flex-col gap-2 rounded border p-4 md:gap-2.5 md:p-5"> <div class="flex w-full items-start justify-between gap-4"> <span class="border-color-default bg-color-surface flex h-6 w-9 items-center justify-center rounded border" aria-hidden="true"> <i class="fa-brands fa-cc-mastercard text-color-danger text-lg"></i> </span> <plus-radio name="payment-method-2-provider-option" value="credit-card" checked aria-label="Select Credit Card"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-medium md:text-lg">Credit Card</h3> <p class="text-color-placeholder text-xs md:text-sm">Pay with Visa, Mastercard or AMEX</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-36 flex-col gap-2 rounded border p-4 md:gap-2.5 md:p-5"> <div class="flex w-full items-start justify-between gap-4"> <span class="border-color-default bg-color-surface flex h-6 w-9 items-center justify-center rounded border" aria-hidden="true"> <i class="fa-brands fa-paypal text-color-info text-lg"></i> </span> <plus-radio name="payment-method-2-provider-option" value="paypal" aria-label="Select PayPal"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-medium md:text-lg">PayPal</h3> <p class="text-color-placeholder text-xs md:text-sm">Secure checkout with PayPal</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-36 flex-col gap-2 rounded border p-4 md:gap-2.5 md:p-5"> <div class="flex w-full items-start justify-between gap-4"> <span class="border-color-default bg-color-surface flex h-6 w-9 items-center justify-center rounded border" aria-hidden="true"> <i class="fa-brands fa-stripe text-color-info text-lg"></i> </span> <plus-radio name="payment-method-2-provider-option" value="stripe" aria-label="Select Stripe"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-medium md:text-lg">Stripe</h3> <p class="text-color-placeholder text-xs md:text-sm">Fast and secure card payment</p> </div> </article> </div> <plus-button kind="filled" status="default" size="lg" class="w-full lg:w-auto"> <i slot="prefix" class="fa-solid fa-plus" aria-hidden="true"></i> Add Payment Method </plus-button> </article> </section>

<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="payment-method-4-title"> <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col items-end gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10"> <header class="flex w-full flex-col gap-2"> <h2 id="payment-method-4-title" class="text-color-default text-xl font-semibold md:text-2xl">Payment Method</h2> <p class="text-color-placeholder text-sm md:text-base">Please select your preferred payment method to proceed with your purchase.</p> </header> <div class="flex w-full flex-col gap-10 md:gap-11"> <div role="radiogroup" aria-label="Payment method type" class="grid w-full grid-cols-1 gap-4 md:grid-cols-3"> <article class="border-color-default bg-color-default-default flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-regular fa-address-card text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-4-method-option" value="card" checked aria-label="Select Card"></plus-radio> </div> <h3 class="text-color-default mt-auto text-base font-normal md:text-lg">Card</h3> </article> <article class="border-color-default bg-color-surface flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-regular fa-building text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-4-method-option" value="bank" aria-label="Select Bank"></plus-radio> </div> <h3 class="text-color-default mt-auto text-base font-normal md:text-lg">Bank</h3> </article> <article class="border-color-default bg-color-surface flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-regular fa-paper-plane text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-4-method-option" value="transfer" aria-label="Select Transfer"></plus-radio> </div> <h3 class="text-color-default mt-auto text-base font-normal md:text-lg">Transfer</h3> </article> </div> <div role="radiogroup" aria-label="Payment providers" class="flex w-full flex-col gap-3"> <article class="border-color-default bg-color-surface flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-4-provider-option" value="credit-card" checked aria-label="Select Credit Card"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <i class="fa-brands fa-cc-visa text-color-info text-lg"></i> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <h3 class="text-color-caption text-base font-semibold md:text-lg">Credit Card</h3> <p class="text-color-placeholder text-xs md:text-sm">Pay with Visa, Mastercard or AMEX</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-4-provider-option" value="paypal" aria-label="Select PayPal"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <i class="fa-brands fa-paypal text-color-info text-lg"></i> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <h3 class="text-color-caption text-base font-semibold md:text-lg">PayPal</h3> <p class="text-color-placeholder text-xs md:text-sm">Secure checkout with your PayPal account.</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-4-provider-option" value="stripe" aria-label="Select Stripe"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <i class="fa-brands fa-stripe text-color-primary text-lg"></i> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <h3 class="text-color-caption text-base font-semibold md:text-lg">Stripe</h3> <p class="text-color-placeholder text-xs md:text-sm">Fast and secure card payment.</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-4-provider-option" value="klarna" aria-label="Select Klarna"></plus-radio> <span class="border-color-default bg-color-default-default text-color-default flex h-6 w-9 shrink-0 items-center justify-center rounded border text-xs font-semibold" aria-hidden="true"> Kl. </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <h3 class="text-color-caption text-base font-semibold md:text-lg">Klarna</h3> <p class="text-color-placeholder text-xs md:text-sm">Buy now, pay later with Klarna.</p> </div> </article> </div> </div> <plus-button kind="filled" status="default" size="lg" class="w-full xl:w-auto"> <i slot="prefix" class="fa-solid fa-plus" aria-hidden="true"></i> Add Payment Method </plus-button> </article> </section>

<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="payment-method-5-title"> <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col items-end gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10"> <header class="flex w-full flex-col gap-2"> <h2 id="payment-method-5-title" class="text-color-default text-xl font-semibold md:text-2xl">Payment Method</h2> <p class="text-color-placeholder text-sm md:text-base">Please select your preferred payment method to proceed with your purchase.</p> </header> <div class="flex w-full flex-col gap-8"> <div class="w-full lg:max-w-xl"> <plus-select placeholder="Choose Payment Method" aria-label="Choose Payment Method" size="lg" full-width> <plus-select-item value="credit-card">Credit Card</plus-select-item> <plus-select-item value="paypal">PayPal</plus-select-item> <plus-select-item value="stripe">Stripe</plus-select-item> <plus-select-item value="klarna">Klarna</plus-select-item> </plus-select> </div> <div role="radiogroup" aria-label="Payment providers" class="flex w-full flex-col gap-3"> <article class="border-color-default bg-color-surface flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-5-provider-option" value="credit-card" checked aria-label="Select Credit Card"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <i class="fa-brands fa-cc-visa text-color-info text-lg"></i> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <h3 class="text-color-caption text-base font-semibold md:text-lg">Credit Card</h3> <p class="text-color-placeholder text-xs md:text-sm">Pay with Visa, Mastercard or AMEX</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-5-provider-option" value="paypal" aria-label="Select PayPal"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <i class="fa-brands fa-paypal text-color-info text-lg"></i> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <h3 class="text-color-caption text-base font-semibold md:text-lg">PayPal</h3> <p class="text-color-placeholder text-xs md:text-sm">Secure checkout with your PayPal account.</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-5-provider-option" value="stripe" aria-label="Select Stripe"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <i class="fa-brands fa-stripe text-color-primary text-lg"></i> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <h3 class="text-color-caption text-base font-semibold md:text-lg">Stripe</h3> <p class="text-color-placeholder text-xs md:text-sm">Fast and secure card payment.</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-5-provider-option" value="klarna" aria-label="Select Klarna"></plus-radio> <span class="border-color-default bg-color-default-default text-color-default flex h-6 w-9 shrink-0 items-center justify-center rounded border text-xs font-semibold" aria-hidden="true"> K. </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <h3 class="text-color-caption text-base font-semibold md:text-lg">Klarna</h3> <p class="text-color-placeholder text-xs md:text-sm">Buy now, pay later with Klarna.</p> </div> </article> </div> </div> <plus-button kind="filled" status="default" size="lg" class="w-full xl:w-auto"> <i slot="prefix" class="fa-solid fa-plus" aria-hidden="true"></i> Add Payment Method </plus-button> </article> </section>

<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="payment-method-18-title"> <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10"> <header class="flex w-full flex-col gap-2"> <h2 id="payment-method-18-title" class="text-color-default text-xl font-semibold md:text-2xl">Payout Method</h2> <p class="text-color-placeholder text-sm md:text-base">Choose where refunds and marketplace payouts should be sent.</p> </header> <div role="radiogroup" aria-label="Payout method type" class="grid w-full gap-4 md:grid-cols-3"> <article class="border-color-default bg-color-default-default flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-solid fa-building-columns text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-18-method-option" value="bank" checked aria-label="Select Bank Account"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-normal md:text-lg">Bank Account</h3> <p class="text-color-placeholder text-xs md:text-sm">Best for payouts</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-solid fa-wallet text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-18-method-option" value="wallet" aria-label="Select Wallet"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-normal md:text-lg">Wallet</h3> <p class="text-color-placeholder text-xs md:text-sm">Instant wallet credit</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-regular fa-credit-card text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-18-method-option" value="debit-card" aria-label="Select Debit Card"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-normal md:text-lg">Debit Card</h3> <p class="text-color-placeholder text-xs md:text-sm">Fast card transfer</p> </div> </article> </div> <div role="radiogroup" aria-label="Payout accounts" class="grid w-full gap-3 xl:grid-cols-2"> <article class="border-color-default bg-color-default-default flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-18-provider-option" value="checking" checked aria-label="Select Primary Checking"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <span class="text-color-default text-xs font-semibold">PC</span> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <div class="flex flex-wrap items-center gap-2"> <h3 class="text-color-caption text-base font-semibold md:text-lg">Primary Checking</h3> </div> <p class="text-color-placeholder text-xs md:text-sm">Bank ending 9042</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-18-provider-option" value="wallet" aria-label="Select Plus Wallet"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <span class="text-color-default text-xs font-semibold">PW</span> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <div class="flex flex-wrap items-center gap-2"> <h3 class="text-color-caption text-base font-semibold md:text-lg">Plus Wallet</h3> </div> <p class="text-color-placeholder text-xs md:text-sm">$128.00 available balance</p> </div> </article> </div> <plus-button kind="filled" status="default" size="lg" class="w-full self-end xl:w-auto">Save Payout Method</plus-button> </article> </section>

<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="payment-method-15-title"> <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10"> <header class="flex w-full flex-col gap-2"> <h2 id="payment-method-15-title" class="text-color-default text-xl font-semibold md:text-2xl">Local Payment Method</h2> <p class="text-color-placeholder text-sm md:text-base">Choose a payment option available for your billing country.</p> </header> <div class="w-full lg:max-w-xl"> <plus-select placeholder="Billing country" aria-label="Billing country" size="lg" full-width> <plus-select-item value="nl">Netherlands</plus-select-item> <plus-select-item value="de">Germany</plus-select-item> <plus-select-item value="se">Sweden</plus-select-item> </plus-select> </div> <div role="radiogroup" aria-label="Regional payment providers" class="grid w-full gap-3 xl:grid-cols-2"> <article class="border-color-default bg-color-default-default flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-15-provider-option" value="ideal" checked aria-label="Select iDEAL"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <span class="text-color-default text-xs font-semibold">iD</span> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <div class="flex flex-wrap items-center gap-2"> <h3 class="text-color-caption text-base font-semibold md:text-lg">iDEAL</h3> </div> <p class="text-color-placeholder text-xs md:text-sm">Bank redirect payment</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-15-provider-option" value="sepa" aria-label="Select SEPA Debit"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <span class="text-color-default text-xs font-semibold">SE</span> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <div class="flex flex-wrap items-center gap-2"> <h3 class="text-color-caption text-base font-semibold md:text-lg">SEPA Debit</h3> </div> <p class="text-color-placeholder text-xs md:text-sm">Direct bank debit</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-15-provider-option" value="sofort" aria-label="Select Sofort"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <span class="text-color-default text-xs font-semibold">SF</span> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <div class="flex flex-wrap items-center gap-2"> <h3 class="text-color-caption text-base font-semibold md:text-lg">Sofort</h3> </div> <p class="text-color-placeholder text-xs md:text-sm">Instant bank transfer</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-15-provider-option" value="klarna" aria-label="Select Klarna"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <span class="text-color-default text-xs font-semibold">K.</span> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <div class="flex flex-wrap items-center gap-2"> <h3 class="text-color-caption text-base font-semibold md:text-lg">Klarna</h3> </div> <p class="text-color-placeholder text-xs md:text-sm">Pay later provider</p> </div> </article> </div> <plus-button kind="filled" status="default" size="lg" class="w-full self-end xl:w-auto">Add Local Method</plus-button> </article> </section>

<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="payment-method-6-title"> <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col items-end gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10"> <header class="flex w-full flex-col gap-2"> <h2 id="payment-method-6-title" class="text-color-default text-xl font-semibold md:text-2xl">Payment Method</h2> <p class="text-color-placeholder text-sm md:text-base">Please select your preferred payment method to proceed with your purchase.</p> </header> <div class="flex w-full flex-col gap-8"> <div class="w-full lg:max-w-xl"> <plus-select placeholder="Choose Payment Method" aria-label="Choose Payment Method" size="lg" full-width> <plus-select-item value="credit-card">Credit Card</plus-select-item> <plus-select-item value="paypal">PayPal</plus-select-item> <plus-select-item value="stripe">Stripe</plus-select-item> <plus-select-item value="klarna">Klarna</plus-select-item> </plus-select> </div> <div role="radiogroup" aria-label="Saved payment cards" class="flex w-full gap-5 overflow-x-auto pb-1"> <article class="border-color-default bg-color-default-default flex h-44 w-72 shrink-0 snap-start flex-col justify-between rounded-lg border p-4 sm:h-48 sm:w-80 sm:p-6"> <div class="flex w-full items-start justify-between gap-4"> <div class="flex min-w-px items-center gap-2"> <plus-radio name="payment-method-6-provider-option" value="credit-card" checked aria-label="Select Credit Card"></plus-radio> <h3 class="text-color-default text-sm font-medium">Credit Card</h3> </div> <span class="border-color-default bg-color-surface flex h-8 w-12 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <i class="fa-brands fa-cc-visa text-color-info text-2xl"></i> </span> </div> <div class="flex flex-col gap-1"> <p class="text-color-caption text-sm">Jack Jones JR</p> <p class="text-color-default text-base font-semibold">5142 - 8164 - 6526 - 2563</p> </div> </article> <article class="border-color-default bg-color-default-default flex h-44 w-72 shrink-0 snap-start flex-col justify-between rounded-lg border p-4 sm:h-48 sm:w-80 sm:p-6"> <div class="flex w-full items-start justify-between gap-4"> <div class="flex min-w-px items-center gap-2"> <plus-radio name="payment-method-6-provider-option" value="paypal" aria-label="Select PayPal"></plus-radio> <h3 class="text-color-default text-sm font-medium">PayPal</h3> </div> <span class="border-color-default bg-color-surface flex h-8 w-12 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <i class="fa-brands fa-paypal text-color-info text-xl"></i> </span> </div> <div class="flex flex-col gap-1"> <p class="text-color-caption text-sm">Jack Jones JR</p> <p class="text-color-default text-base font-semibold">5142 - 8164 - 6526 - 2563</p> </div> </article> <article class="border-color-default bg-color-default-default flex h-44 w-72 shrink-0 snap-start flex-col justify-between rounded-lg border p-4 sm:h-48 sm:w-80 sm:p-6"> <div class="flex w-full items-start justify-between gap-4"> <div class="flex min-w-px items-center gap-2"> <plus-radio name="payment-method-6-provider-option" value="stripe" aria-label="Select Stripe"></plus-radio> <h3 class="text-color-default text-sm font-medium">Stripe</h3> </div> <span class="border-color-default bg-color-surface flex h-8 w-12 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <i class="fa-brands fa-stripe text-color-primary text-xl"></i> </span> </div> <div class="flex flex-col gap-1"> <p class="text-color-caption text-sm">Jack Jones JR</p> <p class="text-color-default text-base font-semibold">5142 - 8164 - 6526 - 2563</p> </div> </article> <article class="border-color-default bg-color-default-default flex h-44 w-72 shrink-0 snap-start flex-col justify-between rounded-lg border p-4 sm:h-48 sm:w-80 sm:p-6"> <div class="flex w-full items-start justify-between gap-4"> <div class="flex min-w-px items-center gap-2"> <plus-radio name="payment-method-6-provider-option" value="klarna" aria-label="Select Klarna"></plus-radio> <h3 class="text-color-default text-sm font-medium">Klarna</h3> </div> <span class="border-color-default bg-color-surface text-color-default flex h-8 w-12 shrink-0 items-center justify-center rounded border text-xs font-semibold" aria-hidden="true">K.</span> </div> <div class="flex flex-col gap-1"> <p class="text-color-caption text-sm">Jack Jones JR</p> <p class="text-color-default text-base font-semibold">5142 - 8164 - 6526 - 2563</p> </div> </article> </div> </div> <plus-button kind="filled" status="default" size="lg" class="w-full xl:w-auto"> <i slot="prefix" class="fa-solid fa-plus" aria-hidden="true"></i> Add Payment Method </plus-button> </article> </section>

<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="payment-method-12-title"> <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10"> <header class="flex w-full flex-col gap-2"> <h2 id="payment-method-12-title" class="text-color-default text-xl font-semibold md:text-2xl">Split Payment</h2> <p class="text-color-placeholder text-sm md:text-base">Apply available balance and select a card for the remainder.</p> </header> <div class="grid w-full gap-4 lg:grid-cols-2"> <article class="border-color-default bg-color-default-default flex flex-col gap-4 rounded border p-5"> <div class="flex items-start justify-between gap-4"> <div> <p class="text-color-default text-base font-medium">Plus Credits</p> <p class="text-color-caption text-sm">$38.00 balance available</p> </div> <plus-toggle checked aria-label="Apply Plus Credits"></plus-toggle> </div> <plus-divider></plus-divider> <div class="flex items-center justify-between gap-4"> <span class="text-color-caption text-sm">Applied today</span> <span class="text-color-success text-base font-semibold">-$38.00</span> </div> </article> <div role="radiogroup" aria-label="Card for remaining balance" class="grid gap-3"> <article class="border-color-default bg-color-default-default flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-12-provider-option" value="visa" checked aria-label="Select Visa ending 1842"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <i class="fa-brands fa-cc-visa text-color-info text-lg"></i> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <div class="flex flex-wrap items-center gap-2"> <h3 class="text-color-caption text-base font-semibold md:text-lg">Visa ending 1842</h3> </div> <p class="text-color-placeholder text-xs md:text-sm">Remaining balance $112.00</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-16 items-center gap-3 rounded border p-4"> <plus-radio name="payment-method-12-provider-option" value="paypal" aria-label="Select PayPal"></plus-radio> <span class="border-color-default bg-color-surface flex h-6 w-9 shrink-0 items-center justify-center rounded border" aria-hidden="true"> <i class="fa-brands fa-paypal text-color-info text-lg"></i> </span> <div class="flex min-w-px flex-1 flex-col gap-1"> <div class="flex flex-wrap items-center gap-2"> <h3 class="text-color-caption text-base font-semibold md:text-lg">PayPal</h3> </div> <p class="text-color-placeholder text-xs md:text-sm">Pay full balance with PayPal</p> </div> </article> </div> </div> <plus-button kind="filled" status="default" size="lg" class="w-full self-end xl:w-auto">Continue Payment</plus-button> </article> </section>

<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="payment-method-11-title"> <article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10"> <header class="flex w-full flex-col gap-2"> <h2 id="payment-method-11-title" class="text-color-default text-xl font-semibold md:text-2xl">Subscription Payment</h2> <p class="text-color-placeholder text-sm md:text-base">Set how recurring subscription renewals should be charged.</p> </header> <div role="radiogroup" aria-label="Subscription payment method" class="grid w-full gap-4 md:grid-cols-3"> <article class="border-color-default bg-color-default-default flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-regular fa-credit-card text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-11-method-option" value="card" checked aria-label="Select Credit Card"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-normal md:text-lg">Credit Card</h3> <p class="text-color-placeholder text-xs md:text-sm">Default renewal method</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-regular fa-file-lines text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-11-method-option" value="invoice" aria-label="Select Invoice"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-normal md:text-lg">Invoice</h3> <p class="text-color-placeholder text-xs md:text-sm">Send monthly invoice</p> </div> </article> <article class="border-color-default bg-color-surface flex min-h-24 flex-col gap-3 rounded border p-4 md:min-h-28"> <div class="flex w-full items-start justify-between gap-4"> <i class="fa-solid fa-building-columns text-color-placeholder text-lg" aria-hidden="true"></i> <plus-radio name="payment-method-11-method-option" value="bank" aria-label="Select Bank Debit"></plus-radio> </div> <div class="mt-auto flex flex-col gap-1"> <h3 class="text-color-default text-base font-normal md:text-lg">Bank Debit</h3> <p class="text-color-placeholder text-xs md:text-sm">Direct debit mandate</p> </div> </article> </div> <div class="border-color-default bg-color-surface flex w-full flex-col gap-4 rounded border p-4 md:flex-row md:items-center md:justify-between"> <div> <p class="text-color-default text-base font-medium">Visa ending in 1842</p> <p class="text-color-caption text-sm">Next renewal on June 1, 2026</p> </div> <plus-chip status="success" invert size="sm">Default</plus-chip> </div> <plus-button kind="filled" status="default" size="lg" class="w-full self-end xl:w-auto">Update Payment Method</plus-button> </article> </section>

Payment Method Blocks

Payment method blocks help shoppers choose how they want to pay during checkout. The expanded variation set keeps the decision point compact: short title copy, visible method or provider choices, clear selected states, saved-card previews, empty-payment guidance, regional methods, recovery states, and a direct action for adding or confirming a payment method.

Key Features

Method Choice: Card, Bank, and Transfer options are visible before the selector.
Payment Field: The Payment Method select field uses the same options as the radio group.
Provider Cards: Payment provider cards can show compact brand marks, method names, supporting copy, and the selected radio state.
Hybrid Grid: A top-level method grid can pair with a provider list when the checkout needs both method type and provider selection.
Provider List: A payment-method field can sit above full-width provider rows when checkout needs a focused provider decision.
Saved Cards: Saved payment cards can appear as horizontal card surfaces with radio states, provider marks, account holder, and masked card details.
Empty State: No-payment states should keep the missing-method message centered, concise, and immediately paired with Add Payment Method.
Add Action: Add Payment Method appears after the selector and becomes full-width on smaller checkout panels.
Responsive Structure: One static card adapts from mobile checkout width to wider tablet and desktop previews.

Payment Method Selector

Payment Method Selector is a compact checkout card for selecting a preferred payment method before continuing with purchase. It presents Card as the selected method, includes Bank and Transfer alternatives, and keeps the Add Payment Method action aligned to the trailing edge on desktop.

Payment Method Selector Data

Title: Payment Method
Description: Please select your preferred payment method to proceed with your purchase.
Selected method: Card
Other methods: Bank, Transfer
Field label: Payment Method
Field placeholder: Choose Payment Method
Action: Add Payment Method

Payment Provider Cards

Payment Provider Cards is a compact checkout card for choosing a provider inside the selected payment type. It presents Card as the active segment, highlights Credit Card as the selected provider, and keeps PayPal and Stripe available as comparable card choices.

Payment Provider Cards Data

Title: Payment Method
Description: Please select your preferred payment method to proceed with your purchase.
Active segment: Card
Other segments: Bank, Transfer
Selected provider: Credit Card
Other providers: PayPal, Stripe
Action: Add Payment Method

Payment Method Grid

Payment Method Grid is a hybrid checkout selector for choosing a payment type and then choosing a provider inside that type. It keeps Card selected in the top method grid, highlights Credit Card in the provider list, and includes PayPal, Stripe, and Klarna as equal alternatives.

Payment Method Grid Data

Title: Payment Method
Description: Please select your preferred payment method to proceed with your purchase.
Selected method: Card
Other methods: Bank, Transfer
Selected provider: Credit Card
Other providers: PayPal, Stripe, Klarna
Action: Add Payment Method

Payment Provider List

Payment Provider List is a stacked checkout selector for choosing a payment type and then selecting a saved or supported provider. It keeps Card selected in the top method cards, highlights Credit Card in the provider list, and presents PayPal, Stripe, and Klarna as equal full-width rows before the add-payment action.

Payment Provider List Data

Title: Payment Method
Description: Please select your preferred payment method to proceed with your purchase.
Selected method: Card
Other methods: Bank, Transfer
Selected provider: Credit Card
Other providers: PayPal, Stripe, Klarna
Action: Add Payment Method

Payment Provider Select

Payment Provider Select is a focused checkout selector for choosing a payment provider after opening a payment-method field. It highlights Credit Card in the full-width provider list, keeps PayPal, Stripe, and Klarna as equal alternatives, and places Add Payment Method after the provider choices.

Payment Provider Select Data

Title: Payment Method
Description: Please select your preferred payment method to proceed with your purchase.
Field placeholder: Choose Payment Method
Selected provider: Credit Card
Other providers: PayPal, Stripe, Klarna
Action: Add Payment Method

Saved Payment Cards

Saved Payment Cards is a payment-field-first checkout selector that shows saved card-style payment options in a horizontal row. It keeps Credit Card selected, presents PayPal, Stripe, and Klarna as comparable saved-card surfaces, and keeps Add Payment Method trailing on desktop while becoming full-width on narrower checkout panels.

Saved Payment Cards Data

Title: Payment Method
Description: Please select your preferred payment method to proceed with your purchase.
Field placeholder: Choose Payment Method
Selected provider: Credit Card
Other providers: PayPal, Stripe, Klarna
Account holder: Jack Jones JR
Card number: 5142 - 8164 - 6526 - 2563
Action: Add Payment Method

Empty Payment Method

Empty Payment Method is a compact checkout state for customers who do not have saved or available payment methods yet. It keeps the Payment Method title visible, centers the no-payment message inside the card, and places Add Payment Method directly below the guidance.

Empty Payment Method Data

Title: Payment Method
State label: No Payment Found
Description: Select how you’d like to pay from your saved or new payment methods.
Action: Add Payment Method

Best Practices

Keep payment choices close to the field they affect.
Use Plus UI form controls for static payment selectors and actions.
Keep provider-card rows equal in visual weight so payment options remain comparable.
Use a compact method grid above provider rows when both payment type and provider need to remain visible.
Keep saved-card carousel variants horizontally scrollable so card surfaces remain comparable without duplicating mobile and desktop markup.
Keep empty-payment states centered and action-led so the next recovery action is obvious.
Make add-payment actions full-width on narrow checkout cards and trailing-aligned on desktop.
Avoid adding extra wallet, card-brand, validation, or billing fields unless the source design includes them.

Frequently Asked Questions

What is a payment method UI component? A payment method UI component is a reusable checkout pattern for presenting available payment choices and the next action for adding or selecting a method.

Why are payment method components important in frontend development? Payment method components help teams keep checkout payment states consistent, scannable, and easy to adapt across product surfaces.

Where are payment method UI components commonly used? Payment Method UI components are commonly used in checkout pages, billing settings, subscription flows, order review panels, and e-commerce dashboards.

Can payment method UI components be reused across frameworks? Yes. Static Plus UI examples are designed as portable HTML patterns that can be adapted across React, Vue, Angular, Web Components, and other frontend stacks.

How do payment method components improve UI design systems? Payment Method components standardize method selection, payment-field labeling, add-payment actions, and responsive checkout payment behavior.

UI Library

Open-source

Multi-framework support

Integrations

Design System

Foundations

Components

Blocks & Templates

Plus AI

Monitoring Dashboard

Performance Overview

AI Suggestion

Join to our newsletter

How We Differ from Other Market Providers:

Products

Documentation

Frameworks

UI Kits

Foundations

Components

Application Blocks

Marketing Blocks

E-Commerce Blocks

Content Blocks

Templates

Company

Community

Contributing