MARKETPLACE
PLUGINS
CREDIT CARD INPUT FORMATTER
Credit Card Input Formatter logo

Credit Card Input Formatter

Published November 2024
   •    Updated June 2025

Plugin details

This plugin enables you to add intuitive and user-friendly input fields specifically formatted for credit card details. Users can input credit card numbers, expiration dates, and CVC codes with automatic formatting based on the chosen card type, making it ideal for secure payment interfaces.

Features:
Dynamic Card Number Formatting: Automatically adjusts the card number input pattern based on the card type (Visa, Mastercard, Amex, Discover).
CVC Validation: Formats CVC input according to the card type, allowing either three or four digits.
Expiration Date Validation: Checks that the entered expiration date is valid and not expired.
Easy Setup and Integration: Place input fields on any page with simple configuration.
There is also a card element that you can use to represent the created card for the user.

Field Types

1. Card Number Input
Automatically formats card numbers according to the selected card type.
Compatible with Visa, Mastercard, Amex, and Discover card types.

2. CVC Input
Limits CVC length according to card type (three digits for most cards, four digits for Amex).

3. Expiration Date Input
Ensures the expiration date is formatted correctly, you will need to validate it yourself

Demo: https://chakor-plugin-demo-3.bubbleapps.io/version-test/card_input_format

Demo Editor: https://bubble.io/page?id=chakor-plugin-demo-3&test_plugin=1730885308971x887416714774970400_current&tab=Design&name=card_input_format&type=page

$8

One time

stars   •   0 ratings
7 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Chakor logo
Chakor
Joined 2021   •   371 Plugins
View contributor profile

Instructions

Step 1: Enable ID Attribute Option Go to Settings -> General in your Bubble editor.
Check the box next to "Expose the option to add an ID attribute to HTML elements."

Step 2: Add the Plugin Element
Drag the card-input element onto the page where you want to capture the card details.
This will be located on the left sidebar of your Bubble editor under visual elements.

Step 3: Assign IDs to Input Fields
For each field (Card Number, CVC, Expiration Date), assign a unique ID to link them to the plugin's respective functionality.

Step 4: Configure Properties for Card Type
In the card-input element settings, select the card type field to enable dynamic formatting. The plugin will adjust the input format based on this property.
If you need to get card type from user, design a dropdown and give options (visa, mastercard, amex, discover) and map options to card type in card number and cvc inputs.

Step 5: Customize and Preview
Adjust any additional settings, such as placeholder text or colors, to fit your design.
Preview the page to test the plugin and ensure that formatting works as expected.

Types

This plugin can be found under the following types:

Categories

This plugin can be found under the following categories:
Productivity   •   Data (things)   •   Containers   •   Input Forms

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble