Screen · Finance

Card Details

A card screen with a card that catches the light and flips to its CVV, plus limits and controls.

A card details screen: a skeuomorphic card with a private number mask, an attitude-driven sheen and holographic band, tap or drag to flip to the CVV and press to lift; below it, the month's spend, limits and freeze, online and contactless controls as bold blocks.

SwiftUIiOS 17.0+payment-card

Get Swift Pieces Pro

$199 once, every piece included. See how installing works · Sign in

What's included

SwiftUI source you own, built on Apple frameworks only.

A card details screen with spend, limits and controls
A private number mask you can reveal
An attitude-driven sheen; tap or drag to flip to the CVV
PaymentCard for your own screens

In the Build Kit

Graphic (style), Send Money (recipe). Your agent builds around this screen in the same design.

Used in

Finance App (template), Travel App (template)

Implementation notes

How it behaves, what it handles, and the decisions behind it.

The card masks all but the last group of the number and reveals it from a small eye control or a bound isRevealed. A specular sheen and a thin holographic band follow the device attitude, filtered so they drift rather than jitter. Tap to flip to the back for the security code, or drag horizontally and the card turns with the finger and settles on the nearer face; pressing lifts the card with a deeper shadow. The network mark is a slot, so a logo, text, or nothing goes in the corner.

Notes

States: resting, pressed (lifted), dragging (turn follows the finger), flipped, revealed.
Motion comes from CMMotionManager polled on the main actor at 60 Hz through a low-pass filter. Updates start only while the scene is active and stop on disappear, in the background, and under Reduce Motion, where the sheen is static and the flip becomes a crossfade.
The turn is an interpolated Animatable value, so the face swap happens edge-on rather than at the start of the animation. A drag can turn the card at most one face per gesture; predictedEndTranslation commits flicks.
Haptics: soft impact on each flip commit, selection on mask toggle.
VoiceOver reads the card as one element: "ending in 4 2 4 2" while masked, every digit when revealed, with Flip and Reveal/Hide actions. The eye control is hit-tested from the same gesture so taps on it never flip the card.
The screen passes the Graphic brand into the card's existing parameters: an orange tile as surface with its on ink, theme.radius.lg corners, the display face as numberFont and a drawn two-disc mark. A violet card tilted behind it gives the stack its depth.
Freezing desaturates and disables the card, lights the sky Freeze block and pauses Online and Tap to pay; the spend dial springs to its fraction on appear (instantly under Reduce Motion) and limits cover loading and failed states.
PaymentCardExample in PaymentCard.swift is the earlier Studio card screen the Finance App template embeds; it is unchanged.
PaymentCardScreenExample in the Example section of PaymentCard.swift is the Card Details screen from the preview.

Keep building

Pieces that work well next to this one.

Screen · Finance

Wallet

A wallet of stacked cards and passes you can bring forward, fan out and reorder.

Screen · Finance

Send Money

A transfer review with the recipient, a huge amount and a slide-to-send control that commits with a haptic.

Screen · Finance

Activity

Account activity grouped by day, with rows that swipe to categorize, split or hide.

Card Details

A card screen with a card that catches the light and flips to its CVV, plus limits and controls.

SwiftUIiOS 17.0+payment-card

Notes

States: resting, pressed (lifted), dragging (turn follows the finger), flipped, revealed.

Motion comes from CMMotionManager polled on the main actor at 60 Hz through a low-pass filter. Updates start only while the scene is active and stop on disappear, in the background, and under Reduce Motion, where the sheen is static and the flip becomes a crossfade.

The turn is an interpolated Animatable value, so the face swap happens edge-on rather than at the start of the animation. A drag can turn the card at most one face per gesture; predictedEndTranslation commits flicks.

Haptics: soft impact on each flip commit, selection on mask toggle.

VoiceOver reads the card as one element: "ending in 4 2 4 2" while masked, every digit when revealed, with Flip and Reveal/Hide actions. The eye control is hit-tested from the same gesture so taps on it never flip the card.

The screen passes the Graphic brand into the card's existing parameters: an orange tile as surface with its on ink, theme.radius.lg corners, the display face as numberFont and a drawn two-disc mark. A violet card tilted behind it gives the stack its depth.

Freezing desaturates and disables the card, lights the sky Freeze block and pauses Online and Tap to pay; the spend dial springs to its fraction on appear (instantly under Reduce Motion) and limits cover loading and failed states.

PaymentCardExample in PaymentCard.swift is the earlier Studio card screen the Finance App template embeds; it is unchanged.

PaymentCardScreenExample in the Example section of PaymentCard.swift is the Card Details screen from the preview.