[PAYJP-NODEJS] 결제 기능 구현

파 Y. KR

도입 간단

결제 수수료 2.59%~

정기 과금, Apple Pay 대응

간단한 API

Pay.jp 관리 화면

구현

1. API Key 취득

테스트 및 프로덕션 API 키가 있습니다.

2. UI 작성

디자인된 결제 양식 사용(이 기사 사용 방법)

<script> 태그를 한 줄로, 디자인된 결제 폼, 카드 정보의 밸리데이션, 카드 정보의 토큰화를 실시하는 폼을 생성할 수가 있습니다.

<script
  type="text/javascript"
  src="https://checkout.pay.jp/"
  class="payjp-button"
  data-key=PUBLIC_KEY
  data-submit-text="トークンを作成する"
  data-on-created="onCreated"
  data-partial="true">
</script>

다음 버튼이 생성됩니다.
※onCreated는 카드 토큰 작성 후 실행되는 액션입니다. ( window.onCreated = funtion() {} )


클릭하면 카드 정보 입력 양식이 모달로 열립니다.



카드 정보의 유효성 검증에 문제가 없으면 카드 토큰 (tok_ec73...)이 작성됩니다.

설계된 결제 양식 사용 참고

3. 뒷면 실장

SDK 설치 API Doc

npm install --save payjp

이용시

import pay from 'payjp'
const payjp = pay(PRIVATE_KEY);

결제

const pay = await payjp.charges.create({
  amount: 1000,
  currency: 'jpy',
  card: 'tok_ec73...' // カードトークン
})

카드 등록

고객을 만들어야합니다. API

const customer = await payjp.customers.create({
  description: 'テスト',
  email: "[email protected]"
})

// カード情報を取得する時、このユーザーの情報が必要ですので、Userモデルなどにcustomer.idを保存することが必要です。

카드 등록

const card = await payjp.customers.cards.create(customer.id, {
  dcard: 'tok_ec73...', // カードトークン
  default: true,
})

등록된 카드의 정보 취득

고객으로부터 카드 정보를 가져옵니다.

const cards = await payjp.customers.cards.list(customer.id)

※ CardUI는 react-credit-cards를 사용하여 작성합니다.

정기 과금

계획 작성 필요

const plan = await payjp.plans.create({
  amount: 1000,
  currency: 'jpy',
  interval: 'month',
  trial_days: 30
});

const subscription = await payjp.subscriptions.create({
  plan: plan.id,
  customer: customer.id
});