Stripe 키를 설정 파일에 추가하기

이전 Stripe 계정 설정하기 챕터에서 Stripe 콘솔에서 두 개의 키를 확인했습니다. 백엔드에서 사용한 Secret key와 Publishable key입니다. Publishable key는 프론트엔드에서 사용하기 위한 키입니다.

src/config.ts 파일에서 const config = { 줄 아래에 다음 줄을 추가하세요.

STRIPE_KEY: "<YOUR_STRIPE_PUBLIC_KEY>",

YOUR_STRIPE_PUBLIC_KEY를 Stripe 계정 설정하기 챕터에서 얻은 Publishable key로 바꾸는 것을 잊지 마세요.

이제 Stripe.js 패키지도 추가해 보겠습니다.

packages/frontend/ 디렉토리에서 다음 명령어를 실행하세요.

$ npm install @stripe/stripe-js

그리고 설정 페이지에서 Stripe 설정을 불러오겠습니다.

src/containers/Settings.tsx 파일에서 import 아래에 다음 코드를 추가하세요.

import { loadStripe } from "@stripe/stripe-js";

const stripePromise = loadStripe(config.STRIPE_KEY);

이 코드는 설정 페이지가 로드될 때 Stripe.js에서 Stripe 키를 사용해 Stripe 객체를 불러옵니다. 이 객체는 다음 챕터에서 사용할 예정입니다.

다음으로, 결제 폼을 만들어 보겠습니다.