# 🪙 Crypto Payments Widget - 사용 예시

위젯을 사용하기 전에 파트너 토큰을 설정하세요.

## ⚙️ 설정

파트너 사용자 ID:
위젯 모드:
테마:
디버그 모드:

## 🚀 기본 사용법

가장 간단한 방법으로 위젯을 사용해보세요.

// 기본 사용법 const widget = new CryptoPaymentsWidget({ mode: 'window', // 또는 'modal' debug: true }); // 입금 위젯 열기 await widget.openDeposit('user123'); // 출금 위젯 열기 (새로운 함수 인터페이스) await widget.openWithdrawal('user123', { minAmount: 10, maxAmount: 10000, showBalance: true, reqWithdraw: async (withdrawalData) => { // 파트너 서버에서 출금 처리 const response = await fetch('/api/process-withdrawal', { method: 'POST', body: JSON.stringify({ withdrawalData }) }); return response.ok; // 성공 시 true 반환 } });

## 🎯 팩토리 함수 사용법

편의 함수를 사용하여 더 간단하게 위젯을 생성할 수 있습니다.

// 새창 모드 위젯 const windowWidget = createCryptoPaymentsWidget.window({ theme: 'light', debug: true }); // 모달 모드 위젯 const modalWidget = createCryptoPaymentsWidget.modal({ modalAnimation: true, modalZIndex: 10000 }); // 입금 전용 위젯 const depositWidget = createCryptoPaymentsWidget.deposit({ mode: 'modal' });

## 🎨 고급 설정

상세한 콜백과 설정을 포함한 위젯 사용법입니다.

const advancedWidget = new CryptoPaymentsWidget({ mode: 'modal', theme: 'dark', width: 500, height: 700, // 콜백 함수들 onSuccess: (result) => { console.log('성공:', result); if (result.type === 'deposit') { alert(`입금 주소 생성: ${result.address}`); } else if (result.type === 'withdrawal') { alert(`출금 요청 완료: ${result.transactionId}`); } }, onError: (error) => { console.error('오류:', error); alert(`오류 발생: ${error.message}`); }, onClose: () => { console.log('위젯이 닫혔습니다'); } });

## 🔧 체인/토큰 미리 선택

특정 체인이나 토큰을 미리 선택한 상태로 위젯을 열 수 있습니다.

## 🎯 통화 제한 (allowedCurrencies)

특정 통화만 선택할 수 있도록 제한할 수 있습니다.

// 특정 통화만 허용하는 예시 // 1️⃣ USDT만 허용 await widget.openDeposit('user123', { allowedCurrencies: ['USDT'] }); // 2️⃣ USDC만 허용 await widget.openDeposit('user123', { allowedCurrencies: ['USDC'] }); // 3️⃣ 스테이블코인만 허용 await widget.openDeposit('user123', { allowedCurrencies: ['USDT', 'USDC'] }); // 4️⃣ 모든 통화 허용 (기본값) await widget.openDeposit('user123', { allowedCurrencies: null // 또는 생략 });

## 💰 금액 미리 설정 출금

KRW나 USD 금액을 미리 설정하여 출금 위젯을 열 수 있습니다.
잔액 상관없이 설정된 금액으로 출금이 가능하며, 환율은 자동으로 변환됩니다.

### 🔧 사용자 정의 금액 설정

금액:
결제 통화:
출금 통화:
💡 팁: 환율은 실시간으로 적용되며, 파트너별로 다른 환율 정책을 사용할 수 있습니다.
// 💰 금액 미리 설정 출금 예시 (새로운 함수 인터페이스) // 1️⃣ 10,000 KRW → USDT 출금 (미리 설정된 금액) await widget.openWithdrawal('user123', { presetAmount: 10000, presetAmountCurrency: 'KRW', targetCurrency: 'USDT', minAmount: 1000, maxAmount: 100000, dailyLimit: 500000, showBalance: true, showFeeInfo: true, reqWithdraw: async (withdrawalData) => { // 파트너 서버에서 출금 처리 const response = await fetch('/api/process-withdrawal', { method: 'POST', body: JSON.stringify({ withdrawalData }) }); return response.ok; } }); // 2️⃣ 100 USD → USDC 출금 await widget.openWithdrawal('user123', { presetAmount: 100, presetAmountCurrency: 'USD', targetCurrency: 'USDC', minAmount: 10, maxAmount: 10000, dailyLimit: 50000, reqWithdraw: async (withdrawalData) => { // 파트너 서버에서 출금 처리 return true; // 성공 시 true 반환 } }); // 3️⃣ 자동 통화 선택 (사용자가 UI에서 선택) await widget.openWithdrawal('user123', { presetAmount: 50000, presetAmountCurrency: 'KRW', // targetCurrency 생략 시 사용자가 선택 reqWithdraw: async (withdrawalData) => { return true; // 성공 시 true 반환 } });

## 🎯 실제 사용 시나리오

파트너 시스템에서 이 기능을 어떻게 활용할 수 있는지 보여주는 예시입니다.

### 📱 모바일 앱 시나리오

사용자가 앱에서 "10,000원 출금" 버튼을 눌렀을 때:

#### ✅ 개선된 방식 (금액 미리 설정)

1단계: 앱에서 10,000 KRW 설정
2단계: 출금 위젯 열기
3단계: 네트워크 선택 (TRON/BSC/ETH 등)
4단계: 수신 주소 입력
5단계: 출금 완료
👍 잔액 부족해도 출금 가능!
👍 금액 계산 불필요!

#### ❌ 기존 방식

1단계: 출금 위젯 열기
2단계: 통화 선택 (USDT/USDC)
3단계: 네트워크 선택
4단계: 금액 계산 및 입력
5단계: 잔액 확인
6단계: 수신 주소 입력
7단계: 출금 완료
👎 잔액 부족시 출금 불가
👎 환율 계산 필요

## 🎮 위젯 상태 및 제어

위젯 상태를 확인하려면 '위젯 상태 확인' 버튼을 클릭하세요.

## 📋 실시간 이벤트 로그

[시스템] 이벤트 로그가 여기에 표시됩니다...