Supra-pay 연동 가이드

1. SDK 설치

⚠️ 필수 설정:

SDK 사용을 위해 HTML 문서의 <head> 태그 내에 다음 메타 태그를 추가해주세요:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

방법 1: CDN 설치 (권장)

<script 
    src="https://sdk.supra-pay.com/v3/suprapay-sdk.js" 
    data-spura-client-id="YOUR_CLIENT_ID">
</script>

방법 2: 수동 설치 및 초기화

<script src="https://sdk.supra-pay.com/v3/suprapay-sdk.js"> </script>
<script>
const spura = SpuraSDK.initialize (
              'YOUR_CLIENT_ID', 
                 {
                    popupWidth: 500,
                    popupHeight: 700
                 }
);
</script>
⚠️ 중요:

YOUR_CLIENT_ID는 관리자 페이지에서 발급받은 상점 아이디로 교체해주세요.

2. 결제 연동하기

파라미터 설명

파라미터 설명
type 'buy' 또는 'sell'
userId 사용자 ID
userName 사용자 이름
usdtqty 결제 금액(USDT 수량)
displayType 'modal' 또는 'popup'
⚠️ iOS 사용자 주의사항:

iOS(iPhone/iPad)에서는 iOS 정책상 modal 팝업이 지원되지 않을 수 있습니다.
iOS 환경에서는 크롬 브라우저 사용을 권장합니다.(자동 팝업 전환으로 지원)

사용 예시

<button 
    data-spura-type="buy"
    data-spura-user-id="userid"
    data-spura-user-name="mario super"
    data-spura-usdtqty="1000"
    data-spura-display="modal">
    구매하기
</button>

3. 데모

※ 해당 데모는 테스트 환경입니다. 실제 사용시 주의 바랍니다.
※ 실행 속도가 느리거나 오류가 발생할 수 있습니다.

4. Callback [선택사항, 팝업 또는 모달에 관련된 클라이언트 단의 유저 이벤트 전달용]

⚠️ 중요:

!! 실제 결제결과가 반영되는것이 아닙니다. 해당 콜백으로 유저 결제를 판단하시면 안됩니다.

  • 유저에게 전달한 창을 통해서유저가 매물을 선택하고 딜러에게 주문을 넣으면해당 창의 기능은 마무리 됩니다.(주문 요청)
  • 유저가 요청한 주문의 실행은 OTC 딜러에게 대금을 지급하는 행위가 이루어진 후 OTC 딜러가 컨펌 또는 캔슬 처리를 통해 완료가 됩니다.(거래 완료/ 취소)
  • 따라서 '주문 요청'과 '거래의 완료/취소' 절차는 별개의 절차이기 때문에, '거래의 완료/취소'는 웹훅을 받아서 텔레그램으로 전달드리고 있습니다.

Example Code

// Initialize with callbacks
const spura = SpuraSDK.initialize('YOUR_CLIENT_ID', {
    onSuccess: function(data) {
        console.log('Payment Success:', data);
        // Handle successful payment
    },
    onError: function(error) {
        console.error('Payment Failed:', error);
        // Handle payment error
    },
    onCancel: function(data) {
        console.warn('Payment Cancelled:', data);
        // Handle payment cancellation
    }
});

// Or set callbacks after initialization
spura.setCallbacks({
    onSuccess: (data) => {
        console.log('Payment Success:', data);
    },
    onError: (error) => {
        console.error('Payment Failed:', error);
    },
    onCancel: (data) => {
        console.warn('Payment Cancelled:', data);
    }
});
※참고:

콜백 함수는 선택적으로 설정할 수 있습니다. 설정하지 않을 경우 기본으로 콘솔에 로그가 출력됩니다.

  • onSuccess: 결제 성공 시 호출됩니다.
  • onError: 결제 실패 시 호출됩니다.
  • onCancel: 결제 취소 시 호출됩니다.

5. USDT 가격 가져오기 (Bithumb API 사용)

spura pay는 기본적으로 USDT를 기본 결제 수단으로 사용합니다.
결제 금액을 USDT로 환산하여 전달 하여 주셔야 합니다.
결제 전에 USDT 현재가를 확인하여 결제 받을 수량을 계산하여 주시기 바랍니다.
※ 소스는 빗썸 API를 사용하였습니다.

// JavaScript 예제
async function getBithumbUSDTPrice() {
    try {
        const response = await fetch('https://api.bithumb.com/public/ticker/USDT_KRW');
        const data = await response.json();
        
        if(data.status === '0000') {
            return {
                price: parseFloat(data.data.closing_price),
                timestamp: parseInt(data.data.date)
            };
        }
    } catch (error) {
        console.error('Error fetching USDT price:', error);
    }
}

// 사용 예시
getBithumbUSDTPrice().then(priceInfo => {
    console.log('USDT Price:', priceInfo.price);
});
// PHP 예제
function getBithumbUSDTPrice() {
    try {
        $url = 'https://api.bithumb.com/public/ticker/USDT_KRW';
        $response = file_get_contents($url);
        
        if ($response === false) {
            throw new Exception('Failed to get response');
        }

        $data = json_decode($response, true);
        
        if ($data['status'] === '0000') {
            return [
                'price' => (float)$data['data']['closing_price'],
                'timestamp' => (int)$data['data']['date']
            ];
        }
    } catch (Exception $e) {
        error_log('Error: ' . $e->getMessage());
    }
}

// 사용 예시
$usdtInfo = getBithumbUSDTPrice();
echo "USDT 현재가: " . number_format($usdtInfo['price']) . " KRW";