> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nozle.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# PaymentMethodDisplay

> The customer's saved card with brand, last four digits and expiry, and an update button.

`PaymentMethodDisplay` shows one saved payment method you pass and an "Update Payment Method" button.

**When to use**

* The payment section of your billing settings page.
* Next to a past-due notice, so the customer can fix the card.

**Light**

![PaymentMethodDisplay with a Visa ending 4242 that expires 08/29, light theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/payment-method-display/light.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=ee0d2be882a9f52bbab3ccb6b2ebe08b)

**Dark**

![PaymentMethodDisplay with a Visa ending 4242 that expires 08/29, dark theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/payment-method-display/dark.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=4cd3a9c126d6bcc92d3443100edef81e)

**Minimal**

![PaymentMethodDisplay with a Visa ending 4242 that expires 08/29, minimal theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/payment-method-display/minimal.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=3b883df306c87d03c7c0eef90d8536ef)

**Neobrutal**

![PaymentMethodDisplay with a Visa ending 4242 that expires 08/29, neobrutal theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/payment-method-display/neobrutal.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=a3cd38b6f66cbffa437d1318ded356bd)

**Nozle**

![PaymentMethodDisplay with a Visa ending 4242 that expires 08/29, nozle theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/payment-method-display/nozle.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=935a45e53efa10bb0959369ce33a4d8c)

**Nozle Dark**

![PaymentMethodDisplay with a Visa ending 4242 that expires 08/29, nozleDark theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/payment-method-display/nozle-dark.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=26c34a9bcfceea25a0c0ef1a4241ceac)

## Importing PaymentMethodDisplay

```tsx theme={null}
import {
  PaymentMethodDisplay,
  type PaymentMethod,
} from '@nozle-js/react'
```

## Rendering PaymentMethodDisplay

Pass the card and a handler for the update button:

```tsx components/saved-card.tsx theme={null}
const card: PaymentMethod = { brand: 'visa', last4: '4242', expMonth: 8, expYear: 2029 }

export function SavedCard({ openUpdate }: { openUpdate: () => void }) {
  return <PaymentMethodDisplay paymentMethod={card} onUpdatePaymentMethod={openUpdate} />
}
```

The card shows the brand name, `•••• 4242` and `Expires 08/29`. `visa`, `mastercard`, `amex`, `discover`, `jcb`, `diners` and `unionpay` get readable names; another brand shows as sent.

## Data

The component does not read the card; you pass a `PaymentMethod` with `brand`, `last4`, `expMonth` and `expYear`.

### Live data

No Nozle hook returns the saved payment method. Read it on your backend from your payment provider for the signed-in customer, and pass it in:

```tsx theme={null}
import { useEffect, useState } from 'react'

export function CardFromBackend() {
  const [card, setCard] = useState<PaymentMethod | undefined>()
  useEffect(() => {
    void fetch('/api/billing/payment-method')
      .then((response) => (response.ok ? response.json() : undefined))
      .then(setCard)
  }, [])
  return <PaymentMethodDisplay paymentMethod={card} updateHref="/settings/billing/card" />
}
```

## Examples

### No payment method

Without `paymentMethod`, the component shows "No payment method on file." and the update button.

![PaymentMethodDisplay with No payment method on file, light theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/payment-method-display-empty/light.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=92a8d64ba8c9ceafc3d3939657dd6120)

```tsx theme={null}
export function NoCard() {
  return <PaymentMethodDisplay updateHref="/settings/billing/card" />
}
```

## API reference

**paymentMethod** `PaymentMethod`

`brand`, `last4`, `expMonth` and `expYear` of the card. Without it the component shows "No payment method on file."

**onUpdatePaymentMethod** `() =\> void`

Fires when "Update Payment Method" is clicked.

**updateHref** `string` (default: /billing/update-payment)

Without `onUpdatePaymentMethod`, the button opens this URL in the same window.

**appearance** `Appearance`

Theme, variables and element overrides on top of the provider's. See [Appearance](/sdks/react/styling).

### States

| State | What shows |
| - | - |
| Card passed | Brand, `•••• <last4>`, `Expires MM/YY` and the update button. |
| No `paymentMethod` | "No payment method on file." and the update button. |

### Appearance

> **Element keys**
>
> `paymentMethod` (root).
>
> Style them with `appearance.elements`. See [Elements](/sdks/react/styling#elements).

## Related

> **[CurrentPlan](/sdks/react/components/current-plan)**
>
> Shows the overdue payment alert.

> **[BillingPortal](/sdks/react/components/billing-portal)**
>
> Invoices and billing details for the customer.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.