​
Overview

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

​
Payment Request

{
  "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:
FieldValuePurpose
browserAcceptHeaderapplication/json, text/plain, */*Browser accept header
browserColorDepth24Screen color depth
browserIP127.0.0.1Customer’s IP address
browserJavaEnabledfalseJava support status
browserJavascriptEnabledtrueJavaScript support status
browserLanguageen-USBrowser language setting
browserScreenHeight1080Screen height in pixels
browserScreenWidth1920Screen width in pixels
browserTZ300Timezone offset in minutes
browserUserAgentChrome 126 stringFull browser user agent

​
Implementation

​
JavaScript Example

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

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