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

WalletWorks OnRequirements
Apple PaySafari on iPhone, iPad, MacHTTPS required
Google PayChrome, Android devicesHTTPS required
Samsung PaySamsung devicesWorks via ClapPay
ClapPay LinkAny browserBuilt into ClapPay

Set Up Apple Pay

Step 1: Verify Your Domain

Apple needs to verify you own your website:

  1. Go to Dashboard → Settings → Payment Methods
  2. Click Apple Pay
  3. Enter your domain name (like yourstore.com)
  4. Download the verification file
  5. Upload it to /.well-known/apple-developer-merchantid-domain-association
  6. 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 supported

The 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

  1. Use your test API keys
  2. Use a real device with a test card in Wallet
  3. Or use Safari's developer tools to simulate

Test Google Pay

  1. Join the Google Pay test group
  2. Add a test card to your Google account
  3. 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

ProblemSolution
Wallet button not showingCheck: HTTPS enabled? Device supports wallets? Cards added to wallet?
Apple Pay domain errorVerify domain file is at the correct path and accessible
Payment declinedSame reasons as card declines - check the error code
Button shows then disappearsJavaScript 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.

Related Articles