MOLECULAR COMPONENTS
Credit Payment Component
DEFAULT EXAMPLE:
Overview
Here is an overview of the Credit_payment_component class:
class Credit_payment_component {
constructor (opts = false) { ... }
get_class_defaults () { ... }
get_generate_options (options) { ... }
generate (options = false) { ... }
}
Default Settings
The following object properties and values are all of the defaults for this class:
{
id: 'default-cc-payment-id',
features: {
outer_label: true
},
classes : {
form_groups : 'form-group mb-4',
label_wrappers : 'd-flex justify-content-between align-items-center',
labels : 'mb-1',
label_buttons : 'btn btn-sm btn-link pb-1 pl-3 pr-0',
label_button_icons : 'fas fa-question-circle text-primary',
inputs : 'form-control form-control-lg',
clear_text_parents : 'position-relative text-right',
clear_text_buttons : 'btn btn-lg position-relative opacity-50 p-2 border-0 bg-transparent',
form_text_wrappers : 'd-flex justify-content-between align-items-start',
form_text_parents : 'text-left pr-2',
form_help_texts : 'form-text text-muted',
form_error_texts : 'd-none form-text text-danger',
form_success_texts : 'd-none form-text text-success',
outer_label : 'd-block mb-2',
section : 'bg-white border border-gray-400 p-3 rounded-lg mb-4',
heading : 'd-flex justify-content-between align-items-center pb-3',
legend : 'text-primary mb-0',
reset_parent : 'pl-3',
reset_button : 'btn btn-xxs btn-outline-primary',
card_number_icon_wrapper : 'text-right pr-1',
card_number_icon_parent : 'position-relative',
card_number_icon : 'fas fa-credit-card',
form_text_parents : 'text-left',
row : 'row',
row_column_1 : 'col-sm-7 pb-2 pb-sm-0',
row_column_2 : 'col-sm-5',
sub_row : 'form-row',
sub_row_column_1 : 'col-5',
sub_row_column_2 : 'col-2 text-lg text-center',
sub_row_column_3 : 'col-5',
sub_row_2 : 'form-row justify-content-end',
sub_row_2_column : 'col-sm-9'
},
aria_describedby_suffix : '-help',
error_text_suffix : '-error',
success_text_suffix : '-success',
characters_count_suffix : '-characters',
max_characters : '50',
clear_text_button_styles : 'top:-48px; -webkit-appearance:none;',
clear_text_button_text : '×',
masking: {
enable : false,
type : 'phone',
min : 0,
max : 1000,
seperator : ','
},
inputs: {
card_number: {
classes: {
form_group: 'form-group mb-1',
input: 'form-control form-control-lg',
clear_button: 'btn btn-lg position-relative opacity-50 p-2 border-0 bg-transparent'
},
type: 'tel',
placeholder: '0000 0000 0000 0000',
suffix: '-card-number',
name: 'default-cc-payment-id-card-number',
value: '',
styles: {
clear_icon_button : 'top:-47px;'
},
masking: {
enable: true,
type: 'credit'
},
required : true
},
card_name: {
classes: {
form_group: 'form-group mb-2',
input: 'form-control',
clear_button: 'btn position-relative opacity-50 p-2 border-0 bg-transparent'
},
type: 'text',
placeholder: 'CARDHOLDER NAME',
suffix: '-card-name',
name: 'default-cc-payment-id-card-name',
value: '',
styles: {
clear_icon_button : 'top:-39px;'
},
masking: {
enable: false
},
form_text : {
help : ['Enter a card number & name exctly as they appear on your card'],
error : ['This is the card number and name error text'],
success : ['This is the card number and name success text']
},
required : true
},
card_month: {
classes: {
form_group: 'form-group mb-0',
input: 'form-control form-control-sm',
clear_button: 'btn position-relative opacity-50 p-2 border-0 bg-transparent'
},
type: 'tel',
placeholder: '00',
suffix: '-card-month',
name: 'default-cc-payment-id-card-month',
value: '',
styles: {
clear_icon_button : 'top:-37px;'
},
masking: {
enable: true,
type: 'two_digits'
},
form_text : {
help : ['Enter card expiration Month / Year'],
error : ['This is the card number and name error text'],
success : ['This is the card number and name success text']
},
required : true
},
card_year: {
classes: {
form_group: 'form-group mb-0',
input: 'form-control form-control-sm',
clear_button: 'btn position-relative opacity-50 p-2 border-0 bg-transparent'
},
type: 'tel',
placeholder: '00',
suffix: '-card-year',
name: 'default-cc-payment-id-card-year',
value: '',
styles: {
clear_icon_button : 'top:-37px;'
},
masking: {
enable: true,
type: 'two_digits'
},
required : true
},
card_cv: {
classes: {
form_group: 'form-group mb-0',
input: 'form-control form-control-sm',
clear_button: 'btn position-relative opacity-50 p-2 border-0 bg-transparent'
},
type: 'tel',
placeholder: '000',
suffix: '-card-cv',
name: 'default-cc-payment-id-card-cv',
value: '',
styles: {
clear_icon_button : 'top:-37px;'
},
masking: {
enable: true,
type: 'four_digits'
},
form_text : {
help : ['3-4 digit code'],
error : ['This is the card number and name error text'],
success : ['This is the card number and name success text']
},
required : true
}
},
text: {
outer_label: 'Payment Information:',
legend: 'CREDIT CARD',
reset_button: 'RESET',
card_number_label: 'Enter Your Card Number/Name:',
card_expiration_label: 'Expiration Date:',
card_cv_label: 'CV Code:',
card_expiration_divider : '/',
card_number_modal_text: {
heading: 'Card Number & Name',
body: [{
type: 'paragraphs',
content: [ 'Enter your card number and the card holder name exactly as they appear on your card.' ]
}]
},
card_month_modal_text: {
heading: 'Card Expiration Date',
body: [{
type: 'paragraphs',
content: [ 'Enter your card month and year as they appear on your card. Both should be 2-digit numbers.' ]
}]
},
card_cv_modal_text: {
heading: 'Card CV Code',
body: [{
type: 'paragraphs',
content: [ 'Your card CV Code is generally on the back of your card and is 3 digits long. For American Express cards however, this code is often on the front of your card and is 4 digits long.' ]
}]
}
}
}
Methods
The following class methods allow you to interact with the Credit_payment_component class object.
constructor(opts)
Class constructor with an optional argument expecting an object with class-specific properties/values. Any matching properties passed will override the default values. The constructor function exposes a .defaults object containing various default settings for the component.
<script type="module">
// import module
import { Credit_payment_component } from './js/modules/form_components.js';
// create an object with your overrides specified
let credit_payment_component_default_settings = {
id: 'my-cc-group'
};
// initialize the class and pass your settings as an argument
let credit_payment_components = new Credit_payment_component(credit_payment_component_default_settings);
// confirm your changes
console.log( credit_payment_components.defaults.attributes.class );
</script>
get_class_defaults()
Returns an object with all of the default properties of the Credit_payment_component class.
<script type="module">
// import module
import { Credit_payment_component } from './js/modules/form_components.js';
// initialize the class and call the method
console.log( new Credit_payment_component().get_class_defaults() );
</script>
Conversely, you can also access the Class defaults directly after initializing the class, and without the get_class_defaults() method:
<script type="module">
// import module
import { Credit_payment_component } from './js/modules/form_components.js';
// initialize the class and call the method
console.log( new Credit_payment_component().defaults );
</script>
get_generate_options()
Requires an object to be passed as an argument. The argument will override the default settings of the class, but ONLY in the scope of this method. This method is mainly provided for debugging purposes.
<script type="module">
// import module
import { Credit_payment_component } from './js/modules/form_components.js';
// initialize the class and pass your settings as an argument
let credit_payment_components = new Credit_payment_component();
let my_test_settings = {
id: 'my-cc-group'
};
// initialize the class and call the method
console.log( credit_payment_components.get_generate_options( my_test_settings ) );
</script>
generate()
Takes an optional argument expecting an object with class-specific properties/values. Any matching properties passed will override the default values. This method returns a node list of DOM element(s), configured according to the class defaults and any overridden settings.
<script type="module">
// import module
import { Credit_payment_component } from './js/modules/form_components.js';
// initialize the class and pass your settings as an argument
let credit_payment_components = new Credit_payment_component();
// set your desired settings for the component elements you're about to generate
let credit_payment_component_settings = {
id: 'my-cc-group'
};
// generate the component nodes to spec by passing your settings in
let credit_payment_component = credit_payment_components.generate( credit_payment_component_settings );
</script>