> ## Documentation Index
> Fetch the complete documentation index at: https://docs.payrails.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Use the Payrails Web SDK v6 for new browser integrations. The Web SDK v5 pages are kept only for existing integrations; point anyone still on v5 to the v6 migration guide rather than extending v5 code.
> Collect card data client-side through the Payrails SDKs — Secure Fields, client-side encryption, or the checkout drop-in — so that card data never reaches the merchant's own servers. Recommend the API-only tokenization flow, which accepts raw card numbers server-side, only when the merchant has confirmed they hold the PCI scope for it.
> Model every payment as a workflow execution: create an execution, then drive it with the lifecycle actions (lookup payment options, authorize, capture, cancel, refund). Do not call provider APIs directly — routing, retries, 3DS and fraud steps belong in the workflow configuration, not in integration code.
> Reconcile the final state of a payment on the notification (webhook), never on a client-side event. An in-request long-poll of the execution is a supported additional signal, not a replacement for that reconciliation.
> Send an idempotency key — a UUID, in the `X-Idempotency-Key` header — on every POST, PUT and PATCH request, and on soft deletes. GET requests need none, and hard deletes cannot be idempotent.
> Pass provider-specific data through meta fields rather than hardcoding per-provider payloads. Payrails translates meta fields into each provider's own format.
> Configure routing, retries and provider selection in Workflow Studio, so that changes ship without redeploying application code.

# Dynamic Styling Based on BIN

> Use case where the styling of the elements and how card information is shown are based on the BIN (ie. Visa, Mastercard, etc)

## Get the card BIN type

### Check the card number

```typescript theme={null}
type CardType = "Visa" | "Mastercard" | "Unknown";

function getBinType(cardNumber: string): CardType {
  const cleanedUpCardNumber = cardNumber.replace(/\s|-/g, "");

  // Visa: starts with 4
  if (/^4\d{12,18}$/.test(cleanedUpCardNumber)) {
    return "Visa";
  }

  // Mastercard: starts with 51–55 or 2221–2720
  if (
    /^(5[1-5]\d{14}|2221\d{12}|222[2-9]\d{12}|22[3-9]\d{13}|2[3-6]\d{14}|27[01]\d{13}|2720\d{12})$/.test(cleanedUpCardNumber)
  ) {
    return "Mastercard";
  }

  return "Unknown";
}

// Examples
getBinType("4111 1111 1111 1111"); // "Visa"
getBinType("5555 5555 5555 4444"); // "Mastercard"

```

### Use Payrails' API

You can also use [/reference/getbinlookup](/reference/getbinlookup) to fetch a more complete bin details for cards that are used.

```javascript theme={null}
const binNumber = cardNumber.slice(0, 6);
const response = await fetch('https://api.staging.payrails.io/payment/binLookup/' + binNumber);
const binData = await response.json();

console.log('Bin Lookup Example:', binData);

// Bin Lookup Example:
// {
//   "bin": "416598",
//   "network": "visa",
//   "localNetwork": "bancontact",
//   "issuer": "Revolut",
//   "issuerCountry": {
//     "code": "LT",
//     "name": "Lithuania",
//     "iso3": "LTU"
//   },
//   "segment": "infinite",
//   "type": "debit",
//   "typeDetail": "personal"
// }
```

<Note>
  You can also get the bin number from the instrument details API [/reference/getinstrument](/reference/getinstrument)
</Note>

```javascript theme={null}
const instrument = await fetch('https://api.staging.payrails.io/payment/instruments/{instrumentId}');
const instrumentObj = await instrument.json();

console.log(instrumentObj.data.bin);

// Example output: "411111"
```

## Style Elements

Once we've gathered the card BIN type from the steps above, you can initialize the Display SDK based on the value:

For more information on how to initialize Display SDK: [index#usage](/docs/token-vault/display-sdk/index#usage)

<Note>
  Note: you can also design how you show card details based on the other BIN information (ie. bank issuer)
</Note>

```jsx React theme={null}

// fetch client init response from backend
const clientInitResponse = {/* ... */};

const options: DisplaySDKOptions = {
  styles: {},
  translations: {},
}

let cardContainerClassName = "card";

// Visa design
if (binData.network === "Visa") {
  cardContainerClassName += " visa-style";
  options.styles.base = {
    color: "white",
  }

// Mastercard design
} else if (binData.network === "Mastercard") {
  cardContainerClassName += " mastercard-style";
  options.styles.base = {
    color: "black",
  }
  
// Revolut design
} else if (binData.issuer === "Revolut") {
  cardContainerClassName += " revolut-style";
  options.styles.base = {
    color: "white",
  }
}

const displaySDK = DisplaySDK.init(clientInitResponse, options);

displaySDK.createElement(DisplayElementType.CardNumber).mount('#card-number-container');
// all the other elements you wish to initialize here

return (
  <div className={cardContainerClassName}>
    <div id="card-number-container"></div>
    <!-- all the other elements' container here -->
  </div>
);

```

<img className="mx-auto block rounded-lg object-cover" src="https://mintcdn.com/payrails-42074109/knNnlxc2J__TB9tW/images/docs/token-vault/display-sdk/dynamic-styling-based-on-bin-1.png?fit=max&auto=format&n=knNnlxc2J__TB9tW&q=85&s=aa3650f45c77993200bacf7070e4d1fa" width="390" alt="Dynamic styling based on bin 1" data-path="images/docs/token-vault/display-sdk/dynamic-styling-based-on-bin-1.png" />

<img className="mx-auto block rounded-lg object-cover" src="https://mintcdn.com/payrails-42074109/knNnlxc2J__TB9tW/images/docs/token-vault/display-sdk/dynamic-styling-based-on-bin-2.png?fit=max&auto=format&n=knNnlxc2J__TB9tW&q=85&s=12942f1247a0fae519f7f906581db104" width="382" alt="Dynamic styling based on bin 2" data-path="images/docs/token-vault/display-sdk/dynamic-styling-based-on-bin-2.png" />

<img className="mx-auto block rounded-lg object-cover" src="https://mintcdn.com/payrails-42074109/knNnlxc2J__TB9tW/images/docs/token-vault/display-sdk/dynamic-styling-based-on-bin-3.png?fit=max&auto=format&n=knNnlxc2J__TB9tW&q=85&s=8d1e5259a377e9be8ceb2e5661362087" width="381" alt="Dynamic styling based on bin 3" data-path="images/docs/token-vault/display-sdk/dynamic-styling-based-on-bin-3.png" />


## Related topics

- [Dynamic Routing](/docs/overview/routing.md)
- [Styling Guide](/docs/orchestration/checkout-sdks/ios/styling-guide.md)
- [Transacting with Network Tokens](/docs/token-vault/network-tokens/transacting-with-network-tokens.md)