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>)
| Definition | Type | |
|---|---|---|
| KEY | String | cardNumbercvvpin3ds |
| OPTIONS | Object | cardIdauthTokenstylehideDataidmaskedCardNumberenableCardNumberCopycopyButtonSvgIconCheck customisation for more details. |
| CALLBACK | Function | Response Object: success or error |
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>'})