Skip to main content

Integration Details

Submitting Payment Details​

To tokenize the payment details collected in the secure fields, use the submit method provided by the SecureFields SDK instance. This method validates the form and, if successful, returns a token for payment processing.

Parameters​

The submit method accepts the following parameters:

  • selectedNetwork (string): The selected card network (e.g., VISA, MASTERCARD). Required when brandSelector is disabled or not used.
  • saveToken (boolean): Whether to save the token for future use.

Example​

const result = await hostedFields.submit({
  selectedNetwork: 'VISA',
  saveToken: true
});

Card Brand Selection​

Automatic Brand Selection​

Enable automatic brand selection by setting brandSelector: true in your configuration. The SDK will handle the brand selection UI, eliminating the need to pass the selectedNetwork parameter to the submit method.

note

The brand selector displays brands in the same order as specified in the brands array configuration.

Manual Brand Selection​

For custom UI implementations, use the selectedNetwork parameter to specify the chosen brand. Subscribe to the brandDetected event to automatically receive the detected card brand and update your UI accordingly.

HTML Structure​

<select id="brand-select">
  <option value="VISA">VISA</option>
  <option value="MASTERCARD">MASTERCARD</option>
  <option value="CARTE_BANCAIRE">CARTE_BANCAIRE</option>
  <option value="AMERICAN_EXPRESS">AMERICAN_EXPRESS</option>
</select>

JavaScript Implementation​

const brandSelect = document.getElementById('brand-select');

// Listen for brand detection events
hostedFields.on('brandDetected', function ({ brands }) {
  if (brands && brands.length) {
    brandSelect.value = brands[0].name;
  }
});

// Submit with the selected brand
const selectedBrand = brandSelect.value;
const result = await hostedFields.submit({
  selectedNetwork: selectedBrand
});

Retrieving Card Details​

Retrieve form details using the form_token returned by the /forms/{form_token} endpoint in the Vault API.

API Endpoint​

GET https://api.purse-sandbox.com/vault/v1/tenants/{tenant}/forms/{form_token}

Response Format​

The API returns detailed card information in the following format:

{
  "form_token": "32oufdHG56-O87sbsaWdRtZ7Q1_ziLAx",
  "tenant_id": "123e4567-e89b-12d3-a456-426614174000",
  "created_at": "2025-10-01T20:00:00Z",
  "expires_at": "2025-10-01T20:12:00Z",
  "card": {
    "card_token": "T_PEYkrYCFRj-o6DUJhC2yRTaZ8mg5dE",
    "tenant_id": "123e4567-e89b-12d3-a456-426614174000",
    "created_at": "2025-10-01T20:00:00Z",
    "expires_at": "2027-01-01T00:00:00Z",
    "expiry_month": 12,
    "expiry_year": 2026,
    "main_brand": "VISA",
    "co_brand": "CARTE_BANCAIRE",
    "fingerprint": "YoiYDbKwqBzSJeaYim8XSkrpicp7q7oZ",
    "bin": "42424242",
    "last_four_digits": "4242",
    "truncated_pan": "424242******4242",
    "issuer_name": "Credit Agricole S.A.",
    "issuer_country": "FR",
    "billing_currency_default": "EUR",
    "consumer_type": "CONSUMER",
    "funding_source": "DEBIT"
  },
  "cvv_token": "uEq9stsNhuIJ9UDT0wY0tqy8nDmrNRRI",
  "card_holder_name": "John Doe",
  "save_token": true,
  "selected_network": "CARTE_BANCAIRE"
}

Use this data for fraud detection, risk assessment, and other business logic requirements.

3DS Authentication​

The following browser and device information is mandatory for 3DS compliance and ensures a smooth authentication process.

Required Parameters​

{
  "user_agent": "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0",
  "referrer": "https://your_shop.com/order?id=1234",
  "accept_header": "text/html",
  "color_depth": 32,
  "java_enabled": true,
  "javascript_enabled": true,
  "locale": "fra",
  "screen_height": 1200,
  "screen_width": 1600,
  "utc_time_zone": 60
}