Payment method screen examples

Latitude.sh

Onboarding step where the user adds a credit card to finish their account setup, currently showing a declined-card error.

• Error
• Payment Form

Dock

Checkout step where the user enters their credit card number, expiry, and CVV to add a payment method.

• Payment Form
• Checkout

Bloom

Settings page where the user adds a new credit card payment method via a modal over their billing and credit plan overview.

• Payment Form
• Billing Settings

Appwrite

Settings page where the user adds a new credit card payment method via a modal form.

• Payment Form
• Billing Settings

Exa

Billing settings page where the user is adding funds to their account balance via a loading modal.

• Billing Settings
• Payment Form

Town

Settings page where the user manages their payment method, views past invoices, and tracks invite rewards.

• Billing Settings
• Payment Method

Assembly AI App Builder

Settings page where the user selects a subscription plan between Starter, Professional, and Advanced tiers to continue using their portal.

• Pricing
• Billing Settings

Mailchimp

Settings page where the user views their active billing plans, including website, messaging, and transactional email plans, along with their payment method.

• Billing Settings
• Pricing

Bird

Settings page where the user views their main wallet balance and can add funds for their workspaces.

• Billing Settings
• Account Settings

Meetup

Settings page where the user updates their credit card details including name, card number, expiration date, and security code.

• Payment Form
• Billing Settings

Dovetail

Settings page where the user manages their billing plan, views their trial status, and adds payment methods.

• Billing Settings
• Pricing

Chatbase

Settings page where the user manages their workspace billing method and views invoice history, currently showing empty states for both.

• Billing Settings