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

# Paramètres de Alal.js

> La méthode `.bootstrap()` de Alal.js nécessite un objet de configuration, qui définit les attributs et les comportements des iframes. 

## Paramétres de la méthode `.bootstrap()`

### clientAccessToken

`clientAccessToken` est le jeton qui permet d’accéder à la carte spécifiée, elle expire au bout de 24 heures. [Get Access Token Card API Reference](/api-reference/cards/get-access-token-card)

<ParamField body="clientAccessToken" type="string" required>
  Jeton d'identification de la carte
</ParamField>

### showPan

`showPan` permet d'afficher le numéro de carte

<ParamField body="cardPan" type="Object" required>
  <Expandable title="properties">
    <ParamField body="domId" type="string" required>
      Associe le numéro de carte à l'élément div correspondant.
    </ParamField>

    <ParamField body="styles" type="Object">
      Permet de modifier le CSS associé au numéro de carte. \
      **Valeurs acceptées**: `color`, `font-family`, `font-size`, `font-weight`,
      `background`
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="copyCardPan" type="Object" required>
  <Expandable title="properties">
    <ParamField body="domId" type="string" required>
      Associe le numéro de carte à l'élément div correspondant.
    </ParamField>

    <ParamField body="onCopySuccess" type="Function">
      Exécuté en cas de succès de la copie du numéro de carte.
    </ParamField>

    <ParamField body="onCopyFailure" type="Function">
      Exécuté en cas d'échec de la copie du numéro de carte.
    </ParamField>

    <ParamField body="styles" type="Object">
      Permet de modifier le CSS associé au numéro de carte. \
      **Valeurs acceptées**: `color`,
      `background`
    </ParamField>
  </Expandable>
</ParamField>

### showExp

`showExp` permet d'afficher la date d'expiration de la carte

<ParamField body="cardExp" type="Object" required>
  <Expandable title="properties">
    <ParamField body="domId" type="string" required>
      Associe la date d'expiration de carte à l'élément div correspondant.
    </ParamField>

    <ParamField body="styles" type="Object">
      Permet de modifier le CSS associé à la date d'expiration. \
      **Valeurs  acceptées**: `color`, `font-family`, `font-size`, `font-weight`,
      `background`
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="copyCardExp" type="Object" required>
  <Expandable title="properties">
    <ParamField body="domId" type="string" required>
      Associe le numéro de carte à l'élément div correspondant.
    </ParamField>

    <ParamField body="onCopySuccess" type="Function">
      Exécuté en cas de succès de la copie du numéro de carte.
    </ParamField>

    <ParamField body="onCopyFailure" type="Function">
      Exécuté en cas d'échec de la copie du numéro de carte.
    </ParamField>

    <ParamField body="styles" type="Object">
      Permet de modifier le CSS associé au numéro de carte. \
      **Valeurs acceptées**: `color`,
      `background`
    </ParamField>
  </Expandable>
</ParamField>

### showCvv

`showCvv` permet d'afficher la showCvv de la carte

<ParamField body="cardCvv" type="Object" required>
  <Expandable title="properties">
    <ParamField body="domId" type="string" required>
      Associe le CVV de carte à l'élément div correspondant.
    </ParamField>

    <ParamField body="styles" type="Object">
      Permet de modifier le CSS associé au CVV. \
      **Valeurs acceptées**: `color`, `font-family`, `font-size`, `font-weight`, `background`
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="copyCardExp" type="Object" required>
  <Expandable title="properties">
    <ParamField body="domId" type="string" required>
      Associe le numéro de carte à l'élément div correspondant.
    </ParamField>

    <ParamField body="onCopySuccess" type="Function">
      Exécuté en cas de succès de la copie du numéro de carte.
    </ParamField>

    <ParamField body="onCopyFailure" type="Function">
      Exécuté en cas d'échec de la copie du numéro de carte.
    </ParamField>

    <ParamField body="styles" type="Object">
      Permet de modifier le CSS associé au numéro de carte. \
      **Valeurs acceptées**: `color`,
      `background`
    </ParamField>
  </Expandable>
</ParamField>

## Example

<CodeGroup>
  ```html index.html theme={null}
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>

    <div id="custom-card-pan"></div>
    <div id='copy-pan-container'></div>
    
    <div id="custom-card-exp"></div>
    <div id='copy-exp-container'></div>

    <div id="custom-card-cvv"></div>
    <div id='copy-cvv-container'></div>
    <script src="https://www.sandbox.saalal.com/js/1.0.1/alal.js"></script>
    <script src="/app.js"></script>
  <body>
  </html>
  ```

  ```javascript app.js theme={null}
  // Usage of the library with showPan and its options
  alal.bootstrap({
    clientAccessToken: "live_MvlIyIQZXyaacuuUSajfx1le0CnKTeUgrUF1d0aEi1nEDGcbWB",
    showPan: {
      cardPan: {
        domId: "custom-card-pan",
        styles: {
          "color": "green",
          "font-family": "monospace",
          "font-size": "10px",
          "font-weight": "bold",
          "background": "transparent"
        },
      },
      copyCardPan: {
        domId: "copy-pan-container",
        onCopySuccess: copyCardPanSuccess = () => alert("Copied PAN!"),
        onCopyFailure: copyCardPanFailure = error => console.error(error),
        styles: {
          color: "white",
          "background": "red"
        }
      }
    },
    showExp: {
      cardExp: {
        domId: "custom-card-exp",
        styles: {
          "color": "green",
          "font-family": "monospace",
          "font-size": "10px",
          "font-weight": "bold",
          "background": "transparent"
        },
      },
      copyCardExp: {
        domId: "copy-exp-container",
        onCopySuccess: copyCardPanSuccess = () => alert("Copied Exp!"),
        onCopyFailure: copyCardPanFailure = error => console.error(error),
      }
    },
    showCvv: {
      cardCvv: {
        domId: "custom-card-cvv",
        styles: {
          "color": "green",
          "font-family": "monospace",
          "font-size": "10px",
          "font-weight": "bold",
          "background": "transparent"
        },
      },
      copyCardCvv: {
        domId: "copy-cvv-container",
        onCopySuccess: copyCardPanSuccess = () => alert("Copied CVV!"),
        onCopyFailure: copyCardPanFailure = error => console.error(error),
      }
    },
    callbackEvents: {
      onSuccess: () => {
        console.log("Success!")
      },
      onFailure: error => {
        console.error(error);
      }
    }
  });
  ```
</CodeGroup>