> ## Documentation Index
> Fetch the complete documentation index at: https://docs.caibo.digital/llms.txt
> Use this file to discover all available pages before exploring further.

# Credit Card Payment Example

> Complete credit card payment request with browserInfo for 3D Secure verification

# Overview

This example demonstrates a complete credit card payment request including all required fields and browser information for 3D Secure verification.

## Payment Request

```json theme={null}
{
  "name": "Test User",
  "number": "4111111111111111",
  "expiration": "10/25",
  "cvv": "123",
  "email": "test.user@email.com",
  "phoneNumber": "1234567890",
  "address": "10 Unknown Street",
  "city": "Far Town",
  "state": "NA",
  "postalCode": "123456",
  "country": "US",
  "amount": 10.50,
  "unit": "USD",
  "originDomain": "example.com",
  "referenceId": "123-GA-456",
  "notifyUrl": "https://notify.me",
  "successUrl": "https://success.payment.com",
  "failureUrl": "http://fail.payment.com",
  "browserInfo": {
    "browserAcceptHeader": "application/json, text/plain, */*",
    "browserColorDepth": "24",
    "browserIP": "127.0.0.1",
    "browserJavaEnabled": false,
    "browserJavascriptEnabled": true,
    "browserLanguage": "en-US",
    "browserScreenHeight": "1080",
    "browserScreenWidth": "1920",
    "browserTZ": "300",
    "browserUserAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36"
  }
}
```

## Key Features

### Card Information

* **Test Card**: Visa test card number (4111111111111111)
* **Expiration**: MM/YY format (10/25)
* **CVV**: 3-digit security code (123)
* **Cardholder**: Test User name

### Customer Details

* **Contact Info**: Email and phone number for notifications
* **Billing Address**: Complete address for verification
* **Country Code**: ISO 2-letter country code (US)

### Transaction Details

* **Amount**: \$10.50 USD
* **Reference**: Custom merchant reference (123-GA-456)
* **URLs**: Notification, success, and failure callback URLs

### Browser Information (3D Secure)

The browserInfo object contains essential data for 3D Secure authentication:

| Field                      | Value                               | Purpose                    |
| -------------------------- | ----------------------------------- | -------------------------- |
| `browserAcceptHeader`      | `application/json, text/plain, */*` | Browser accept header      |
| `browserColorDepth`        | `24`                                | Screen color depth         |
| `browserIP`                | `127.0.0.1`                         | Customer's IP address      |
| `browserJavaEnabled`       | `false`                             | Java support status        |
| `browserJavascriptEnabled` | `true`                              | JavaScript support status  |
| `browserLanguage`          | `en-US`                             | Browser language setting   |
| `browserScreenHeight`      | `1080`                              | Screen height in pixels    |
| `browserScreenWidth`       | `1920`                              | Screen width in pixels     |
| `browserTZ`                | `300`                               | Timezone offset in minutes |
| `browserUserAgent`         | Chrome 126 string                   | Full browser user agent    |

## Implementation

### JavaScript Example

```javascript theme={null}
const creditCardPayment = {
  name: "Test User",
  number: "4111111111111111",
  expiration: "10/25",
  cvv: "123",
  email: "test.user@email.com",
  phoneNumber: "1234567890",
  address: "10 Unknown Street",
  city: "Far Town",
  state: "NA",
  postalCode: "123456",
  country: "US",
  amount: 10.50,
  unit: "USD",
  originDomain: "example.com",
  referenceId: "123-GA-456",
  notifyUrl: "https://notify.me",
  successUrl: "https://success.payment.com",
  failureUrl: "http://fail.payment.com",
  browserInfo: {
    browserAcceptHeader: navigator.userAgent,
    browserColorDepth: screen.colorDepth.toString(),
    browserIP: "127.0.0.1", // Get from server
    browserJavaEnabled: navigator.javaEnabled(),
    browserJavascriptEnabled: true,
    browserLanguage: navigator.language,
    browserScreenHeight: screen.height.toString(),
    browserScreenWidth: screen.width.toString(),
    browserTZ: new Date().getTimezoneOffset().toString(),
    browserUserAgent: navigator.userAgent
  }
};

// Send payment request
const response = await fetch('https://your-h2h-endpoint.com', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-API-Key': 'your-api-key'
  },
  body: JSON.stringify(creditCardPayment)
});
```

### Collecting Browser Info

```javascript theme={null}
function collectBrowserInfo() {
  return {
    browserAcceptHeader: document.querySelector('meta[http-equiv="Accept"]')?.content || "*/*",
    browserColorDepth: screen.colorDepth.toString(),
    browserIP: "127.0.0.1", // Must be collected server-side
    browserJavaEnabled: navigator.javaEnabled ? navigator.javaEnabled() : false,
    browserJavascriptEnabled: true,
    browserLanguage: navigator.language || navigator.userLanguage,
    browserScreenHeight: screen.height.toString(),
    browserScreenWidth: screen.width.toString(),
    browserTZ: new Date().getTimezoneOffset().toString(),
    browserUserAgent: navigator.userAgent
  };
}
```

## Security Considerations

### PCI DSS Compliance

* Never log or store complete card numbers
* Use HTTPS for all communications
* Implement proper input validation
* Follow PCI DSS requirements for card data handling

### 3D Secure Authentication

* Browser info is crucial for 3DS verification
* Collect accurate browser fingerprinting data
* Handle 3DS challenge flows properly
* Test with different browsers and devices

## Testing

### Test Cards

* **Visa**: 4111111111111111
* **Mastercard**: 5555555555554444
* **American Express**: 378282246310005

### Test Scenarios

1. **Successful Payment**: Use test card with valid data
2. **Declined Payment**: Use declined test card numbers
3. **3DS Challenge**: Test 3D Secure authentication flow
4. **Invalid Data**: Test validation error handling

## Next Steps

After implementing credit card payments:

1. Test with different card types and scenarios
2. Implement proper error handling
3. Set up webhook notifications
4. Add payment status checking
5. Consider implementing digital wallets