Render

The render method is used to display the card details in the iframe. It takes four parameters:

cardNumber, cvv, 3ds or pin: The type of card detail to display.

Options: An object containing the card details and other options.

Callback: A function that is called when the iframe is loaded or an error occurs.

The options object can include the following properties:

cardId: The unique identifier for the card.

hideData: A boolean value indicating whether to hide sensitive data.

authToken: The authentication token for the user.

maskedCardNumber: The masked card number to display.

style: An object containing CSS styles to apply to the iframe.

enableCardNumberCopy: A boolean value indicating whether the card number should be allowed to be copied to clipboard. If set to true, a copy button will be displayed.

copyButtonSvgIcon: An SVG icon that will be used for the copy button. This property only has effect if enableCardNumberCopy is set to true. The value should be a string containing the SVG markup.

Note: Create separate render methods to render each of the sensitive components to be displayed, by creating a new instance of StrigaUXPlugin

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

Card number

StrigaUXPlugin.render("cardNumber", {cardId: '<CARD_ID>', authToken: '<CARD_AUTH_TOKEN>'})

CVV

StrigaUXPlugin.render("cvv", {cardId: '<CARD_ID>', authToken: '<CARD_AUTH_TOKEN>'})

Card PIN

Only activated PHYSICAL card has a card PIN.

StrigaUXPlugin.render("pin", {cardId: '<CARD_ID>', authToken: '<CARD_AUTH_TOKEN>'})

3D Secure Password

StrigaUXPlugin.render("3ds", {cardId: '<CARD_ID>', authToken: '<CARD_AUTH_TOKEN>'})