Card Payments
Accept Visa, Mastercard, American Express, and other major cards from customers around the world.
Supported Card Brands
How Card Payments Work
- Create a PaymentIntent - Tell ClapPay how much to charge
- Show payment form - Customer enters their card details
- Confirm payment - ClapPay charges the card
- Handle result - Show success or error message
Accept a Card Payment
Server Side
Create a PaymentIntent on your server:
const clappay = require('@clappay/sdk')('sk_live_...');
// Create a PaymentIntent
const paymentIntent = await clappay.paymentIntents.create({
amount: 2000, // $20.00 in cents
currency: 'usd',
payment_method_types: ['card'],
metadata: {
order_id: 'order_123', // Your reference
},
});
// Send client_secret to your frontend
res.json({ clientSecret: paymentIntent.client_secret });Frontend
Use our payment form to collect card details:
import { ClapPay } from '@clappay/sdk';
const clappay = new ClapPay('pk_live_...');
// Create payment element
const elements = clappay.elements();
const paymentElement = elements.create('payment');
paymentElement.mount('#payment-form');
// When customer clicks "Pay"
async function handleSubmit() {
const { error } = await clappay.confirmPayment({
elements,
confirmParams: {
return_url: 'https://yoursite.com/success',
},
});
if (error) {
// Show error to customer
console.log(error.message);
}
// Otherwise, customer is redirected to return_url
}Save Cards for Later
Let customers save their card so they don't have to enter it again. This is useful for repeat purchases or subscriptions.
// Create a SetupIntent to save the card
const setupIntent = await clappay.setupIntents.create({
customer: 'cus_abc123',
payment_method_types: ['card'],
});
// After customer enters card, it's saved to their customer record
// Later, charge the saved card:
await clappay.paymentIntents.create({
amount: 2000,
currency: 'usd',
customer: 'cus_abc123',
payment_method: 'pm_saved_card...',
off_session: true, // Customer not present
confirm: true,
});3D Secure Authentication
3D Secure (3DS) is an extra security step where the bank asks the customer to confirm their identity. It protects you from fraud and is required in some regions.
How it works:
- Customer enters card details
- Bank sends a popup or redirect asking for verification
- Customer enters code from SMS or approves in banking app
- Payment continues if verification succeeds
Good news: ClapPay handles 3D Secure automatically. Our SDKs show the verification popup when needed.
Address Verification (AVS)
AVS checks if the billing address matches what the bank has on file. It helps catch fraudulent transactions.
When you collect billing details, ClapPay checks them automatically. You can configure rules to block payments when the address doesn't match.
Handle Declined Cards
Cards get declined for many reasons. Show a helpful message:
try {
await clappay.confirmPayment({ elements });
} catch (error) {
if (error.type === 'card_error') {
switch (error.decline_code) {
case 'insufficient_funds':
showMessage('Not enough funds. Try a different card.');
break;
case 'expired_card':
showMessage('Your card has expired. Please update it.');
break;
default:
showMessage('Card declined. Please try another card.');
}
}
}See Error Codes for all decline reasons.
Card Processing Fees
Each card payment has a processing fee. The exact fee depends on:
- Card type (credit vs debit, rewards cards cost more)
- Whether the card is domestic or international
- Your pricing plan with ClapPay
Check your Dashboard for exact pricing, or contact sales for volume discounts.
Best Practices
- Use our payment form - It handles card validation, formatting, and security automatically
- Collect billing address - Helps with fraud prevention and reduces declines
- Show clear error messages - Tell customers what went wrong and what to do
- Support multiple cards - Let customers add backup payment methods
- Test thoroughly - Use test cards to verify all scenarios work