Payments App & components

Getting Started

You can also see detailed docs and components through this storybook

Requirements

"node": ">=20"

"peerDependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

Installaion

npm install @sxungchxn/react-payments

yarn install @sxungchxn/react-payments

pnpm install @sxungchxn/react-payments

Setup

It is required to import style sheet before using app/components as below.

import '@sxungchxn/react-payments/styles'

...

import { ... } from '@sxungchxn/react-payments'

Usage

• Remember that setup step is required before usage.

/* Using payments app */
import { PaymentsApp } from '@sxungchxn/react-payments'

/* you can manage layout given payments-app by using basic props or passing stylesheet */
<PaymentsApp width="450px" height="100%" className="..." />


/* Using components */
import { Text, Flex } from '@sxungchxn/react-payments'

/* Using theme */
import { vars } from '@sxungchxn/react-payments'

/* get payments apps' card-list*/
import { usePaymentsCardInfo } from '@sxungchxn/react-payments'

/**
 *  typeof cardList = Array<CardState>
 */
const cardList = usePaymentsCardInfo() 

Tech stacks

• vanilla-extract : type-safe & zero run-time css
• xstate : implementing payments flow in intutive way
• storybook : component, payments app docs
• vite : easy & quick bundler tool