Payment Methods
Saved cards, auto-pay enrollment, and full transaction history — all in one secure screen.
URL: portal.yourcompany.com/payment-methods
What This Screen Is
The Payment Methods screen is the customer's financial control panel inside the portal. From here they manage their saved cards, set a default card for future charges, opt into auto-pay, and review the full history of every payment they've ever made with this contractor. It's divided into two tabs so billing management and historical lookup never get mixed up.
Stripe-powered, CRM-transparent. Card numbers are never stored on the CRM's servers. The portal collects and tokenizes card data through Stripe's PCI-compliant iframe — the CRM only ever stores a Stripe token. Even the CRM owner cannot see a customer's full card number.
Screen Mockup
The page has two tabs: Payment Methods and Transaction History.
Tab 1 — Payment Methods
Saved Cards — [+ Add New Card]
- Visa ••••4242 — Expires 08/28 — Default
- Mastercard ••••9183 — Expires 03/27 — [×]
- Amex ••••1005 — Expires 11/26 — [×]
Auto-Pay Enabled — Invoices are automatically charged to your default card (Visa ••4242) when issued. You'll receive a receipt by email after each charge. [toggle: ON]
Tab 2 — Transaction History
| Date | Invoice # | Project | Amount | Method | Status | Receipt |
|---|---|---|---|---|---|---|
| May 14, 2026 | INV-3841 | Roof Replacement | $8,400.00 | Visa ••4242 | Paid | |
| May 6, 2026 | INV-3790 | Roof Replacement | $1,200.00 | Visa ••4242 | Paid | |
| Apr 3, 2026 | INV-3412 | Fence Repair | −$350.00 | MC ••9183 | Refunded | |
| Mar 28, 2026 | INV-3412 | Fence Repair | $1,850.00 | MC ••9183 | Paid | |
| Jan 10, 2026 | INV-2981 | Gutter Install | $620.00 | Visa ••4242 | Paid |
Adding a New Card
Clicking Add New Card expands an inline Stripe-powered card input directly on the page. The card fields are rendered inside a Stripe iframe — the CRM server never touches the raw card data at any point during entry. Once the customer submits, Stripe tokenizes the card and returns a token that the CRM stores against the customer's account. The full PAN, CVV, and expiry are never transmitted to or stored on CRM servers.
Card entry form:
-
Card Number field (Stripe iframe, focused)
-
Expiry (MM / YY) + CVC fields
-
"Secured by Stripe — PCI DSS Level 1 compliant"
-
[Save Card]
-
The card is instantly available for use on the next invoice.
-
If this is the customer's first card, it becomes the default automatically.
-
If the customer already has a default card, the new card is added but not set as default — the customer can swap the default at any time.
-
Duplicate cards (same PAN, same expiry) are rejected with a clear error message.
Default Card
The default card is the card used for all future Pay Now actions and for auto-pay charges when they're enabled. Only one card can be the default at a time. To change the default, the customer taps Set as Default on any other saved card — the badge moves immediately and the change is saved to Stripe without a page refresh.
- The default card is visually marked with a Default badge in the card list.
- When paying an invoice via Pay Now, the default card is pre-selected — the customer can switch to another saved card before confirming.
- The default card cannot be removed unless another card is first set as default or auto-pay is disabled.
Auto-Pay Enrollment
Auto-pay is an opt-in toggle. When enabled, the CRM automatically charges the customer's default card the moment the contractor issues an invoice. The customer receives an email receipt immediately after the charge. Auto-pay removes the friction of logging into the portal to pay each invoice — preferred by customers who have long-running or recurring work with the contractor.
Auto-Pay Rules
- Opt-in only: auto-pay is off by default. Customers must actively enable it.
- Default card only: auto-pay always charges the default card — the customer can change the default card at any time to redirect future charges.
- Charge timing: the charge fires as soon as the contractor marks an invoice as "issued" in the CRM — not when the due date passes.
- Email receipt: sent within seconds of a successful charge with the invoice PDF attached.
- Failed charge: if auto-pay fails (card declined, expired), the customer is notified by email and the invoice reverts to "Past Due" status. The customer must manually pay or update their payment method.
- Disabling auto-pay: the customer can disable at any time via the toggle. Invoices already charged are not affected; future invoices will require manual payment.
Removing a Card
Customers can remove any non-default card by clicking the × button on its row. The card is immediately deleted from Stripe — it cannot be used for future charges after removal. A confirmation dialog appears before deletion to prevent accidental removal.
Removal Restrictions
- The default card cannot be removed while it is set as default — the customer must first set another card as default, then remove the old one.
- If auto-pay is active and the customer tries to remove their only saved card, the portal blocks removal with a message: "Disable auto-pay first, or add another card before removing this one."
- Cards linked to pending or due invoices are flagged with a warning but can still be removed — the customer will need to pay those invoices manually if the card is removed.
Transaction History
The Transaction History tab shows a complete ledger of every payment the customer has ever made with this contractor, from the most recent to the oldest. Each row includes the date, invoice number, project name, amount, payment method, status, and a link to download the PDF receipt. The history never expires — payments from years ago remain visible indefinitely.
Refunds in the Transaction History
When a contractor issues a refund, it appears as a separate row in the transaction history with a negative amount and a Refunded status badge shown in red. Refunds are tied to the original invoice number so the customer can correlate them. The original payment row remains unchanged — both the original charge and the refund appear as separate line items for a clear, complete ledger.
- Partial refunds appear as a negative amount for the refunded portion (not the full invoice amount).
- Full refunds show the full invoice amount as a negative entry.
- Stripe processes refunds back to the original card within 5–10 business days. The portal shows "Refunded" immediately after the contractor initiates it, even before the funds return to the bank.
Security & PCI Compliance
PCI DSS Level 1 compliant — the highest level of payment security certification. Card numbers are tokenized by Stripe before leaving the customer's browser. The CRM stores only a Stripe payment method token — never the full card number, CVV, or expiry date in raw form.
- Stripe tokenization: card entry fields are rendered inside a Stripe-hosted iframe. Raw card data is transmitted directly to Stripe's servers over TLS — the CRM backend never sees it.
- What the CRM stores: the Stripe Customer ID and the Stripe Payment Method token. These are useless to anyone who gains unauthorized access to the CRM database — they cannot be reversed to recover a card number.
- What the contractor sees: only the card brand, last 4 digits, and expiry — identical to what the customer sees in the portal.
- Session security: the payment methods page requires an authenticated session. Accessing it without a valid session redirects to the portal login. Sessions expire after 30 days of inactivity.
- HTTPS enforced: all portal pages are served over HTTPS. HTTP requests are automatically redirected.
CRUD Operations
| Operation | Available | Notes |
|---|---|---|
| View Saved Cards | Yes | Brand, last 4 digits, expiry — no full card number shown |
| Add a New Card | Yes | Stripe-powered inline form; PCI compliant |
| Set Default Card | Yes | One default at a time; changes take effect immediately |
| Remove a Non-Default Card | Yes | Confirmation required; card deleted from Stripe immediately |
| Remove the Default Card | No | Must set another card as default first, or disable auto-pay |
| Remove Only Card While Auto-Pay Active | No | Must disable auto-pay or add another card first |
| Enable Auto-Pay | Yes | Opt-in toggle; requires at least one saved card |
| Disable Auto-Pay | Yes | Effective immediately; future invoices require manual payment |
| View Transaction History | Yes | Full ledger — all payments, refunds, and receipts |
| Download Payment Receipt PDF | Yes | Available on every paid or refunded transaction row |
| Dispute a Charge | No | Disputes are initiated through the customer's bank or card issuer — not through the portal |
| Initiate a Refund | No | Refunds are issued by the contractor from the CRM — customer contacts contractor to request |
| View Another Customer's Payments | No | Strict account-level isolation — all payment data is scoped to the authenticated customer session |
Related Pages
- Customer Portal Overview — Full feature map of the customer-facing portal — technician tracker, contracts, scheduling, and more
- My Projects — Customer Portal — Project status, shared photos, documents, and Pay Now on individual invoices
- Contracts — Customer Portal — E-sign, review, and download service agreements from the customer's portal
- Notification Preferences — Customer controls for billing alerts, payment receipts, and auto-pay confirmation emails