Customization

We provide customizations for embedding the UX component into your project. These will allow you to build them in a manner that meets your design requirements.

Possible customizations:

Custom Style to give you full support in replicating your design

Hide/Unhide secretto allow you to hide details from our end

Masked card number to give your own custom masked card number format

Custom element IDs to give custom element IDs rather than using our default "striga"

Multi element supports to help you show multiple secret in one secure instance

Callback to give you a response when a secret is rendered with success or error

Custom Style

You can customize the UX component using the' style' key.

const customStyle = {
  "word-spacing": "4px",
  "font-size": "20px",
  "letter-spacing": "2px",
  color: "#fff",
  "text-align": "center",
  "font-weight": "bold",
  "@font-face": {
    "font-family": "Space Mono",
    "font-style": "normal",
    src:
      'url(https://fonts.googleapis.com/css2?family=Space+Mono:ital,[email protected],400;0,700;1,400;1,700&display=swap) format("woff2")',
    "unicode-range": "U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116"
  },
  "font-family": '"Space Mono", monospace'
};

 StrigaUXPlugin.render(
    "cardNumber",
    {
      cardId: <CARD_ID>,
      style: customStyle
    }
  );

Hide/Unhide secret

Using the hideData key, you can mask the card number.

StrigaUXPlugin.render(
    "cardNumber",
    {
      cardId: <CARD_ID>,
      hideData: Boolean,
    }
  );

Custom masked card number

Using the maskedCardNumber key, you can provide a custom mask format.

StrigaUXPlugin.render(
    "cardNumber",
    {
      cardId: <CARD_ID>,
      hideData: Boolean,
      maskedCardNumber: "487130******1480",
    }
  );

Custom element IDs

Using the id key, you can provide an element id.

Default value id "striga"

StrigaUXPlugin.render(
    "cvv",
    {
      id: "cvv", // element id <span id="cvv" /> 
      cardId: <CARD_ID>,
    }
  );

Rendering multiple elements at once

You can also render multiple components such as the card number and the CVV using the create instance.

Please note that you must await each render method if you are rendering multiple elements.

StrigaUXPlugin.create('<UI_SECRET>', { applicationId: '<APPLICATION_ID>' })

await StrigaUXPlugin.render(
    "cvv",
    {
      id: "cvv", // element id <span id="cvv" /> 
      cardId: <CARD_ID>,
    }
  );

await StrigaUXPlugin.render(
    "cardNumber",
    {
      id: "card_number", // element id <span id="card_number" /> 
      cardId: <CARD_ID>,
    }
  );

Callback

The callback will provide you with a response when the secrets are mounted in the elements.

The response will give you either success or error

StrigaUXPlugin.render(<KEY>, <OPTIONS>, <CALLBACK>)

StrigaUXPlugin.render(
    "cardNumber",
    {
      cardId: CARD_ID,
      hideData: Boolean,
      style: fontStyle
    },
    (data) => {
      console.log("UX CardNumber status", data); 
    }
  );