You can also see detailed docs and components through this storybook
"node": ">=20"
"peerDependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
npm install @sxungchxn/react-payments
yarn install @sxungchxn/react-payments
pnpm install @sxungchxn/react-payments
It is required to import style sheet before using app/components as below.
import '@sxungchxn/react-payments/styles'
...
import { ... } from '@sxungchxn/react-payments'
- 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()
-
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