Card Input Formatter
Credit Card Input Formatter Plugin - Streamlines credit card entry with customizable formatting for various card types, ensuring a user-friendly experience and secure data handling.
Abdullah Fawad
Last Update 2 lata temu
Description
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.
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 valid and has not already passed.
How to set up:
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.
