Credit Card Preview

Details

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.
For a demo of this plugin please visit: https://gaugeplugin.bubbleapps.io/cardpreview

For a demo of this plugin in the bubble editor please visit:https://bubble.io/page?type=page&name=cardpreview&id=gaugeplugin

Icons made by https://www.flaticon.com/authors/monkik monkik https://www.flaticon.com/ Flaticon

Categories

Ecommerce, Containers, Payment, Technical, Productivity, Visual Elements

Types

Element

Links

Service Link:

https://www.rapidevelopers.com

Instructions

1. Go to Settings-> General and Expose the option to add id attributes to html elements.
2. Drag the Card Container Element onto your page. This will display the credit card container. Define the width accordingly.

3. Create a new Group and give it an unique element id

4. Inside this group you have to position the inputs that receive the credit card information. Add unique element ids to all the inputs.

5. Enter the element ids from step 4 and 5 into the relevant fields within the card container element.

‍