결제 폼 연결하기

이제 결제 폼을 결제 API에 연결하는 작업만 남았습니다.

Change indicator src/containers/Settings.tsx 파일의 return 문을 다음 코드로 교체하세요.

const handleFormSubmit: BillingFormType["onSubmit"] = async (
  storage,
  info
) => {
  if (info.error) {
    onError(info.error);
    return;
  }

  setIsLoading(true);

  try {
    await billUser({
      storage,
      source: info.token?.id,
    });

    alert("카드 결제가 성공적으로 완료되었습니다!");
    nav("/");
  } catch (e) {
    onError(e);
    setIsLoading(false);
  }
};

return (
  <div className="Settings">
    <Elements
      stripe={stripePromise}
      options={{
        fonts: [
          {
            cssSrc:
              "https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800",
          },
        ],
      }}
    >
      <BillingForm isLoading={isLoading} onSubmit={handleFormSubmit} />
    </Elements>
  </div>
);

Change indicator 파일 상단에 다음 import 문을 추가하세요.

import { Elements } from "@stripe/react-stripe-js";
import { BillingForm, BillingFormType } from "../components/BillingForm";
import "./Settings.css";

이전에 생성한 BillingForm 컴포넌트를 추가하고, 이전 장에서 참조한 isLoading과 onSubmit prop을 전달합니다. handleFormSubmit 메서드에서는 Stripe 메서드가 에러를 반환했는지 확인합니다. 문제가 없으면 결제 API를 호출하고, 사용자에게 알림을 보낸 후 홈페이지로 리디렉션합니다.

Stripe Elements를 초기화하기 위해 이전 장에서 로드한 Stripe.js 객체를 전달합니다. 이 Elements 컴포넌트는 모든 Stripe React 컴포넌트를 감싸야 합니다.

Stripe elements는 IFrame 내부에 로드됩니다. 따라서 커스텀 폰트를 사용하는 경우 명시적으로 포함해야 합니다. Stripe 문서에서 설명한 내용입니다.

마지막으로 설정 페이지 전체에 대한 스타일을 처리해 보겠습니다.

Change indicator src/containers/Settings.css 파일을 생성하고 다음 내용을 추가하세요.

@media all and (min-width: 480px) {
  .Settings {
    padding: 60px 0;
  }

  .Settings form {
    margin: 0 auto;
    max-width: 480px;
  }
}

이렇게 하면 폼이 큰 화면에서 올바르게 표시됩니다.

결제 폼이 포함된 설정 화면 스크린샷

이제 Stripe 폼을 테스트할 준비가 되었습니다. 브라우저에서 저장할 노트 수를 선택하고 다음 카드 정보를 사용해 보세요.

Stripe 테스트 카드 번호: 4242 4242 4242 4242
유효한 만료일, 보안 코드, 우편번호를 입력하세요.
이름은 아무거나 설정해도 됩니다.

Stripe 테스트 카드에 대한 자세한 내용은 Stripe API 문서에서 확인할 수 있습니다.

모든 설정이 올바르게 되어 있다면 성공 메시지가 표시되고 홈페이지로 리디렉션될 것입니다.

결제 성공 화면 스크린샷

이제 앱이 거의 완성되었으므로, 로그인이 필요한 페이지를 보호하는 방법을 살펴보겠습니다. 현재 로그아웃 상태에서 노트 페이지를 방문하면 보기 흉한 에러가 발생합니다.

로그아웃 상태에서 노트 페이지 에러 스크린샷

대신 로그인 페이지로 리디렉션하고, 로그인 후 다시 해당 페이지로 돌아오도록 하고 싶습니다. 다음 장에서 이를 구현하는 방법을 살펴보겠습니다.

결제 폼 연결하기

SST Guide