Payment-settings <2024>
Perfecting Your Checkout: The Ultimate Guide to Payment Settings
5. User Flow Example
- User navigates to Settings → Payment.
- They see a list of saved cards (e.g., Visa ending in 4242, default).
- They click Add Payment Method → enter card details via a secure iframe/Stripe Element → token returned.
- Token sent to backend → attached to customer → saved to DB.
- New card appears in the list.
- They can click Make Default or Delete.
- They toggle “Email receipts” off and save.
Emily had just launched her online store, "Emily's Fashion Boutique," and was excited to start selling her favorite clothing and accessories to customers all over the world. She had spent hours setting up her store, adding products, and configuring her payment settings. payment-settings
- Cardholder name (required)
- Card number (required)
- Expiration date (MM/YY) (required)
- CVV (required) — help text: 3 digits on back of card (4 on front for AmEx)
- Country / Billing country (required)
- Address line 1 (required)
- Address line 2 (optional)
- City (required)
- State / Province (required where applicable)
- ZIP / Postal code (required)
Granular Control: Most platforms allow high-level customization, such as toggling writebacks in Weave or setting conditional logic in Cognito Forms to decide exactly when a customer must pay. Perfecting Your Checkout: The Ultimate Guide to Payment
Invoice ready: Subject: Your invoice is ready Body: Your invoice for $XX.XX dated Apr 10, 2026 is available. [Download invoice] User navigates to Settings → Payment
addPaymentMethod: async (data:
type: PaymentMethodType;
token: string; // from Stripe/PayPal/etc.
setAsDefault?: boolean;
billingAddress: BillingAddress;
): Promise<PaymentMethod> =>
const res = await fetch($API_BASE/methods,
method: 'POST',
headers: 'Content-Type': 'application/json' ,
body: JSON.stringify(data),
);
if (!res.ok) throw new Error('Failed to add payment method');
return res.json();
,
