PaymentMethodDisplay

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.

PaymentMethodDisplay with a Visa ending 4242 that expires 08/29, light theme

Importing PaymentMethodDisplay

import {
  PaymentMethodDisplay,
  type PaymentMethod,
} from '@nozle-js/react'

Rendering PaymentMethodDisplay

Pass the card and a handler for the update button:

components/saved-card.tsx

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:

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.

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

API reference

PaymentMethod

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

() => void

Fires when “Update Payment Method” is clicked.

string

default:"/billing/update-payment"

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

Appearance

Theme, variables and element overrides on top of the provider’s. See Appearance.

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.

CurrentPlan

Shows the overdue payment alert.

BillingPortal

Invoices and billing details for the customer.

Setup

Components

Billing

Entitlements

PaymentMethodDisplay

Importing PaymentMethodDisplay

Rendering PaymentMethodDisplay

Data

Live data

Examples

No payment method

API reference

States

Appearance

CurrentPlan

BillingPortal

​Importing PaymentMethodDisplay

​Rendering PaymentMethodDisplay

​Data

​Live data

​Examples

​No payment method

​API reference

​States

​Appearance

​Related

CurrentPlan

BillingPortal

Importing PaymentMethodDisplay

Rendering PaymentMethodDisplay

Data

Live data

Examples

No payment method

API reference

States

Appearance

Related