Toss Payments를 활용한 결제 기능 구현하기

Toss Payments는 간편하고 안전한 결제 시스템을 제공하며, React 프로젝트에서 쉽게 적용할 수 있습니다. 이번 글에서는 Toss Payments SDK를 사용해 결제 기능을 구현하는 방법을 단계별로 설명하겠습니다.

 

1. 결제 함수 구현

결제 요청을 처리하는 useTossPayment 함수입니다. 이 함수는 사용자 데이터를 저장하고 Toss Payments로 결제를 요청합니다.

import { loadTossPayments } from '@tosspayments/payment-sdk';
import Swal from "sweetalert2";

const useTossPayment = async (id, name, price, url, rcpName, addrPost, addr1, addr2, phone, userName) => {
    const clientKey = `${process.env.REACT_APP_TOSS_CLIENT_KEY}`;
    const tossPayment = await loadTossPayments(clientKey);

    let productAmount = price;

	const setTempUserData = () => {
        // 사용자 데이터 로컬 스토리지에 저장
        localStorage.setItem('rcp_name', rcpName);
        localStorage.setItem('temp_addr_post', addrPost);
        localStorage.setItem('temp_addr_1', addr1);
        localStorage.setItem('temp_addr_2', addr2);
        localStorage.setItem('temp_phone', phone);
	}
    
    const removeUserData = () => {
     	// 결제 취소 및 완료 시 데이터 초기화
         localStorage.removeItem('rcp_name');
         localStorage.removeItem('temp_addr_post');
         localStorage.removeItem('temp_addr_1');
         localStorage.removeItem('temp_addr_2');
         localStorage.removeItem('temp_phone');
         console.log('사용자가 결제를 취소했습니다.');
   }

    // Toss Payments 결제 요청
    tossPayment.requestPayment('카드', {
        amount: productAmount,
        orderId: id,
        orderName: name,
        customerName: userName,
        successUrl: `${url}/success`,
        failUrl: `${url}/fail`,
    }).catch(function (error) {
        if (error.code === 'USER_CANCEL') {
            // 결제 취소 시 데이터 초기화
            removeUserData();
            Swal.fire({
                title: '결제가 취소되었습니다.',
                text: '사용자가 결제를 취소하였습니다.',
                icon: 'info',
                confirmButtonText: '확인',
                confirmButtonColor: '#0EAD0E',
            });
        } else {
            Swal.fire({
                title: '결제 오류',
                text: '결제 요청 중 문제가 발생했습니다. 다시 시도해주세요.',
                icon: 'error',
                confirmButtonText: '확인',
                confirmButtonColor: '#FF0000',
            });
        }
    });
};

export default useTossPayment;

 

2. 결제 함수 호출하기

위에서 정의한 useTossPayment를 호출하여 결제를 실행할 수 있습니다.

const handlePayment = () => {
    useTossPayment(
        'order-12345', // 주문 ID
        '상품 이름',   // 주문 이름
        50000,         // 금액
        'https://example.com', // 성공/실패 URL의 기본 경로
        '홍길동',       // 수령인 이름
        '12345',       // 우편번호
        '서울특별시 강남구', // 주소1
        '상세 주소',   // 주소2
        '010-1234-5678', // 연락처
        '사용자 이름'   // 사용자 이름
    );
};