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
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);
}
);