Build a React.js Stripe & Paypal Credit Card Payment Form Using react-credit-cards in JSX

App.jsx

import React, { useState } from "react";
import Cards from "react-credit-cards";

import "react-credit-cards/es/styles-compiled.css";
import { Form, Button, Container, Row, Col } from "react-bootstrap";

import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  const [formData, setFormData] = useState({
    cvc: "",
    expiry: "",
    focus: "",
    name: "",
    number: "",
  });

  const handleInputFocus = (e) => {
    setFormData((prevData) => ({
      ...prevData,
      focus: e.target.name,
    }));
  };

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  };

  return (
    <Container className="mt-5">
      <Row className="justify-content-center">
        <Col md={6} sm={12}>
          <div className="mb-4">
            <Cards
              cvc={formData.cvc}
              expiry={formData.expiry}
              focused={formData.focus}
              name={formData.name}
              number={formData.number}
            />
          </div>

          <Form>
            <Form.Group className="mb-3">
              <Form.Control
                type="tel"
                name="number"
                placeholder="Card Number"
                value={formData.number}
                onChange={handleInputChange}
                onFocus={handleInputFocus}
              />
            </Form.Group>

            <Form.Group controlId="formName" className="mb-3">
              <Form.Control
                type="text"
                name="name"
                placeholder="Name"
                value={formData.name}
                onChange={handleInputChange}
                onFocus={handleInputFocus}
              />
            </Form.Group>

            <Row>
              <Col md={6}>
                <Form.Group controlId="formExpiry" className="mb-3">
                  <Form.Control
                    type="text"
                    name="expiry"
                    placeholder="MM/YY"
                    value={formData.expiry}
                    onChange={handleInputChange}
                    onFocus={handleInputFocus}
                  />
                </Form.Group>
              </Col>
              <Col md={6}>
                <Form.Group controlId="formCVC" className="mb-3">
                  <Form.Control
                    type="tel"
                    name="cvc"
                    placeholder="CVC"
                    value={formData.cvc}
                    onChange={handleInputChange}
                    onFocus={handleInputFocus}
                  />
                </Form.Group>
              </Col>
            </Row>

            <Button variant="primary" type="submit" className="w-100">
              Submit Payment
            </Button>
          </Form>
        </Col>
      </Row>
    </Container>
  );
}

export default App;

100

101

102

103

104

105

106

107

import React, { useState } from "react";

import Cards from "react-credit-cards";

import "react-credit-cards/es/styles-compiled.css";

import { Form, Button, Container, Row, Col } from "react-bootstrap";

import "bootstrap/dist/css/bootstrap.min.css";

function App() {

const [formData, setFormData] = useState({

cvc: "",

expiry: "",

focus: "",

name: "",

number: "",

});

const handleInputFocus = (e) => {

setFormData((prevData) => ({

...prevData,

focus: e.target.name,

}));

};

const handleInputChange = (e) => {

const { name, value } = e.target;

setFormData((prevData) => ({

...prevData,

[name]: value,

}));

};

return (

<Cards

cvc={formData.cvc}

expiry={formData.expiry}

focused={formData.focus}

name={formData.name}

number={formData.number}

</div>

<Form>

<Form.Group className="mb-3">

<Form.Control

type="tel"

name="number"

placeholder="Card Number"

value={formData.number}

onChange={handleInputChange}

onFocus={handleInputFocus}

</Form.Group>

<Form.Group controlId="formName" className="mb-3">

<Form.Control

type="text"

name="name"

placeholder="Name"

value={formData.name}

onChange={handleInputChange}

onFocus={handleInputFocus}

</Form.Group>

<Row>

<Form.Group controlId="formExpiry" className="mb-3">

<Form.Control

type="text"

name="expiry"

placeholder="MM/YY"

value={formData.expiry}

onChange={handleInputChange}

onFocus={handleInputFocus}

</Form.Group>

</Col>

<Form.Group controlId="formCVC" className="mb-3">

<Form.Control

type="tel"

name="cvc"

placeholder="CVC"

value={formData.cvc}

onChange={handleInputChange}

onFocus={handleInputFocus}

</Form.Group>

</Col>

</Row>

Submit Payment

</Button>

</Form>

</Col>

</Row>

</Container>

);

}

export default App;

Build a React.js Stripe & Paypal Credit Card Payment Form Using react-credit-cards in JSX

Comments

Leave a Reply Cancel reply

Archives