💳 Card Payments (USD/EUR)
Accept international card payments. Visa, Mastercard, AMEX in USD, EUR, GBP and more. PCI-DSS compliant with 3D Secure.
Supported Cards
Supported Currencies
Contact us at support@gammal.tech to request additional currencies.
Method Reference
Opens a secure card payment popup. User enters card details in Gammal Tech's PCI-compliant form. On success, calls your delivery callback.
| Parameter | Type | Description |
|---|---|---|
amount |
number |
Amount in specified currency (e.g., 29.99 for $29.99) |
currency |
string |
ISO currency code: "USD", "EUR", "GBP", etc. |
description |
string |
What the user is paying for (shown on card statement) |
onDeliver |
function(payment) |
Callback when payment succeeds. Receives payment object. |
Basic Usage
// Charge $49.99 USD
GammalTech.payCard(49.99, 'USD', 'Pro Plan - Monthly', function(payment) {
console.log('Payment successful!', payment.id);
// Deliver the product
activateProPlan(payment.user_id);
// Confirm delivery
GammalTech.payment.confirmDelivery(payment.id);
});// Charge €19.00 EUR
GammalTech.payCard(19.00, 'EUR', 'Digital Download', function(payment) {
console.log('Payment ID:', payment.id);
unlockDownload(payment.user_id);
GammalTech.payment.confirmDelivery(payment.id);
});Payment Flow
1. SDK Call: Your app calls payCard() with amount, currency, description.
2. Card Form: Secure popup opens where user enters card details.
3. 3D Secure: If required, user completes bank verification (OTP/password).
4. Processing: Gammal Tech processes the charge with the card network.
5. Callback: On success, your onDeliver callback is called.
Payment Object
The onDeliver callback receives a payment object:
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>Checkout</title>
<script src="https://api.gammal.tech/sdk-web.js"></script>
</head>
<body>
<div id="checkout">
<h1>Pro Plan</h1>
<p>Unlimited access to all features</p>
<div class="price-options">
<button onclick="pay('USD', 29.99)">Pay $29.99 USD</button>
<button onclick="pay('EUR', 27.99)">Pay €27.99 EUR</button>
<button onclick="pay('GBP', 24.99)">Pay £24.99 GBP</button>
</div>
</div>
<div id="success" style="display:none">
<h1>🎉 Welcome to Pro!</h1>
<p>Your account has been upgraded.</p>
<a href="/dashboard">Go to Dashboard →</a>
</div>
<script>
async function pay(currency, amount) {
// Ensure user is logged in
if (!GammalTech.isLoggedIn()) {
await GammalTech.login();
if (!GammalTech.isLoggedIn()) return;
}
// Initiate card payment
GammalTech.payCard(amount, currency, 'Pro Plan - Monthly', async (payment) => {
console.log('Payment successful:', payment);
// Save to your backend
await fetch('/api/subscriptions', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
payment_id: payment.id,
user_id: payment.user_id,
plan: 'pro',
amount: payment.amount,
currency: payment.currency
})
});
// Confirm delivery
await GammalTech.payment.confirmDelivery(payment.id);
// Show success
document.getElementById('checkout').style.display = 'none';
document.getElementById('success').style.display = 'block';
});
}
</script>
</body>
</html>Security Features
PCI-DSS Level 1
Highest level of payment security compliance
3D Secure 2.0
Bank-verified transactions reduce fraud
Tokenization
Card data never touches your servers
TLS Encryption
All data encrypted in transit
Card details are entered in Gammal Tech's secure iframe, processed by our PCI-compliant infrastructure, and never touch your servers. You only receive a payment confirmation.
Error Handling
try {
GammalTech.payCard(29.99, 'USD', 'Product', (payment) => {
deliverProduct(payment);
});
} catch (error) {
switch (error.code) {
case 'CARD_DECLINED':
alert('Card was declined. Please try another card.');
break;
case 'INSUFFICIENT_FUNDS':
alert('Insufficient funds on card.');
break;
case '3DS_FAILED':
alert('Bank verification failed. Please try again.');
break;
case 'USER_CANCELLED':
console.log('User cancelled payment');
break;
case 'INVALID_CARD':
alert('Invalid card details. Please check and try again.');
break;
default:
alert('Payment failed. Please try again.');
console.error(error);
}
}Best Practices
Show Clear Pricing
Display the exact amount and currency before the user clicks pay. "Pay $29.99 USD" is better than just "Pay".
Handle Currency Properly
Use the correct decimal places for each currency. USD/EUR use 2 decimals ($29.99). Some currencies like JPY use 0 decimals.
Store Payment Details
Always save payment.id, currency, and amount in your database for reconciliation and refunds.
Test with Test Cards
In sandbox mode, use test card numbers provided in the developer portal. Never use real cards for testing.
AI Prompt for Vibe Coding
Card PaymentsCopy this prompt for help with card payment implementation: