React와 Stripe 결제 통합

최근에 온라인 결제 시스템의 프론트엔드 측면을 구현했는데 놀랍게도 생각보다 복잡하지 않았습니다. Stripe이 대부분을 처리했다고 고백합니다.

포르텐드 사이드
따라서 React 앱을 만들고 필요한 종속성을 설치해 보겠습니다.

// in a terminal
npx create-react-app react-stripe
cd react-stripe
yarn add @stripe/stripe-js @stripe/react-stripe-js axios

다음으로 Stripe를 프로젝트에 통합하는 데 사용할 게시 가능한 키를 얻기 위해 Stripe account을 만들어야 합니다.

참고: Stripe에는 개발을 위한 테스트 모드와 프로덕션을 위한 라이브 모드의 두 가지 모드가 있습니다. 각 모드에는 비밀 키와 게시 가능한 키가 있습니다. 비밀 키는 백엔드 코드용이며 항상 비공개여야 합니다. 게시 가능한 것은 프론트엔드 코드용이며 비밀 코드만큼 신성하지 않습니다.

이제 Stripe를 구성하려면 loadStripe 에서 @stripe/stripe-js , Elements 에서 @stripe/react-stripe-js , PaymentForm 가 필요합니다.

// App.js
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";
import PaymentForm from "./PaymentForm"; // not implemented yet

// when you toggle to live mode, you should add the live publishale key.
const stripePromise = loadStripe(STRIPE_PK_TEST);

function App() {
  return (
    <div className="App">
      {/* Elements is the provider that lets us access the Stripe object. 
         It takes the promise that is returned from loadStripe*/}
      <Elements stripe={stripePromise}>
        <PaymentForm /> 
      </Elements>
    </div>
  );
}

export default App;

가장 간단한 형태로 PaymentForm는 다음과 같을 수 있습니다.

// PaymentForm.js
import { CardElement } from "@stripe/react-stripe-js";
import axios from "axios";

const PaymentForm = () => {

  const handleSubmit = async (e) => {
    e.preventDefault();
    // stripe code here
  };
  return (
    <form onSubmit={handleSubmit}>
      <CardElement />
      <button>BUY</button>
    </form>
  );
};

export default PaymentForm;

이제 Stripe를 사용하여 양식을 제출해야 합니다.

//PaymentForm.js
import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js";
import axios from "axios";

const PaymentForm = () => {
  const stripe = useStripe();
  const elements = useElements();
  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!stripe || !elements) {
      // Stripe.js has not loaded yet. Make sure to disable
      // form submission until Stripe.js has loaded.
      return;
    }
    // Get a reference to a mounted CardElement. Elements knows how
    // to find your CardElement because there can only ever be one of
    // each type of element.
    const cardElement = elements.getElement(CardElement);

    // use stripe.createToken to get a unique token for the card
    const { error, token } = await stripe.createToken(cardElement);

    if (!error) {
      // Backend is not implemented yet, but once there isn’t any errors,
      // you can pass the token and payment data to the backend to complete
      // the charge
      axios
        .post("http://localhost:5000/api/stripe/charge", {
          token: token.id,
          currency: "EGP",
          price: 1000, // or 10 pounds (10*100). Stripe charges with the smallest price unit allowed
        })
        .then((resp) => {
          alert("Your payment was successful");
        })
        .catch((err) => {
          console.log(err);
        });
    } else {
      console.log(error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <CardElement />
      <button>PAY</button>
    </form>
  );
};

export default PaymentForm;

참고: 여기서 <CardElement/>를 사용했지만 <CardNumberElement/> , <CardExpiryElement/> 및 <CardCvcElement/>를 사용한 다음 elements.getElement(CardNumberElement)를 사용하여 카드 번호 요소에 액세스할 수 있습니다.

백엔드 측
백엔드의 경우 Stripe는 많은 언어를 지원하지만 여기서는 Node.js를 사용합니다.

React 코드를 client 안의 stripe-react 디렉토리로 이동합니다. yarn init를 실행하여 외부 디렉터리가 백엔드 코드에 대해 package.json를 가질 수 있도록 한 다음 server.js 를 생성합니다.

프로젝트 디렉토리는 다음과 같아야 합니다.

반응 스트라이프

클라이언트(모든 React 파일 보유).

.gitignore

package.json

server.js

yarn.lock

백엔드에 필요한 종속성을 설치합니다.

 yarn add express stripe dotenv cors
 yarn add --dev concurrently nodmon

외부에 추가package.json:

  "scripts": {
    "client": "cd client && yarn start",
    "server": "nodemon server.js",
    "start": "node server.js",
    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
  },

이제 server.js 에서 FE에서 지불 데이터와 Stripe 토큰을 수신하여 청구를 완료할 포스트 API/경로를 생성하십시오.

require("dotenv").config();
const express = require("express");
const app = express();
const cors = require("cors");

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cors());

const PORT = process.env.PORT || 5000;

const stripe = require("stripe")(env.process.STRIPE_SECRET_KEY_TEST);

// same api we used in the frondend
app.post("/api/stripe/charge", async (req, resp) => {
  const { token, currency, price } = req.body;
  const charge = await stripe.charges.create({
    amount: price,
    currency,
    source: token,
  });

  if (!charge) throw new Error("charge unsuccessful");
});

app.listen(PORT, () => {
  console.log(`Server running on port: ${PORT}`);
});

마지막으로 yarn dev를 실행하고 these test cards 중 하나를 사용하여 통합을 테스트합니다.
Stripe 대시보드의 결제 아래에 모든 결제가 표시되어야 합니다.

참조:
Stripe docs .
Stripe charges .
A more detailed tutorial