@licuido-ui/ui_billing-payment NPM

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 akila@crayond.co

Link

Story Book Link EmptyPage

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_billing-payment

Import 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}
/>

section array represents a section with subTitle and items .
items array represents an input field with inputStyle , labelStyle ,label ,inputType and etc.(kindly refer props table)

Image

billingAndPayment

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.

@emotion/react @emotion/styled @mui/material @licuido-ui/ui_input-field @licuido-ui/ui_basic-button @licuido-ui/ui_dropdown @licuido-ui/ui_date-time-picker react react-dom

@licuido-ui/react

0.0.2

8 months ago