Payment Form screen examples

Polar

Checkout page where the user enters their email, selects a payment method, and provides billing details to subscribe to the Scale plan.

• Checkout
• Pricing

Magnific

Settings page where the user is upgrading to a Business plan, selecting the number of seats, and confirming payment details in a checkout modal.

• Checkout
• Pricing

Latitude.sh

Billing settings page where the user is attempting to add a new credit card via a modal, but an error toast indicates a connection issue with the payments provider.

• Error
• Billing Settings

Alloy

Settings view where the user checks their current free plan and can upgrade to a Pro tier by providing credit card details.

• Billing Settings
• Upgrade Prompt

Inference

Billing settings page where the user views their plan status, checks prepaid balances, and configures automatic top-ups.

• Billing Settings
• Usage

Origin Financial

Checkout screen where the user enters their credit card details to subscribe to Origin, currently showing an unexpected error toast.

• Checkout
• Error

Extend

Welcome modal granting the user free credits and prompting them to add a payment method for uninterrupted access.

• Welcome
• Trial

Dock

Settings page where the user configures visibility and default status for payment term options like Net 30 and Net 60.

• Settings

Bloom

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

• Billing Settings

Appwrite

Settings page where the user adds a new billing address by filling out a modal form with country, street, city, state, and postal code details.

• Add & Create
• Account Settings

Beside

Checkout drawer where the user enters their credit card details and billing country to confirm a subscription purchase.

• Checkout

Copilot

Settings overlay where the user enters their credit card details or connects a bank account to set up their subscription payment.

• Settings