본문으로 건너뛰기

5. 결제 플로우 테스트

5-1. SDK pay() 호출​

가맹점 페이지에서 SDK의 client.pay({...}) 메서드가 호출되면 OozooPay 결제 오버레이가 뜹니다. 토큰과 네트워크가 자동 선택되어 있고 Wallet Connect 대기 상태가 됩니다.

await client.pay({
  price: 1,
  unit: 'usd',
  successUrl: '/payment/success',
  failUrl: '/payment/fail',
  onCreateInvoice: async (params) => {
    const res = await fetch('/api/create-invoice', { method: 'POST', body: JSON.stringify(params) });
    const { invoiceId } = await res.json();
    return invoiceId;
  },
});

결제 모달 — Wallet Connect 대기

5-2. 지갑 선택​

Wallet Connect 버튼을 누르면 지갑 선택 목록이 뜹니다. EVM 결제는 MetaMask, Solana 결제는 Phantom 등 본인이 사용하는 지갑을 선택.

지갑 목록

5-3. 지갑 연결 승인​

선택한 지갑(예: MetaMask)에서 연결 요청 팝업이 뜹니다. 계정 선택 후 연결을 누르면 결제 모달과 연동됩니다.

MetaMask 연결 승인

5-4. 결제 정보 확인 후 Pay​

연결되면 모달 상단에 지갑 주소(0x...)가 표시되고 잔액이 노출됩니다. 토큰/네트워크/금액/네트워크 수수료 다시 확인하고 Pay 버튼을 누릅니다.

지갑 연결 완료, Pay 활성

5-5. 트랜잭션 컨펌​

지갑(MetaMask)에서 트랜잭션 요청 팝업이 뜹니다. 수수료를 확인하고 컨펌을 누릅니다. (ERC20 토큰의 경우 첫 결제 시 approve 트랜잭션이 한 번 더 뜰 수 있음.)

MetaMask 트랜잭션 컨펌

5-6. 온체인 컨펌 → successUrl로 리다이렉트​

블록체인이 트랜잭션을 확정하면(수 초 ~ 1분) 브라우저가 자동으로 successUrl로 이동하고, 가맹점 서버는 invoice.confirmed 웹훅을 받아 주문 확정 처리.

다음: 결과 검증 →