REACT MATERIAL-UI STRIPE PAYMENT FORM

All those libraries put together in a nice interface easy to use and implement.

Installation

// with gitlab
git clone https://gitlab.com/angeloron/react-material-ui-stripe-payment-form

// with github
git clone https://github.com/angeloron/react-material-ui-stripe-payment-form.git

Examples

A live demo is available here.

Documentation

Find a detailed documentation here

Usage

Change Icons

You can change the icons in /src/Components/Views/StepperIcons.js. You'll find the list of icons available at Material-UI.

Add or Remove steps

To adjust the number of steps go to /src/Components/Views/Stepper.js. There you'll find a function call StepContent with the list of Forms being used:

This application uses React Hooks, including useContext to keep track of the data entered in the form.

Therefore if you modify the fields you'll have to adjust the initial state in the reducer available at /src/Components/StateContext/reducer.js

Setup Stripe

You simply need to save your Stripe keys in /public/keys.php.

In that example I only enabled credit card payments but you can of course add other type of payments by either editing the payment form or adding a step/form by following the step above.

const StepContent = ({ step }) => {
    switch (step) {
        case 0:
            return <ContactForm />;
        case 1:
            return <ServiceForm />;
        case 2:
            return <PaymentForm />;
        default:
            return <></>;
    }
}

Make sure to adjust the loop in the Stepper function as well:

//Change the number of loops by adjusting the array here
{[1, 2, 3].map(e => (
    <Step key={e}>
        <StepLabel StepIconComponent={StepperIcons} />
    </Step>
))}

Change the theme

To change the theme color, font, etc. go to /src/Components/constants/theme.js

Questions

For how-to questions and other non-issues, please use StackOverflow instead of Github issues or contact me personaly via my website.

License

This project is licensed under the terms of the MIT license.