TripLink Embedded Card

TripLink Embedded Card lets you show virtual card details in your own product, without taking on PCI scope. TripLink remains the regulated issuer and PCI payment provider — issuing, funding, and protecting card data on your behalf. A few lines of JavaScript is enough to embed a TripLink-hosted card into any page.

Install

npm install @triplinkintl/embedded-card

Usage

import TripLink from '@triplinkintl/embedded-card';

const { destroy } = TripLink.renderCard({
  container: 'card-root',
  ephemeralKey: auth.ephemeralKey,
  cardLid: auth.cardLogId,
  customerId: auth.customerId,
  source: 'blink',
  locale: 'zh-HK',
  env: 'UAT',
  styles: {
    root: { backgroundColor: '#0b1f3a' },
  },
  onSuccess: ({ requestId }) => {
    console.log('card rendered', requestId);
  },
  onError: ({ resultCode, message, requestId }) => {
    console.error(resultCode, message, requestId);
  },
});

// later
destroy();

<div id="card-root" style="width: 360px; height: 220px;"></div>

Named export renderCard is equivalent to TripLink.renderCard.

Options

| Field | Type | Required | Default | Description | | -------------- | ---------------------------------------------- | -------- | ------- | ------------------------------------------- | | container | string | yes | — | DOM container id | | ephemeralKey | string | yes | — | Ephemeral key from TripLink | | cardLid | string | yes | — | Card id (cardLogId) from TripLink | | customerId | string | yes | — | Customer id from TripLink | | source | string | yes | — | Partner source. Apply to TripLink first. | | locale | string | no | en-US | BCP 47 language tag, e.g. en-HK, zh-HK | | env | FAT / UAT / PROD | no | PROD | PROD is production. Before integration testing, ask TripLink which test environment to use (FAT or UAT). | | timeout | number | no | 30000 | Init timeout in milliseconds | | styles | { root? } | no | — | Card styles sent to the iframe via CardInit | | onSuccess | ({ requestId }) => void | no | — | Fired when the iframe reports init success | | onError | ({ resultCode, message, requestId }) => void | no | — | Fired on validation / load / init / timeout errors |

Result codes

| resultCode | When | | --------------------- | ----------------------------------------- | | BROWSER_VERSION_LOW | Browser is too old | | INVALID_PARAMS | Missing or invalid SDK arguments | | CONTAINER_NOT_FOUND | No DOM node with the given container id | | IFRAME_LOAD_FAILED | Iframe failed to load | | CARD_INIT_FAILED | Iframe reported card init failure | | TIMEOUT | Card init did not finish within timeout |