Stripe

stripe

Stripe의 탄생 원인은 불평한 올라인 결제 시스템을 변경하기 위함에 있다. Pay-Pal과 비교를 통해 특징을 조금 더 살펴보자. PayPal과 Stripe은 오늘날의 회사에서 사용할 수있는 결제 처리 옵션 중에 가장 강력한 두 가지 옵션이라고 할 수 있다. 2010년 당시에는 PayPal은 혁신적인 온라인 결제이긴 했지만, 서비스 연동을 위해서는 최대 9단계까지 거쳐야하는 어려움이 있었다. stripe는 9단계를 3단계를 줄인 결제시스템으로 10년이 넘는 기간동안 빠른 성장을 이루었다고 할 수 있다. 그리고 최근 saas가 유행하면서 간편한 결제를 위해 stripe를 많이 찾기도 하고, 해외 결제를 위해 많이 찾기도 한다.

stripe process

1. 카드 정보를 확인한다.
   우선적으로 stripe는 카드의 formatted가 적절한지 확인을 한다. 우리가 온라인 결제를 위해 카드번호/유효기간/CVC 정보를 기입하는 부분이라고 생각하면 된다. 이 단계에서는 format만 확인할 뿐 카다 자체에 결제의 유효성은 확인 할 수 없다.

2. 고객 인증을 진행한다. (Customer authentication)
   이 부분은 각각의 은행해서 등록된 핸드폰번호로 인증번호를 전송해서 고객 인증을 진행하는 부분이다. 고객들은 받은 인증 번호를 등록을 하면 된다.

3. 권한 부여를 한다.(Authorization)
   위의 인증을 진행하면, 은행은 고객의 통장에 결제를 위한 금액이 있는지를 확인한다. 확인이 된다면, 결제를 보장하기 위해 금액을 holding한다.

4. 결제 완료

// Striep payment
   const stripePromise = loadStripe(
    process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!
  );
  const { data: session } = useSession();

  const handleCheckout = async () => {
    const stripe = await stripePromise;

    const response = await fetch("/api/checkout", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ items: productData, email: session?.user?.email }),
    });
    const checkoutSession = await response.json();

    // Redirecting user/customer to Stripe Checkout
    const result: any = await stripe?.redirectToCheckout({
      sessionId: checkoutSession.id,
    });
    if (result.error) {
      alert(result?.error.message);
    }
  };

결제 진행을 하기 위해 우선적으로 위와 같은 코드를 작성한후, 진행 중, 성공 ui 코드를 작성한다

결재가 완료되면 위와 같은 화면이 뜨고 초기화된다