• ref: https://cookiepayments.com/main
  우리 회사는 국내결제의 경우 pay2pay api를 이용하여 결제기능을 구현하였다.

지금도 물론 계속 사용가능하긴한데 현재 랜딩페이지 진행중에 결제기능이 추가돼서

새롭게 구축하는김에 아예 쿠키페이로 변경하여 구축하기로했다.

쿠키페이 사용설명서

• ref: https://cookiepayments.com/docs/manual

왜 pay2pay?(쿠키페이?)

국내 pg사의 경우 실물이 없는경우 사기의 가능성이 농후하여(사기꾼의 나라)
처리하기 힘들어서? 잘 처리 안해준다고 하는데 pay2pay는 지원한다고 한다.
그래서 pg사를 pay2pay의 쿠키페이로 결정함

• pay2pay ref: https://www.pay2pay.co.kr/
• 쿠키페이 ref: https://www.cookiepayments.com/main

React에서 cookiepayments 사용법

• documents ref: https://www.cookiepayments.com/docs/manual

preview

1. fontend에서 쿠키페이먼츠를 위한 외부 스크립트(jquery, cookiepayments javascript코드)를 다운받는다.
2. 외부스크립트를 다운받고 frontend에서 결제 모듈로 넘겨주기 위한 parameter들을 추려서 넘겨준다.(doc에 넘겨줘야하는 params의 목록이 정리돼있다)
3. 이때 결제 모듈은 return URL로 front에서 넘겨준 params중 일부를 post방식으로 backend로 넘겨 주게 돼있는데, 해당 url로 endpoint를 잡아서 결제 후처리 작업(결제와 관련된 서비스 DB 조작 등..)을 진행한다.

1.jquery와 cookiepayments api 다운받기

• customHook을 사용하여 cookiepayments사용에 필요한
  외부 스크립트를 다운받고 상태관리를 한다.

- 외부 스크립트를 다운받는 customHook

// useScript.jsx
import { useState, useEffect } from 'react'

function useScript(src) {
  // Keep track of script status ("idle", "loading", "ready", "error")
  const [status, setStatus] = useState(src ? 'loading' : 'idle')

  useEffect(
    () => {
      // Allow falsy src value if waiting on other data needed for
      // constructing the script URL passed to this hook.
      if (!src) {
        setStatus('idle')
        return
      }

      // Fetch existing script element by src
      // It may have been added by another intance of this hook
      let script = document.querySelector(`script[src="${src}"]`)

      if (!script) {
        // Create script
        script = document.createElement('script')
        script.src = src
        script.async = true
        script.setAttribute('data-status', 'loading')
        // Add script to document body
        document.body.appendChild(script)

        // Store status in attribute on script
        // This can be read by other instances of this hook
        const setAttributeFromEvent = event => {
          script.setAttribute(
            'data-status',
            event.type === 'load' ? 'ready' : 'error',
          )
        }

        script.addEventListener('load', setAttributeFromEvent)
        script.addEventListener('error', setAttributeFromEvent)
      } else {
        // Grab existing script status from attribute and set to state.
        setStatus(script.getAttribute('data-status'))
      }

      // Script event handler to update status in state
      // Note: Even if the script already exists we still need to add
      // event handlers to update the state for *this* hook instance.
      const setStateFromEvent = event => {
        setStatus(event.type === 'load' ? 'ready' : 'error')
      }

      // Add event listeners
      script.addEventListener('load', setStateFromEvent)
      script.addEventListener('error', setStateFromEvent)

      // Remove event listeners on cleanup
      return () => {
        if (script) {
          script.removeEventListener('load', setStateFromEvent)
          script.removeEventListener('error', setStateFromEvent)
        }
      }
    },
    [src], // Only re-run effect if script src changes
  )

  return status
}

export { useScript }

- useScript사용법

// 외부 라이브러리 다운을 위한 useScript 사용방법
// 각각의 status가 ready상태이면 외부 script 다운완료 상태.
const cookiePaymentsStatus = useScript(
    'https://cookiepayments.com/js/cookiepayments-1.1.2.js',
  )
const jqueryStatus = useScript('https://code.jquery.com/jquery-1.12.4.min.js')

...
...

// 각status 사용하는 예시
<button
  disabled={
    cookiePaymentsStatus !== 'ready' ||
    jqueryStatus !== 'ready'
  }
  >
  결제하기
</button>
>
...
...

// 다운이 완료된 script는 window에 기록된다
// 예를들면 외분script함수의 이름이 cookiepayments인 경우
// window.cookiepayments()로 사용한다.

다운받은 cookiepayments api를 사용하는 방법

const cookiepaymentsParams = {
  ORDERNO: createCookiePaymentsOrderNumber(), //주문번호 필수
  PRODUCTNAME: goodsOption.product, // 0: basic, 1:premium, 2:business
  AMOUNT: goodsOption.price, //결제 금액 필수
  BUYERNAME: userInfo?.userName, //고객명 필수
  BUYEREMAIL: userInfo?.email, //고객 이메일 필수
  PAYMETHOD: 'CARD', //결제 수단 선택 default :CARD
  PRODUCTCODE: location.state.index, //상품코드 선택
  BUYERID: userInfo?.userId, //고객 아이디 선택
  BUYERADDRESS: 'The address is unnecessary.', //고객 주소 선택
  BUYERPHONE: userInfo?.telNo, //고객 휴대폰 선택, 단 웰컴페이 시 필수 값
  RETURNURL: 'http://localhost:8000/payment/pay2pay/goods', //결제 결과값을 받을 url 필수
  ETC1: userInfo?.userId, //추가 필드1 선택사항
  ETC2: location.state.index, //추가 필드2 선택사항
  ETC3: 'temp3', //추가 필드3 선택사항
  ETC4: 'temp4', //추가 필드4 선택사항
  ETC5: 'temp5', //추가 필드5 선택사항
}

// 필요한 params를 포함하여 쿠키페이먼츠 api를 실행한다.
window.cookiepayments.payrequest({
	...cookiepaymentsParams,
})