Tron Payment Gateway

Store Integration Documentation

Store Key Integration v2.1.2

🚀 Quick Start

Store Key Integration is the recommended way to integrate payments. It's secure, easy to use, and safe for client-side implementation.

1. Include the Script

<script src="https://www.coinrush.link/js/tron-payment.js"></script>

2. Initialize with Store Key

TronPayment.init({
    storeKey: 'sk_your_store_key_here',
    apiUrl: 'https://www.coinrush.link/store'
});

3. Create Payment

TronPayment.openPayment({
    transactionId: 'order_' + Date.now(),
    amount: 100.50,
    asset: 'USDT', // or 'TRX'
    onSuccess: function(payment) {
        console.log('Payment successful!', payment);
        // Redirect to success page
        window.location.href = '/success';
    },
    onError: function(error) {
        console.error('Payment error:', error);
    }
});

📦 Installation

CDN (Recommended)

<script src="https://www.coinrush.link/js/tron-payment-2.1.2.js"></script>

Minified Version

<script src="https://www.coinrush.link/js/tron-payment-2.1.2.min.js"></script>

Download and Host

You can also download the script and host it on your server:

🔧 Basic Usage

HTML Button Integration

<button id="payButton" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg">
    Pay $50.00
</button>

<script src="https://www.coinrush.link/js/tron-payment.js"></script>
<script>
document.getElementById('payButton').addEventListener('click', function() {
    TronPayment.init({
        storeKey: 'sk_your_store_key_here',
        apiUrl: 'https://www.coinrush.link/store'
    });

    TronPayment.openPayment({
        transactionId: 'order_' + Date.now(),
        amount: 50.00,
        asset: 'USDT',
        onSuccess: function(payment) {
            alert('Payment successful!');
            window.location.href = '/success';
        }
    });
});
</script>

⚙️ Configuration

Init Options

Option Type Required Description
storeKey string Your store key (starts with sk_)
apiUrl string API URL (auto-detected if not provided)
theme object Custom theme override
timeout number Payment timeout in ms (default: 600000)
pollingInterval number Status check interval in ms (default: 5000)

Payment Options

Option Type Required Description
transactionId string Unique transaction identifier
amount number Payment amount in USD
asset string Crypto asset (TRX, USDT) - uses store default
onSuccess function Success callback
onError function Error callback
onCancel function Cancel callback

🎯 Events

Success Event

onSuccess: function(payment) {
    console.log('Payment data:', payment);
    // payment.transaction_id - Your transaction ID
    // payment.amount_usd - Amount in USD
    // payment.amount_crypto - Amount in crypto
    // payment.asset - Asset type (TRX/USDT)
    // payment.status - Payment status
    // payment.expires_at - Expires timestamp
}

Error Event

onError: function(error) {
    console.error('Payment error:', error.message);
    // Handle different error types
    switch(error.message) {
        case 'Payment expired':
            alert('Payment time expired. Please try again.');
            break;
        case 'Invalid amount':
            alert('Invalid payment amount.');
            break;
        default:
            alert('Payment failed: ' + error.message);
    }
}

🎨 Theming

Note: Store Keys automatically apply your store's default theme. You can override it by passing a theme object.

Custom Theme

TronPayment.openPayment({
    transactionId: 'order_' + Date.now(),
    amount: 50.00,
    asset: 'USDT',
    theme: {
        primaryColor: '#3B82F6',
        successColor: '#10B981',
        errorColor: '#EF4444',
        warningColor: '#F59E0B',
        backgroundColor: '#FFFFFF',
        textColor: '#111827',
        borderRadius: '8px',
        fontFamily: 'Inter, sans-serif'
    }
});

Dark Theme Example

TronPayment.openPayment({
    transactionId: 'order_' + Date.now(),
    amount: 50.00,
    asset: 'USDT',
    theme: {
        primaryColor: '#60A5FA',
        successColor: '#34D399',
        errorColor: '#F87171',
        warningColor: '#FBBF24',
        backgroundColor: '#1F2937',
        textColor: '#F9FAFB',
        borderRadius: '12px',
        fontFamily: 'system-ui, sans-serif'
    }
});

💡 Examples

React Component

import React, { useEffect } from 'react';

const PaymentButton = ({ amount, orderId, onSuccess }) => {
    useEffect(() => {
        // Load script if not already loaded
        if (!window.TronPayment) {
            const script = document.createElement('script');
            script.src = 'https://www.coinrush.link/js/tron-payment.js';
            document.head.appendChild(script);
        }
    }, []);

    const handlePayment = () => {
        if (!window.TronPayment) {
            alert('Payment widget not loaded');
            return;
        }

        window.TronPayment.init({
            storeKey: process.env.REACT_APP_STORE_KEY,
            apiUrl: 'https://www.coinrush.link/store'
        });

        window.TronPayment.openPayment({
            transactionId: orderId,
            amount: amount,
            asset: 'USDT',
            onSuccess: onSuccess,
            onError: (error) => {
                console.error('Payment error:', error);
            }
        });
    };

    return (
        <button
            onClick={handlePayment}
            className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg"
        >
            Pay ${amount}
        </button>
    );
};

export default PaymentButton;

Vue.js Component

<template>
  <button @click="handlePayment" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg">
    Pay \${amount}
  </button>
</template>

<script>
export default {
  name: 'PaymentButton',
  props: {
    amount: {
      type: Number,
      required: true
    },
    orderId: {
      type: String,
      required: true
    }
  },
  mounted() {
    // Load script if not already loaded
    if (!window.TronPayment) {
      const script = document.createElement('script');
      script.src = 'https://www.coinrush.link/js/tron-payment.js';
      document.head.appendChild(script);
    }
  },
  methods: {
    handlePayment() {
      if (!window.TronPayment) {
        alert('Payment widget not loaded');
        return;
      }

      window.TronPayment.init({
        storeKey: process.env.VUE_APP_STORE_KEY,
        apiUrl: 'https://www.coinrush.link/store'
      });

      window.TronPayment.openPayment({
        transactionId: this.orderId,
        amount: this.amount,
        asset: 'USDT',
        onSuccess: (payment) => {
          this.$emit('success', payment);
        },
        onError: (error) => {
          this.$emit('error', error);
        }
      });
    }
  }
}
</script>

🔒 Security

✅ Store Key Benefits

  • • Safe for client-side use
  • • Domain restrictions enforced
  • • Limited to payment operations only
  • • Automatic rate limiting
  • • Asset restrictions from store settings

⚠️ Best Practices

  • • Always verify payments on your backend
  • • Use unique transaction IDs
  • • Implement postback handling
  • • Set appropriate domain restrictions
  • • Monitor payment limits

🔧 Troubleshooting

Common Issues

Error: "storeKey is required"

Make sure you're calling TronPayment.init() with a valid store key before opening payment.

Error: "Domain not allowed"

Check your store settings and add the current domain to allowed domains list.

Error: "Asset not allowed"

The requested asset (TRX/USDT) is not enabled for your store. Check store settings.

Error: "Amount exceeds limit"

The payment amount exceeds your store's maximum payment limit.

Debug Information

// Get widget configuration info
console.log('Widget config:', TronPayment.getConfig());

// Check if using Store Key
console.log('Using Store Key:', TronPayment.isUsingStoreKey());

// Get widget version
console.log('Widget version:', TronPayment.getVersion());

Network Issues

If you're experiencing network issues, check that:

  • • API URL is correctly configured
  • • CORS is properly configured on your server
  • • Firewall allows connections to the payment gateway
  • • SSL certificates are valid