[Next] React에 Omise PG 연동하기

IamPort에 이어 Omise PG를 연결해야 했다. 

 

먼저 결제 페이지의 tsx 내부에 

  <Script type="text/javascript" src="https://cdn.omise.co/omise.js" />

omise를 사용하기 위한 script 코드를 넣어줬다. 프로젝트는 NextJS를 사용한 SSR 아키텍쳐였기에, next/script가 제공하는 Script 태그를 사용했다.

Checkout Button 클릭 시, 

 

const handleSubmit = useCallback(
    async (values) => {
      // @ts-ignore
      const OMISE = window.Omise
      // @ts-ignore
      const OMISE_CARD = window.OmiseCard

    
      try {
        const res = await postOrders(values)
 
          OMISE_CARD.configure({
            publicKey: res.omise.publicKey
          })
          OMISE_CARD.open({
            frameLabel: 'Reindeers',
            defaultPaymentMethod: 'credit_card',
            otherPaymentMethods: res.omise.otherPaymentMethods,
            locale: res.omise.locale,
            currency: res.omise.currency,
            amount: res.omise.amount,
            onCreateTokenSuccess: async (token) => {
              try {
                const omiseRes = await postOmisePayment({
                  orderSheetId: values.sheetId,
                  token: token,
                  returnUrl: `${process.env.NEXT_PUBLIC_BASE_URL}/mypage/purchase`
                })
                toast.success('Your purchase was successful!')
                replace(`/mypage/purchase/${omiseRes.orderId}`)
              } catch (e) {
                toast.error('payment failed.')
              }
            },
            onFormClosed: () => {
              toast.warn('Payment canceled.')
            }
          })
 
      } catch (e: any) {
        toast.error(e.data.message)
      }
    },
    [props.id]
  )

위 handleSubmit 함수가 실행된다. 

 

먼저 Script로 삽입해줬던 window객체의 Omise, Omise Card를 사용하기 위해 변수에 담아주었다. 

이후, API에 주문서 정보를 POST하고, 응답으로 내려온 publicKey를 Omise Card의 configure에 할당해준다. 

 

이후 Omise Card의 Open 메소드를 사용해주면, 

 

omise card

위와 같이 Omise Card가 열린다. 

 

정상적인 카드 정보가 받아지고, Pay 버튼을 누르면 Token이 생성된다. 

onCreateTokenSuccess 콜백함수에서는 정상적으로 Token이 받아와졌을 때의 로직을 작성하면 된다. 주문서 ID정보와 함께 토큰 값을 백엔드에 넘겨주었다. 

 

이후 결제 완료 로직을 작성해주면 된다.

 

onFormClosed 콜백함수에서는 Omise Card가 닫혔을때의 로직을 작성해주면 된다. 

 

local 또는 Dev에서 Test시 Card Number는 4242-4242-4242-4242다. 

디테일한 부분이나 사용법은 

https://www.omise.co/omise-js

Omise: Omise.js

 

Payments에 대한 테스트 부분은 

https://www.omise.co/api-testing

Omise: Testing

 

를 참고하면 된다.