@brexhq/brex-js

@brexhq/brex-js

A JavaScript SDK for integrating Brex issuing card elements into web applications. This library provides secure, iframe-based components for displaying sensitive card information.

Quick Start

import Brex from '@brexhq/brex-js';

// Initialize Brex
const brex = Brex();
const elements = brex.elements();

// Create a card number display element
const cardNumber = elements.create('issuingCardNumberDisplay', {
  issuingCard: 'your_issuing_card_id',
  ephemeralKeySecret: 'your_ephemeral_key'
});

// Mount it to a container
cardNumber.mount('#card-number-container');

// Listen for events
cardNumber.on('complete', () => {
  console.log('Card number is ready');
});

Available Elements

The library provides several elements for displaying card information:

• issuingCardNumberDisplay: Displays the card number
• issuingCardCvcDisplay: Displays the CVC/security code
• issuingCardExpiryDisplay: Displays the expiration date
• issuingCardPinDisplay: Displays the PIN
• issuingCardCopyButton: Creates a button to copy card details

Styling Elements

You can customize the appearance of elements using supported style properties:

const element = elements.create('issuingCardNumberDisplay', {
  issuingCard: 'your_issuing_card_id',
  ephemeralKeySecret: 'your_ephemeral_key',
  style: {
    fontSize: '16px',
    fontFamily: 'Arial, sans-serif',
    color: '#333333',
    fontWeight: 'normal',
    letterSpacing: 'normal',
    lineHeight: '1.5',
    padding: '10px'
  }
});

// Update styles later
element.update({
  fontSize: '18px',
  color: '#000000'
});

Copy Button

The copy button element allows users to copy card details:

const copyButton = elements.create('issuingCardCopyButton', {
  issuingCard: 'your_issuing_card_id',
  ephemeralKeySecret: 'your_ephemeral_key',
  toCopy: 'number' // 'number', 'cvc', 'expiry', or 'pin'
});

copyButton.mount('#copy-button-container');
copyButton.on('copied', () => {
  console.log('Card number copied');
});

Event Handling

All elements support the following events:

• complete: Fired when the element is fully loaded
• loading: Fired when the element is loading
• error: Fired when an error occurs
• copied: Fired when content is copied (for copy buttons)

element.on('complete', () => {
  console.log('Element is ready');
});

element.on('error', () => {
  console.log('Something went wrong');
});

Complete Example

Here's a complete example showing how to display all card information:

import Brex from '@brexhq/brex-js';

const brex = Brex();
const elements = brex.elements();

// Common configuration
const config = {
  issuingCard: 'your_issuing_card_id',
  ephemeralKeySecret: 'your_ephemeral_key',
  style: {
    fontSize: '16px',
    fontFamily: 'Arial, sans-serif',
    color: '#333333'
  }
};

// Create elements
const cardNumber = elements.create('issuingCardNumberDisplay', config);
const cardCvc = elements.create('issuingCardCvcDisplay', config);
const cardExpiry = elements.create('issuingCardExpiryDisplay', config);
const cardPin = elements.create('issuingCardPinDisplay', config);

// Mount elements
cardNumber.mount('#card-number-container');
cardCvc.mount('#card-cvc-container');
cardExpiry.mount('#card-expiry-container');
cardPin.mount('#card-pin-container');

// Add copy buttons
const copyNumber = elements.create('issuingCardCopyButton', {
  ...config,
  toCopy: 'number'
});
copyNumber.mount('#copy-number-button');

// Event handling
cardNumber.on('complete', () => console.log('Card number ready'));
copyNumber.on('copied', () => console.log('Card number copied'));

Required HTML:

<div id="card-number-container"></div>
<div id="copy-number-button">Copy</div>
<div id="card-cvc-container"></div>
<div id="card-expiry-container"></div>
<div id="card-pin-container"></div>