PaymentCard
PaymentCard is a virtual representation of a bank card with flippable front and back sides, supporting solid color, image, or gradient backgrounds.
Platform availability: iOS 17.0+
When to use:
- Use PaymentCard when displaying virtual representations of credit or debit cards with card details and flip-to-reveal CVV functionality.
- Consider using Card for general-purpose card containers that do not require payment card-specific features.
It includes the following features:
- Configurable front and back backgrounds (image, solid color, or gradient).
- Customizable text labels and logos.
- Flip animation to reveal CVV.
- Disabled/locked card state with badge.
- Customizable corner radius and size ratio.
Import
import BackbaseDesignSystem
Visual reference
|
|
|
API reference
PaymentCard
Properties
|
Property |
Type |
Description |
|---|---|---|
|
back |
PaymentCardBack |
The back view of the payment card |
|
canFlip |
Bool |
Whether card flipping is enabled. Defaults to true |
|
cardData |
PaymentCardData? |
The card data used to populate the card |
|
cardHeightToWidthRatio |
CGFloat |
The height to width ratio. Defaults to 202/327 |
|
cornerRadius |
DesignSystem.CornerRadiusTypes? |
The corner radius. Defaults to nil (uses 20.0) |
|
flipAnimation |
Animation<PaymentCard>? |
The custom flip animation. Defaults to design system animation |
|
front |
PaymentCardFront |
The front view of the payment card |
|
isDisabled |
Bool |
The card disabled state. Defaults to false |
|
isFlipped |
Bool |
Whether the card shows the back side |
|
shouldFlipOnTap |
Bool |
Whether flip on tap is enabled. Defaults to true |
|
showDisabledCardInGrayColor |
Bool |
Whether to use gray overlay when disabled. Defaults to true |
|
side |
PaymentCardSide |
The visible side (.front or .back) |
Initializers
|
Initializer |
Description |
|---|---|
|
init(frame:background:style:) |
Creates with same background for front and back |
|
init(frame:frontsideBackgroundType:backsideBackgroundType:style:) |
Creates with different backgrounds for each side |
Methods
- flip()
- Flips the card to the other side (if canFlip is true).
- setStatus(title:icon:)
- Sets a custom status title and icon for disabled state.
|
Parameter |
Type |
Description |
|---|---|---|
|
title |
String |
The status title text |
|
icon |
UIImage? |
The status icon image |
- setup(data:)
- Configures the card with payment card data.
|
Parameter |
Type |
Description |
|---|---|---|
|
data |
PaymentCardData |
The card data to populate |
PaymentCardData
|
Property |
Type |
Description |
|---|---|---|
|
cardLogo |
DesignSystem.SizedImage? |
The logo on top left |
|
cvv |
String? |
The CVV code shown on back |
|
labelFour |
String |
The fourth label (e.g., expiry date) |
|
labelOne |
String |
The first label (e.g., card number) |
|
labelThree |
String |
The third label (e.g., "Valid Thru") |
|
labelTwo |
String |
The second label (e.g., cardholder name) |
|
labelVendor |
String? |
The vendor label below vendor logo |
|
rightBottomLogo |
DesignSystem.SizedImage? |
The logo on bottom right |
|
rightBottomText |
String? |
The text on bottom right (alternative to logo) |
|
rightMiddleLogo |
DesignSystem.SizedImage? |
The logo on middle right |
|
vendorLogo |
DesignSystem.SizedImage? |
The logo on top right |
BackgroundType Enum
|
Case |
Description |
|---|---|
|
gradient(DesignSystem.Gradient) |
Gradient background |
|
image(UIImage?) |
Image background |
|
solidColor(UIColor) |
Solid color background |
Usage
With background image
let originalImage = UIImage(named: "credit-card-hills")
let paymentCard = PaymentCard(background: .image(originalImage))
With gradient background
let grad = DesignSystem.Gradient(
startPoint: .init(point: .init(x: 0.5, y: 0), color: UIColor(hex: "#a01b4e")),
endPoint: .init(point: .init(x: 0.5, y: 1), color: UIColor(hex: "#460b43"))
)
let paymentCard = PaymentCard(background: .gradient(grad))
With solid background color
let paymentCard = PaymentCard(background: .solidColor(.systemBlue))
Configuring card data
let masterCardLogo = UIImage(named: DesignSystem.Assets.icMastercard, in: .design, compatibleWith: nil)
let sizedTopImage = DesignSystem.SizedImage(image: masterCardLogo, size: CGSize(width: 40, height: 50))
let visaLogo = UIImage(named: DesignSystem.Assets.icVisaColor, in: .design, compatibleWith: nil)
let sizedBottomImage = DesignSystem.SizedImage(image: visaLogo, size: CGSize(width: 50, height: 40))
let cardData = PaymentCardData(
textOne: "•••• •••• •••• 7559",
textTwo: "Glenn N. Keim",
textThree: "Valid Thru",
textFour: "11/26",
labelVendor: "Credit",
cvv: "060",
vendorLogo: sizedTopImage,
rightBottomLogo: sizedBottomImage
)
paymentCard.setup(data: cardData)
Disabling flip
paymentCard.canFlip = false
paymentCard.shouldFlipOnTap = false
Custom flip animation
paymentCard.flipAnimation = { card in
let fromView: UIView = card.isFlipped ? card.back : card.front
let toView: UIView = card.isFlipped ? card.front : card.back
UIView.transition(
from: fromView,
to: toView,
duration: 0.5,
options: [.transitionCurlDown, .showHideTransitionViews]
)
let otherSide: PaymentCard.PaymentCardSide = card.side == .back ? .front : .back
card.side = otherSide
}
Disabling the card
paymentCard.isDisabled = true
// Custom status
let badgeIcon = UIImage(named: DesignSystem.Assets.ic360, in: .design, compatibleWith: nil)
paymentCard.setStatus(title: "Disabled", icon: badgeIcon)
Prevent gray color on disabled
paymentCard.showDisabledCardInGrayColor = false
Customization
Styling
|
Style |
Description |
|---|---|
|
DesignSystem.shared.styles.paymentCard |
Default payment card style |
Override default style
DesignSystem.shared.styles.paymentCard = { card in
card.cornerRadius = .small()
// Card Front labels
card.front.labelOne.font = DesignSystem.shared.fonts.preferredFont(.body, .regular)
card.front.labelTwo.font = DesignSystem.shared.fonts.preferredFont(.subheadline, .semibold)
card.front.tintColor = UIColor.white
// Vendor label
card.front.rightView.vendorLabel.textColor = UIColor.black
card.front.rightView.vendorLabel.font = DesignSystem.shared.fonts.preferredFont(.caption1, .regular)
// Status view
card.front.statusView.backgroundColor = UIColor.black
card.front.statusView.label.textColor = UIColor.white
// Card back
card.back.cvvLabel.font = DesignSystem.shared.fonts.preferredFont(.subheadline, .regular)
card.back.cvvLabel.textColor = UIColor.black
card.back.cvvLabel.backgroundColor = UIColor.white
}
Style during initialization
let style: Style<PaymentCard> = { card in
card.cornerRadius = .medium()
card.front.tintColor = .white
}
let paymentCard = PaymentCard(background: .solidColor(.systemBlue), style: style)
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
Accessibility configuration
|
Property |
Description |
Type |
|---|---|---|
|
accessibilityHint |
The hint describing how to interact with the card |
String |
|
accessibilityLabel |
The accessible label for the payment card |
String |
|
isAccessibilityElement |
Whether the card is an accessibility element |
Bool |
Best practices
- Configure accessibility for individual card elements through the front and back properties.
- CVV information should be handled carefully for security.
- Set appropriate accessibility labels that describe the card without exposing sensitive information.
- Use accessibilityHint to describe the flip interaction.
let paymentCard = PaymentCard(background: .solidColor(.systemBlue))
paymentCard.isAccessibilityElement = true
paymentCard.accessibilityLabel = "Visa card ending in 7559"
paymentCard.accessibilityHint = "Double tap to flip and reveal CVV"
Dependencies
- External dependencies: None
- Internal dependencies: PaymentCardFront, PaymentCardBack, PaymentCardData, PaymentCardStatusView
Design tokens
Component styling is applied automatically through the design system's theming infrastructure.
JSON tokens
This component uses semantic tokens only. See Semantic tokens below.
Semantic tokens
These tokens are accessed via the public DesignSystem.shared API.
|
Token |
API Reference |
Description |
|---|---|---|
|
Colors |
DesignSystem.Gradient |
Gradient backgrounds for cards |
|
Colors |
UIColor |
Solid color backgrounds |
|
Corner Radius |
DesignSystem.CornerRadiusTypes |
Card corner radius (defaults to 20.0) |
|
Styles |
DesignSystem.shared.styles.paymentCard |
Predefined payment card style |
|
Typography |
DesignSystem.shared.fonts.preferredFont(.body, .regular) |
Card number font |
|
Typography |
DesignSystem.shared.fonts.preferredFont(.subheadline, .semibold) |
Cardholder name font |
See also
- Card - General card container component