@brandingbrand/fscheckout
    TypeScript icon, indicating that this package has built-in type declarations

    11.1.0 • Public • Published

    FSCheckout

    Problems to solve

    • Generally, checkout flows have similar features like state management and step trackers so we shouldn't reinvent the wheel.
    • Checkout is complicated so we don't want 10 projects with 10 different code structures to manage.
    • Despite some similarities, many checkouts have unique features so we don't want an inflexible library that makes it hard to customize.

    Goal

    • Create a way to standardize the checkout structure.
    • Make common functionalities reusable.
    • Make it flexible for customization.

    How

    • Project checkout has to built with FSCheckout component.
    • Leverage TypeScript to force a standardized code structure for:
      • how steps are structured
      • how checkout state and data are managed
      • how api request is made
      • how step progress is managed
    • Each step must be separated into its own component and passed to FSCheckout as props with their name and status.
    • Step Component must be StatelessComponent, and all the states have to go into the main Checkout component as a single state.
    • checkoutState and checkoutActions are required to pass to FSCheckout for defining checkout state and actions
    • Step progress is managed internally in FSCheckout, and reference function is provided to perform arbitrary step jump.
    • step changing hook is provided to do stuff like analtyics
    • A global loading view is provided to mask user interaction. It can be overridden with a custom render.
    • Built in a step tracker. It's customizable with style props and can be overridden with a custom render.

    Keywords

    none

    Install

    npm i @brandingbrand/fscheckout

    DownloadsWeekly Downloads

    223

    Version

    11.1.0

    License

    MIT

    Unpacked Size

    108 kB

    Total Files

    29

    Last publish

    Collaborators

    • prashanth_kaduluri
    • akilar
    • brenont
    • manu-grondona
    • aarontjdev
    • philtompkins
    • ray.wu
    • mjmangus16
    • its.hui3
    • maksymdeminbbc
    • amandaphail-bb
    • jon.ploucha
    • markwissler
    • nathan-sankbeil
    • henry.saintjuste
    • clapton
    • swhite2
    • coughdrop
    • raghunandanp
    • roanblanchard
    • angelotrif
    • chrisjlan89branding
    • branderbrett
    • skyeckstrom
    • nickburkhartbb
    • bbtravis
    • laineh
    • deemaabdallah
    • chukohsin
    • msiauko
    • evan.katz
    • tuckerbrander
    • davidwachlin.bb
    • jasonmosleybb
    • dshadrick
    • nickbb
    • notajvento
    • andyschwob
    • brad.habenicht
    • rosahbruno
    • xero
    • mike.lux
    • caleb.griffith
    • tim.matyas
    • olksns
    • varzamanbb
    • bb_jenkins
    • crherman7
    • anna.larionova
    • olexandor
    • bodrus
    • cboetto
    • huizhuz
    • danrudolf2
    • celuchnb
    • abhishek_npm
    • lhenze33
    • romaniukua
    • tboetto
    • erichfeinstein
    • sjotterman
    • zrispo
    • omarkoueifi
    • danish.khalid
    • devs9-core
    • alex-black112
    • nasliedkov
    • wsedlacekc
    • john-marcello
    • dman01989
    • bhushan.kini
    • vyy7gn8j297flmyqgsmb
    • beaukenny
    • edelgado20
    • brandonacb
    • seanirby
    • sauceknight
    • ckornell
    • jmwr
    • mjweb48
    • winescout
    • southpeter
    • gametack
    • bryan-boeing
    • dmitriy_pchela
    • thepinkhatdev
    • a4heng
    • bbksmith
    • ashleygerst
    • gregwinn
    • clockelliptic
    • nevidomskii
    • jcsison
    • freesco16
    • jamesgraham2595
    • scbb31994
    • andrey_ionel
    • christianlovern
    • elad.karni