Toss Payment API 결제 구현

• Pre-Requirement.

• Installment.

• 결제요청.

• 결제성공.

• References

1. 사용자 → 클라이언트 : 결제창 호출

2. 클라이언트 → PG사 : 결제 요청

3. PG사 → 클라이언트: 결제키 발급

4. 클라이언트 → PG사 : 결제 승인 API 요청

5. PG사 → 클라이언트: 승인 결과 응답

6. 클라이언트 → 사용자 : 결제 결과 응답

Pre-Requirement.

• [ ] 개발자센터 API 클라이언트 키
• [ ] 개발자센터 API 시크릿 키

Installment.

npm install @tosspayments/payment-sdk

결제요청

const clientKey = process.env.NEXT_PUBLIC_TOSS_CLIENT_KEY;
const tosspayments = await loadTossPayments(
  clientKey
);

try {
  const data = await tosspayments.requestPayment('카드', {
    amount: 5000,
    orderId: Math.random().toString(36).slice(2),
    orderName: '노트북',
  });

  console.log(data);
	/*
		amount,
		orderId,
		paymentKey
	*/
} catch (err: any) {
  if (err.code === 'USER_CANCEL') {
    // 사용자가 창을 닫아 취소한 경우에 대한 처리
  }
}

결제성공

const { amount, orderId, paymentKey } = req.query;
const secretKey = process.env.NEXT_PUBLIC_TOSS_SECRET_KEY;

const url = "<https://api.tosspayments.com/v1/payments/confirm>";
const basicToken = Buffer.from(`${secretKey}:`, 'utf-8').toString('base64');

await fetch(url, {
  method: 'post',
  body: JSON.stringify({
    amount, orderId, paymentKey
  }),
  headers: {
    Authorization: `Basic ${basicToken}`,
    'Content-Type': 'application/json',
  }
});

res.redirect(`/payments/complete?orderId=${orderId}`);

References

• 토스페이먼츠 결제 연동하기
• https://github.com/tosspayments/payment-widget-sample