CardVault Test Harness

Internal integration test environment — simulates a merchant page embedding the payment widget.

Widget:

Form: Not ready

API: Checking…

Widget URL:

API URL: loading…

URLs are pre-configured — clients do not need to set these. To change environments, update config.js.

Authentication

Bearer Token To test widget validation: paste any token (valid, expired, or malformed) and click Load Widget — the widget validates the token and fires cardvault:error if invalid.
To authenticate normally: obtain a token via docs/http/cardvault-test.http and click Authenticate.

💡 Quick Token Setup:

Open docs/http/cardvault-test.http
Run the first request (Token Request)
Copy the access_token value
Paste it in the field above and click Authenticate

Order Context

Use JSON input mode

Order ID

Amount (cents)

Currency

Vendor ID

Customer ID

Exclude card brands (optional — checked brands are blocked)

Visa Mastercard American Express Discover

Selected brands will be passed as excludeCards in the order context.

Request Tracing (optional — for correlating requests with OpenTelemetry traces)

X-Correlation-ID

Sent as X-Correlation-ID header. The same value will appear in the response correlationId field and as the correlation_id span attribute in OTel.

In-Widget Submit Button (configures the submit button rendered inside the card form)

Show button inside widget When unchecked, only the parent-window Submit Payment button is active (default).

Button Label

Background Color

Text Color

Initially disabled For testing scenarios where button is enabled later.

Test card numbers (pass Luhn check):
Visa 4532015112830366 | Mastercard 5425233430109903 | Amex 374245455400126 | Discover 6011111111111117

Event Log

How a client integrates (reference)

One <script> tag. Mount the widget, then listen for events on the container element.

<!-- 1. Single SDK script (config + loader combined) -->
<script src="https://widget.cardvault.realpage.com/cardvault-sdk.js"></script>

<!-- 2. Payment container -->
<div id="payment-widget"></div>

<script>
  CardVault.mount('#payment-widget', {
    bearerToken:   '<JWT from Unified Identity Platform>',
    correlationId: '<optional — your X-Correlation-ID for OTel tracing>',
    orderContext: {
      orderId:    'ORD-12345',
      amount:     25000,   // cents ($250.00)
      currency:   'USD',
      vendorId:   'VENDOR-123',
      customerId: 'CUST-001',
    },
  });

  // Listen for events on the container element
  const container = document.getElementById('payment-widget');

  container.addEventListener('cardvault:success', (e) => {
    hideError();
    // Send e.detail.encryptedPayload + keyVersion to your server
    showConfirmation(e.detail.last4Digits, e.detail.cardType);
  });
  container.addEventListener('cardvault:error', (e) => {
    // VALIDATION_ERROR: inline form errors are already shown by the SDK
    // All other errors: show a notification on your page
    if (e.detail.errorCode === 'VALIDATION_ERROR') {
      showError('Please review the highlighted errors in the card form.');
    } else {
      showError(e.detail.error);
    }
  });
  container.addEventListener('cardvault:cancel', () => {
    hideError();
  });
</script>