Link to the plugin page: https://zeroqode.com/plugin/credit-card-preview-plugin-for-bubble-1739546526244x826321688712499100
Demo to preview the plugin:
Introduction
This plugin allows you to add a live and interactive credit card preview to your bubble application.
Users can preview the data they entered in a beautiful preview.
You can create your own form elements and the plugin will attach them to the card preview automatically.
(!) No data is saved.
How to setup
- Enable ID Attributes
Go to the settings page in your editor. Under the General tab click on the checkbox “Expose the option to add an ID attribute to HTML elements”
- Add the Element to the Page
- Go to the Design tab in your Bubble editor.
- Search for the element called Card Container.
- Drag and drop this element onto your page where you want the credit card preview to appear.
- Configure the Properties
- name placeholder: Placeholder text shown in the input field for the cardholder's name.
- Input CC Number Element ID: The ID of the input element for the card number.
- Input CVC Number Element ID: The ID of the input element for the card CVC code.
- Input Expiry Element ID: The ID of the input element for the card expiry date (month/year).
- Input Name Element ID: The ID of the input element for the cardholder’s name.
- Form Element ID: The ID of the form container (optional, for form validation or submission).
With the element selected, fill out the following fields in the property panel:
- Connect to User Inputs
- Card number
- Cardholder name
- Expiration month and year
- CVC
Create input fields on your page for the user to enter card details, such as:
Then, in the
Card Container element’s properties, fill in each field with the ID Attribute of the corresponding input element. The plugin uses these IDs to retrieve the values dynamically from the inputs. Make sure each input on the page has a unique ID, and that the same ID is entered in the respective field of the Card Container properties.
Plugin Element Properties
Card Container
Fields:
Title | Description | Type |
Width | Width in Pixels | Number |
Name placeholder | The placeholder of the name field | Text |
Input CC Number Element ID | The element id of the input used to enter the cc number | Text |
Input CVC Number Element ID | The element id of the input used to enter the cvc number | Text |
Input Expiry Element ID | The element id of the input used to enter the expiry date | Text |
Input Name Element ID | The element id of the input used to enter the name | Text |
Form Element ID | The element id of the group that holds all the inputs | Text |
