Supra-pay Web Integration Guide [korean]

1. SDK Installation

⚠️Required Settings:

To use the SDK, add the following meta tag within the <head> tag in your HTML document:

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

Method 1: CDN Installation (Recommended)

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

Method 2: Manual Installation and Initialization

<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>
⚠️Important:

YOUR_CLIENT_ID is the store ID issued from the admin page.

2. Integrating Payment

Parameter Description

Parameter (Required) Description
type (Required) 'buy' or 'sell'
userId (Required) User ID
userName (Required) User Name
usdtqty (Required) Payment Amount (USDT Quantity, Int)
displayType (Required) 'modal' or 'popup'
⚠️iOS User Note:

Modal popups may not be supported on iOS (iPhone/iPad) due to iOS policies.
Chrome browser is recommended for iOS environments (automatic popup conversion supported).

Example Usage

<button 
    data-spura-type="buy"
    data-spura-user-id="userid"
    data-spura-user-id="Jone Smith"
    data-spura-usdtqty="1000"
    data-spura-display="modal">
    Buy
</button>

3. Demo

※This demo is for testing purposes only. Please be careful when using it in production.
※The execution speed may be slow or errors may occur.

4. Callback [Optional, For client-side user event notifications related to popups or modals]

⚠️ Important:

!! This does not reflect the actual payment results. You should not judge user payments based on this callback.

  • When a user selects an item through the window you provided and places an order with the dealer, the function of that window is completed (order request).
  • The execution of the order requested by the user is completed after the user pays the OTC dealer and the OTC dealer confirms or cancels the transaction (transaction completion/cancellation).
  • Therefore, since the 'order request' and 'transaction completion/cancellation' are separate procedures, we are delivering 'transaction completion/cancellation' via webhook to Telegram.

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);
    }
});
※Note:

Callback functions are optional. If not set, logs will be output to the console by default.

  • onSuccess: Payment success
  • onError: Payment failed
  • onCancel: Payment cancelled

5. Get USDT Price (Using Bithumb API)

spura pay uses USDT as the default payment method.
Please pass the payment amount in USDT to be used for payment.
Please check the current price of USDT before payment to calculate the amount to be received.
※The source uses the Bithumb API.

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);
    }
}

// Example usage
getBithumbUSDTPrice().then(priceInfo => {
    console.log('USDT Price:', priceInfo.price);
});
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());
    }
}

// Example usage
$usdtInfo = getBithumbUSDTPrice();
echo "USDT Current Price: " . number_format($usdtInfo['price']) . " KRW";