@licuido-ui/ui_billing-payment
v0.0.2
Published
The BillingAndPayment component is designed to provide a user interface for entering billing and payment details. It consists of sections with various input fields like credit/debit card information, billing details, etc.
Readme
BillingAndPayment
The BillingAndPayment component is designed to provide a user interface for entering billing and payment details. It consists of sections with various input fields like credit/debit card information, billing details, etc.
Author
- @author Akila K [email protected]
Link
PlayGround
Installation
npm i @licuido-ui/ui_billing-paymentImport component
import { BillingAndPayment } from '@licuido-ui/ui_billing-payment';Usage
<BillingAndPayment
title='Secure Payment'
description='Please provide the following details for payment processing:'
section={[
{
subTitle: 'Card Details',
items: [
{
breakpoints: {
sm: 8,
md: 8,
lg: 8,
xs: 6,
},
label: 'Credit /debit card Number',
cardImage: true,
fullWidth: true,
inputType: 'input',
type: 'text',
value: '',
maxNumber: 19,
errorMessage: 'please Enter card Number',
required: true,
validationType: 'cardNumber',
},
{
breakpoints: {
sm: 4,
md: 4,
lg: 4,
xs: 6,
},
label: 'Account holder Name',
fullWidth: true,
inputType: 'input',
value: '',
errorMessage: 'please Enter Name',
required: true,
},
{
breakpoints: {
sm: 4,
md: 5,
lg: 4,
xs: 6,
},
label: 'Month / Year',
fullWidth: true,
inputType: 'date',
dateFormat: 'MM-YYYY',
value: '',
error: false,
errorMessage: 'please select any value',
required: true,
},
{
breakpoints: {
sm: 4,
md: 3,
lg: 4,
xs: 6,
},
label: 'Cvv',
fullWidth: true,
inputType: 'input',
value: '',
maxNumber: 3,
errorMessage: 'please Enter Valid Cvv',
type: 'number',
required: true,
},
],
},
{
subTitle: 'Billing Details',
items: [
{
breakpoints: {
sm: 6,
md: 6,
lg: 6,
xs: 6,
},
label: 'First Name',
inputType: 'input',
value: '',
fullWidth: true,
errorMessage: 'Please enter First Name',
},
{
breakpoints: {
sm: 6,
md: 6,
lg: 6,
xs: 6,
},
label: 'Last Name',
inputType: 'input',
value: '',
fullWidth: true,
errorMessage: 'Please enter Last Name',
},
{
breakpoints: {
sm: 6,
md: 6,
lg: 6,
xs: 6,
},
label: 'Address Line 1',
inputType: 'input',
value: '',
fullWidth: true,
errorMessage: 'Please enter Address',
},
{
breakpoints: {
sm: 6,
md: 6,
lg: 6,
xs: 6,
},
label: 'Address Line 2',
inputType: 'input',
value: '',
fullWidth: true,
errorMessage: 'Please enter Address',
},
{
breakpoints: {
sm: 6,
md: 6,
lg: 6,
xs: 6,
},
label: 'City',
inputType: 'dropdown',
fullWidth: true,
selectOption: [{ label: 'chennai', value: 'chennai' }],
value: '',
errorMessage: 'Please select a value',
},
{
breakpoints: {
sm: 6,
md: 6,
lg: 6,
xs: 6,
},
label: 'Zip code/ Postal code',
fullWidth: true,
type: 'number',
value: '',
inputType: 'input',
errorMessage: 'Please enter Zip code/ Postal code',
},
{
breakpoints: {
sm: 6,
md: 6,
lg: 6,
xs: 6,
},
label: 'State',
inputType: 'dropdown',
fullWidth: true,
value: '',
selectOption: [{ label: 'New York', value: 'New York' }],
errorMessage: 'Please select a value',
},
{
breakpoints: {
sm: 6,
md: 6,
lg: 6,
xs: 6,
},
label: 'Country',
inputType: 'dropdown',
fullWidth: true,
value: '',
selectOption: [
{ label: 'US', value: 'US' },
{ label: 'IN', value: 'US' },
],
errorMessage: 'Please select a value',
},
],
},
],}
buttons={actionButtons}
/>sectionarray represents a section withsubTitleanditems.itemsarray represents an input field withinputStyle,labelStyle,label,inputTypeand etc.(kindly refer props table)
Image
Props
| Prop | Type | Default | Description |
| ---------------------- | ------ | --------------------------------------- | -------------------------------------------------------------------------------------- |
| title | string | 'Payment' | The main title of the billing and payment section. |
| description | string | 'Please provide the following details:' | A brief description of the purpose of entering billing and payment details. |
| section | array | See example below | An array of objects representing different sections within the component. |
| buttons | array | [] | An array of button configurations for different actions associated with the component. |
| className | string | '' | Custom class name for the root element of the component. |
| sx | object | {} | Custom style prop using MUI's styling system. |
| gridContainerProps | object | {} | Additional props for the Grid component that wraps input fields. |
| titleStyle | object | {} | Custom styles for the title element. |
| descStyle | object | {} | Custom styles for the description element. |
| subTitleStyle | object | {} | Custom styles for the subtitle element. |
| rootStyle | object | {} | Custom styles for the root element of the component. |
| buttonContainerStyle | object | {} | Custom styles for the container of action buttons. |
Each object within the section array represents a section with the following props:
| Prop | Type | Default | Description |
| ---------- | ------ | ------- | ---------------------------------------------------------- |
| subTitle | string | '' | The subtitle for the section. |
| items | array | [] | An array of input field configurations within the section. |
Each object within the items array represents an input field with the following props:
| Prop | Type | Default | Description |
| ---------------- | ------------- | --------- | -------------------------------------------------------------------------------------- |
| inputType | string | 'input' | Type of input: 'dropdown', 'date', or 'input'. |
| label | string | '' | Label for the input field. |
| labelStyle | object | {} | Custom styles for the label element. |
| inputStyle | object | {} | Custom styles for the input element. |
| selectOption | array | [] | An array of objects for dropdown options (only for 'dropdown' inputType). |
| value | string/number | '' | Initial value for the input field. |
| error | boolean | false | Whether the input field has an error. |
| placeholder | string | '' | Placeholder text for the input field. |
| onChange | function | () => {} | Event handler for input change. |
| errorMessage | string | '' | Error message to display on validation failure. |
| required | boolean | false | Whether the input is required. |
| breakpoints | object | {} | Custom breakpoints for the input field layout within a section. |
| fullWidth | boolean | false | Whether the input field should take full width. |
| endAdornment | node | null | JSX node to place at the end of the input field. |
| type | string | 'text' | Type of input: 'number' or 'text'. |
| dateType | string | 'date' | Type of date input: 'date' or 'dateAndTime' (only for 'date' inputType). |
| maxNumber | number/string | undefined | Maximum number of characters for input (only for 'input' inputType). |
| dateFormat | string | 'MM/yyyy' | Format of the date to display (only for 'date' inputType with 'dateAndTime' dateType). |
| cardImage | boolean | false | Whether to display the card image (only for card number input). |
| validationType | string | 'text' | Validation type: 'cardNumber', 'cvv', 'text', or 'postalCode'. |
Each object within the buttons array represents an action button with the following props:
| Prop | Type | Default | Description |
| ------------- | -------- | -------- | ------------------------------------------------ |
| buttonText | string | '' | Text to display on the action button. |
| onClick | function | () => {} | Event handler for button click. |
| styles | object | {} | Custom styles for the action button. |
| breakpoints | object | {} | Custom breakpoints for the action button layout. |