Testing

Test your Drop-in integration in the sandbox environment before accepting real payments. The sandbox environment allows you to test all payment methods without processing actual transactions.

Set the environment to test when initialising Drop-in:

CheckoutDropIn.initialize({
  environment: 'test',  // Use sandbox
  // ... rest of config
});

Key points about sandbox testing:

• No real money is charged.
• Use test card numbers and sandbox accounts.
• All payment methods work the same as production.
• Backend verification still required using test API credentials.

Use these test cards in sandbox to simulate different scenarios:

The following test cards represent successful payment scenarios:

For all test cards:

• Expiry date: Any future date (e.g., 12/25).
• CVV: Any 3 digits (e.g., 123).
• Cardholder name: Any name.

The following test cards simulate payment failures:

When using the challenge test card (4000 0000 0000 0002), a 3D Secure authentication modal appears:

• To pass: Enter any code (e.g., 1234).
• To fail: Leave empty or enter wrong code multiple times.
• To timeout: Wait for modal to timeout.

Verify that your onSuccess callback fires after successful authentication, and that your backend receives the transaction details.

You need a PayPal sandbox account for testing. Create one in the PayPal Developer Dashboard.

Create a personal (buyer) account for testing customer payments.

1. Click the PayPal button in the drop-in.
2. Log in with your PayPal sandbox account.
3. Approve the payment.
4. Verify that onSuccess fires with transaction details.
5. Verify your backend receives the payment notification.

Test both transaction intents:

• Purchase intent: Funds captured immediately.
• Authorisation intent: Funds authorised but not captured (capture later via backend API).

• Chrome, Edge, or Opera browser
• Google Account signed in
• Test card added to Google Pay wallet

1. Open your checkout page in a supported browser.
2. Sign in to your Google Account.
3. Add a test card to Google Pay (use test card numbers from above).
4. Click the Google Pay button in Drop-in.
5. Select your test card in the payment sheet.
6. Click Pay.
7. Verify that onSuccess fires with transaction details.

The Google Pay button only appears on supported browsers when the user has cards in their Google Pay wallet.

• Apple device (iPhone, iPad, or Mac with Touch ID/Face ID)
• Safari browser
• Test card added to Apple Wallet

1. Open your checkout page in Safari on an Apple device.
2. Add a test card to Apple Wallet (use test card numbers from above).
3. Click the Apple Pay button in Drop-in.
4. Authenticate with Face ID, Touch ID, or passcode.
5. Approve the payment.
6. Verify that onSuccess fires with transaction details.

The Apple Pay button only appears on supported Apple devices with cards in Apple Wallet.

Test that your error handling works correctly by simulating failures:

Use the failed payment test cards to trigger different error types:

• Insufficient funds: 4000 0000 0000 0077
• Card declined: 4000 0000 0000 0051
• Expired card: 4000 0000 0000 0069
• CVV failure: 4000 0000 0000 0101

Verify that your onError callback receives the error and displays an appropriate message to the customer.

Test offline behaviour:

1. Open browser DevTools and go to the Network tab.
2. Set network to "Offline".
3. Try to submit a payment.
4. Verify that your error handling shows a network error message.

Test cancellation handling:

• PayPal: Close the PayPal window without completing payment.
• Google Pay: Click outside the payment sheet or press Escape.
• Apple Pay: Cancel the payment sheet.

Verify that your onCancel callback fires (if configured in methodConfig.global).

Always verify payments on your backend before fulfilling orders. The frontend callbacks can be manipulated by users.

Test these critical security checks:

1. Transaction exists: Query the PXP API with systemTransactionId to verify the transaction exists.
2. Amount matches: Verify the transaction amount matches your expected amount.
3. Transaction succeeded: Check that the transaction state is Authorised or Captured.
4. Prevent replay attacks: Ensure the same transaction can't be processed twice.

Example verification:

// Backend verification endpoint
app.post('/api/verify-payment', async (req, res) => {
  const { systemTransactionId, merchantTransactionId } = req.body;
  
  // Get expected amount from your database
  const order = await db.orders.findOne({ merchantTransactionId });
  const expectedAmount = order.amount;
  
  // Query PXP API to verify transaction
  const transaction = await unityApi.getTransaction(systemTransactionId);
  
  // Verify transaction is successful
  if (transaction.state !== 'Authorised' && transaction.state !== 'Captured') {
    return res.json({ success: false, error: 'Transaction not authorised' });
  }
  
  // Verify amount matches
  const txnAmount = transaction.amounts?.transactionValue || transaction.amount;
  if (Math.abs(txnAmount - expectedAmount) > 0.01) {
    return res.json({ success: false, error: 'Amount mismatch' });
  }
  
  // Check for duplicate processing
  const alreadyProcessed = await db.transactions.findOne({ systemTransactionId });
  if (alreadyProcessed) {
    return res.json({ success: true, orderId: alreadyProcessed.orderId });
  }
  
  // Process order
  const orderId = await fulfillOrder(order);
  await db.transactions.create({ systemTransactionId, orderId });
  
  res.json({ success: true, orderId });
});

Before going live, verify the following:

• Change environment to production
• Use production API credentials
• Verify correct ownerId and ownerType
• Confirm currency and amount formatting

• Test all enabled payment methods
• Test successful payments
• Test failed payments and error handling
• Test user cancellation scenarios
• Verify backend verification works correctly

• Backend verification implemented
• Replay attack prevention in place
• HTTPS enabled on all pages
• No sensitive data logged

• Mobile responsive design tested
• Loading states display correctly
• Success page implemented
• Error messages are user-friendly