---
title: "PaymentCard — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Hamim Reza · Cards. Flip payment card with editable details"
canonical: "https://framer.elliotli.dev/component/paymentcard"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/PaymentCard

# PaymentCard

Flip payment card with editable details

[View on Framer](https://framer.com/marketplace/components/paymentcard/?via=elliot-li)

![PaymentCard preview image 1](https://framer.elliotli.dev/og/component/paymentcard/d5af16d085721c18/1600x1200.jpg)

## Summary

Flip payment card with editable details

## Description

An interactive tap-to-flip payment card with editable details, gradient controls, and smooth Framer Motion animation. Click to reveal the back side with CVV and card details. Built for checkout mockups, fintech projects, and portfolio UI elements that need a realistic card experience.

## Features

-   Tap or click to flip between front and back instantly
    
-   Editable card number, holder name, expiry date, CVV and card type
    
-   Solid color or custom gradient background support
    
-   Dynamic text color control for contrast on any background
    
-   Show or hide CVV on the back side
    
-   Front and back toggle — keep card fixed on one side
    
-   Smooth Framer Motion flip animation
    
-   Responsive — works on desktop and mobile
    
-   No code needed — all controls in Framer panel
    

## Property Controls

**Card Details** — card number, holder name, expiry date, CVV, card type

**Appearance** — background color, gradient toggle, gradient colors, text color

**Display** — show/hide CVV, front/back toggle

**Animation** — flip speed

## Use Cases

Checkout page mockups · SaaS onboarding demos · Pricing page UI · Fintech and banking websites · Portfolio interactive elements · Payment flow prototypes · Finance app presentations

Customization:

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-4iaz79kt-dKu0TFQxXxwXMXIotuaNRifmLsFrY4)

## Rank history [How rankings work →](/terms#rankings)

-   All · #9639

## Details

- **Author**: Hamim Reza
- **Price**: $10.00
- **Published**: 2025-09-27
- **Updated**: 2026-04-12
- **Added**: 2025-09-22
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator