Store Integration Documentation
Store Key Integration is the recommended way to integrate payments. It's secure, easy to use, and safe for client-side implementation.
<script src="https://www.coinrush.link/js/tron-payment.js"></script>
TronPayment.init({
storeKey: 'sk_your_store_key_here',
apiUrl: 'https://www.coinrush.link/store'
});
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);
}
});
<script src="https://www.coinrush.link/js/tron-payment-2.1.2.js"></script>
<script src="https://www.coinrush.link/js/tron-payment-2.1.2.min.js"></script>
You can also download the script and host it on your server:
<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>
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) |
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 |
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
}
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);
}
}
Note: Store Keys automatically apply your store's default theme. You can override it by passing a theme object.
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'
}
});
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'
}
});
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;
<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>
Make sure you're calling TronPayment.init() with a valid store key before opening payment.
Check your store settings and add the current domain to allowed domains list.
The requested asset (TRX/USDT) is not enabled for your store. Check store settings.
The payment amount exceeds your store's maximum payment limit.
// 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());
If you're experiencing network issues, check that: