Django3.2 | 35 | QRオーダーシステムの構築 | クレジットカードフォーム - 学生向けプログラミング入門

[34 | Stripeモデルの実装]　<<　[ホーム]　>>　[36 | 支払い処理実装]

「qrmenu_react」側の実装を行います。

まずはstripeをインストールします。
コマンド
npm install @stripe/react-stripe-js@1.4.0 @stripe/stripe-js@1.13.2 -s

「src/containers」フォルダに「PaymentForm.js」ファイルを新規作成します。
作成した「PaymentForm.js」を以下のように編集します。

38行目const stripePromise = loadStripe('ご自分のStripeIDを入力してください');にはご自分のStripeIDを入力してください。

新規作成　【QRMenu/qrmenu_react/src/containers/PaymentForm.js】

import React, {useContext, useState} from 'react';
import ReactDOM from 'react-dom';
import {loadStripe} from '@stripe/stripe-js';
import {
  CardElement,
  Elements,
  useStripe,
  useElements,
} from '@stripe/react-stripe-js';

import { Form, Button } from 'react-bootstrap';
import { toast } from 'react-toastify';
import { useParams } from 'react-router-dom';

const PaymentForm = () => {
    const [loading, setLoading] = useState(false);
    const stripe = useStripe();
    const elements = useElements();

    const onSubmit = async (event) => {
        event.preventDefault();
        const {error, paymentMethod} = await stripe.createPaymentMethod({
            type: 'card',
            card: elements.getElement(CardElement),
        });
    };

    return (
        <Form onSubmit={onSubmit}>
            <CardElement options={{ hidePostalCode: true }} />
            <Button variant="standard" className="mt-4" block type="submit" disabled={loading}>
                {loading ? "処理中..." : "支払い"}
            </Button>
        </Form>
    );
};

const stripePromise = loadStripe('ご自分のStripeIDを入力してください');

const StripeContext = (props) => (
  <Elements stripe={stripePromise}>
    <PaymentForm {...props} />
  </Elements>
);

export default StripeContext;

「src/components/ShoppingCart.js」ファイルを編集します。

記述編集　【Desktop/QRMenu/qrmenu_react/src/components/ShoppingCart.js】

import React, {useMemo } from 'react';
import { Card } from 'react-bootstrap';
import OperationButton from './OperationButton';
import { AiFillPlusCircle, AiFillMinusCircle } from 'react-icons/ai';
import PaymentForm from '../containers/PaymentForm';

const ShoppingCart = ({ items, onAdd, onRemove }) => {
    const totalPrice = useMemo(
        () => items.map((i) => i.quantity * i.price).reduce((a,b) => a+b, 0),
        [items]
    );

    return (
        <>
            <h3 className="text-center mb-4 mt-5">
                <b>注文内容</b>
            </h3>
            <Card>
                <Card.Body>
                    {items.map((item) => (
                        <div key={item.id} className="d-flex mb-4 align-items-center">
                            <div className="flex-grow-1">
                                <p className="mb-0">
                                    <b>{item.name}</b>
                                </p>
                                <span>{item.price}円</span>    
                            </div>

                            <div className="d-flex align-items-center">
                                <OperationButton
                                    variant="lightgray"
                                    size="sm"
                                    onClick={() => onRemove(item)}
                                >
                                    <AiFillMinusCircle size={25} color="red" />
                                </OperationButton>
                                <span>&nbsp;&nbsp;{item.quantity}</span>
                                <OperationButton
                                    variant="lightgray"
                                    size="sm"
                                    onClick={() => onAdd(item)}
                                >
                                    <AiFillPlusCircle size={25} color="blue" />
                                </OperationButton>
                            </div>
                        </div>
                    ))}

                    <hr/>
                    <div className="d-flex justify-content-between">
                        <h6><b>合計金額</b></h6>
                        <h5><b>{totalPrice.toLocaleString()}円</b></h5>
                    </div>

                    <hr className="mb-4"/>
                    <PaymentForm />

                </Card.Body>
            </Card>
        
        
        </>
    );
}

export default ShoppingCart;

「src/index.css」ファイルに記述を追加します。

記述追加　【QRMenu/qrmenu_react/src/index.css】33行目〜

body {
  background-color: #f2f2f2;
}

* {
  font-family: "Kosugi Maru", sans-serif;
}

.btn-standard {
  background-color: #ff3366;
  color: white;
  width: 100%;
}

.btn-standard:hover {
  background-color: #fc285d;
  color: white;
}

.form {
  width: 100%;
  margin-top: 5rem;
}

.form-label {
  font-size: 0.8rem;
}

.form-title {
  font-size: 1.3rem;
}

.StripeElement {
  height: 38px;
  padding: 10px 12px;
  width: 100%;
  color: #32325d;
  background-color: white;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

.StripeElement--focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}