Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mdbootstrap/react-payment-forms

Responsive React Payment Forms built with the latest Bootstrap 5. Credit card, PayPal, Stripe, eCommerce checkout, multi-step payment, donation form & more examples. https://mdbootstrap.com/docs/react/extended/payment-forms/
https://github.com/mdbootstrap/react-payment-forms

bootstrap bootstrap-template bootstrap-theme bootstrap5 css forms html js payment react template

Last synced: about 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/mdbootstrap/react-payment-forms
Owner: mdbootstrap
License: other
Created: 2022-08-23T11:07:16.000Z (over 2 years ago)
Default Branch: master
Last Pushed: 2022-08-23T12:44:23.000Z (over 2 years ago)
Last Synced: 2024-11-15T06:51:22.596Z (2 months ago)
Topics: bootstrap, bootstrap-template, bootstrap-theme, bootstrap5, css, forms, html, js, payment, react, template
Language: JavaScript
Homepage:
Size: 273 KB
Stars: 4
Watchers: 5
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: License.pdf

Awesome Lists containing this project

README

![MDB Logo](https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-react.png)

# MDB React 5

Responsive React Payment Forms built with the latest Bootstrap 5. Credit card, PayPal, Stripe, eCommerce checkout, multi-step payment, donation form & more examples.

Check out [React Payment Forms Documentation](https://mdbootstrap.com/docs/react/extended/payment-forms) for detailed instructions & even more examples.

## Basic example
![React Payment Forms Basic example](https://user-images.githubusercontent.com/108793661/186144545-d666f0eb-7ebf-4629-a945-f48cb9f1344e.png)
```js
import React from "react";
import {
MDBContainer,
MDBCol,
MDBRow,
MDBBtnGroup,
MDBBtn,
} from "mdb-react-ui-kit";

export default function App() {
return (

Eligible

Pay

Cancel and return to the website

$85.00

Diabites Pump & Supplies

Insurance Responsibility

$71.76

Add Insurer card

Insurance claim and all neccessary dependencies will be submitted
to your insurer for the covered portion of this order.

Aetna - Open Access
Aetna - OAP

Patient Balance

$13.24

Add Payment card

Insurance claim and all neccessary dependencies will be submitted
to your insurer for the covered portion of this order.

VISA
**** 5436

MASTER CARD
**** 5038

Proceed to payment

Order Recap

contracted Price $186.86

Amount Deductible $0.0

Coinsurance(0%) + $0.0

Copayment + 40.00

Total Deductible,

Coinsurance and copay

$40.00

Maximum out-of-pocket

on insurance policy

$40.00

Insurance Responsibility $71.76

Patient Balance $13.24

Total $85.00

);
}
```

## How to use?

1. Download MDB 5 - FREE REACT UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)

## More examples (click on the image to see a live demo)
### Ecommerce checkout page:
[![React Payment Forms #1](https://user-images.githubusercontent.com/108793661/186144771-ab3f161b-ca20-4fb8-b6f3-81092d539491.png)](https://mdbootstrap.com/docs/react/extended/payment-forms#section-2)

### Payment card / Donation form:
[![React Payment Forms #2](https://user-images.githubusercontent.com/108793661/186144944-6dce034b-0312-43a0-9eeb-3d13b83a5d4c.png)](https://mdbootstrap.com/docs/react/extended/payment-forms#section-3)

### Pricing plan with credit card payment details:
[![React Payment Forms #3](https://user-images.githubusercontent.com/108793661/186145119-86582e33-597c-4c00-a63c-bc443c829068.png)](https://mdbootstrap.com/docs/react/extended/payment-forms#section-4)

You can find other examples [here](https://mdbootstrap.com/docs/react/extended/payment-forms).

## More extended React documentation