Payments
Digital Wallets (Apple Pay & Google Pay)
Let customers pay with a single tap using Apple Pay, Google Pay, and other digital wallets. Faster checkout means more completed purchases.
7 min read
Why Accept Digital Wallets?
- Faster checkout - One tap instead of typing card numbers
- Higher conversion - Fewer abandoned carts
- Better security - Tokenized, not real card numbers
- Mobile-first - Perfect for phone and tablet users
Supported Wallets
| Wallet | Works On | Requirements |
|---|---|---|
| Apple Pay | Safari on iPhone, iPad, Mac | HTTPS required |
| Google Pay | Chrome, Android devices | HTTPS required |
| Samsung Pay | Samsung devices | Works via ClapPay |
| ClapPay Link | Any browser | Built into ClapPay |
Set Up Apple Pay
Step 1: Verify Your Domain
Apple needs to verify you own your website:
- Go to Dashboard → Settings → Payment Methods
- Click Apple Pay
- Enter your domain name (like yourstore.com)
- Download the verification file
- Upload it to
/.well-known/apple-developer-merchantid-domain-association - Click Verify
Important
Your site must use HTTPS. Apple Pay won't work on HTTP sites.
Set Up Google Pay
Google Pay works automatically with ClapPay. No extra setup needed!
Just make sure:
- Your site uses HTTPS
- You've enabled Google Pay in your dashboard settings
Add to Your Checkout
Include digital wallets in your payment request:
// Create a payment intent with wallet support
POST /v1/payments
{
"amount": 2500,
"currency": "USD",
"payment_method_types": [
"card",
"apple_pay",
"google_pay"
]
}Frontend Integration
The ClapPay JavaScript SDK handles wallet buttons automatically:
// Initialize ClapPay
const clappay = ClapPay('pk_live_your_key');
// Create payment element with wallets
const paymentElement = clappay.elements().create('payment', {
wallets: {
applePay: 'auto',
googlePay: 'auto'
}
});
// Mount to your checkout page
paymentElement.mount('#payment-element');
// Wallet buttons appear automatically if supportedThe SDK automatically:
- Detects if the customer's device supports wallets
- Shows the right buttons (Apple Pay on iPhone, Google Pay on Android)
- Handles the payment flow securely
Express Checkout Button
Add a wallet button above your regular checkout for quick purchases:
// Create express checkout button
const expressButton = clappay.elements().create('expressCheckout', {
buttonType: {
applePay: 'buy',
googlePay: 'buy'
},
layout: {
maxColumns: 2,
maxRows: 1
}
});
// Mount on product or cart page
expressButton.mount('#express-checkout');
// Handle successful payment
expressButton.on('confirm', async (event) => {
// Complete the purchase
const result = await clappay.confirmPayment({
clientSecret: paymentIntentSecret,
confirmParams: {
return_url: 'https://yoursite.com/success'
}
});
});Mobile App Integration
iOS (Apple Pay)
// Swift - Check if Apple Pay is available
if ClapPay.canMakePayments() {
let paymentRequest = ClapPay.paymentRequest(
amount: 25.00,
currency: "USD",
merchantId: "merchant.com.yourapp"
)
let applePayController = PKPaymentAuthorizationController(
paymentRequest: paymentRequest
)
applePayController.delegate = self
applePayController.present()
}Android (Google Pay)
// Kotlin - Check if Google Pay is available
val isReadyToPayRequest = IsReadyToPayRequest.fromJson(
googlePayConfig.toString()
)
paymentsClient.isReadyToPay(isReadyToPayRequest)
.addOnCompleteListener { task ->
if (task.result == true) {
// Show Google Pay button
showGooglePayButton()
}
}Testing Wallet Payments
Test Apple Pay
- Use your test API keys
- Use a real device with a test card in Wallet
- Or use Safari's developer tools to simulate
Test Google Pay
- Join the Google Pay test group
- Add a test card to your Google account
- Use test mode in your integration
Tip
Wallet payments in test mode don't charge real cards. The transaction completes but no money moves.
Common Issues
| Problem | Solution |
|---|---|
| Wallet button not showing | Check: HTTPS enabled? Device supports wallets? Cards added to wallet? |
| Apple Pay domain error | Verify domain file is at the correct path and accessible |
| Payment declined | Same reasons as card declines - check the error code |
| Button shows then disappears | JavaScript error - check browser console |
Best Practices
- Show wallets prominently - Put wallet buttons above the card form, not hidden at the bottom.
- Use express checkout - Add wallet buttons on product pages for one-tap buying.
- Keep both options - Always offer card payment too, not everyone uses wallets.
- Test on real devices - Wallet behavior is different on actual phones vs. emulators.
- Match the platform - Show Apple Pay to iPhone users, Google Pay to Android users.