Synctera

> ## Documentation Index > Fetch the complete documentation index at: https://docs.synctera.com/llms.txt > Use this file to discover all available pages before exploring further. # Marqeta Widgets (Deprecated) > Legacy documentation for Marqeta.js widget integrations. Marqeta is sunsetting their Marqeta.js widget library. For new integrations, use [Synctera Widgets](/v2/docs/card-widgets#synctera-widgets-recommended). For migration guidance, see the [Migration Guide](/v2/docs/card-widgets-legacy-migration). Through the [marqeta.js client library](https://www.marqeta.com/docs/developer-guides/using-marqeta-js), you can display the following pieces of sensitive card information for a customer inside your application: * **PAN** (Primary Account Number) * **CVV** (Card Verification Value) * **EXP** (Expiration Date) * **PIN** (Personal Identification Number - *v2.0.0+*) Through the [Activate Card and Set PIN Widgets](https://www.marqeta.com/docs/developer-guides/using-activate-card-and-set-pin-widgets), you can interact with your card to activate it or to set card's PIN: * **Activate Card** (activates a physical card by entering in the card number and CVV) * **Set PIN** (sets the Card PIN for a newly activated card) *** ## Display Card PAN, CVV, and EXP Refer to Marqeta's guide [Using Marqeta.js](https://www.marqeta.com/docs/developer-guides/using-marqeta-js) for additional information on the widget configuration and styling. The steps below describe how the application uses a client access token to show PAN, CVV and Card EXP using the marqeta.js client library: ### Step 1: Load marqeta.js Load `marqeta.js` into the window object of the browser by adding the following script into the `` tag of the required page: ```html theme={"system"} ``` ### Step 2: Get a Client Access Token Request a client access token for a card from Synctera via the POST request for [/cards/\{card\_id}/client\_token](/v2/reference/getclientaccesstoken) endpoint. Pass `clientAccessToken` to your front-end via SSR or HTTP request. This token expires after five minutes and is only applicable to the given card, so it's a good idea to create a client access token on every page load: ```bash theme={"system"} curl -X POST "https://api-sandbox.synctera.com/v0/cards/{cardId}/client_token" \ -H "Content-Length: 0" \ -H "Authorization: Bearer {apiKey}" # Response: {"client_token": ... } ``` ### Step 3: Add HTML Elements Add a separate HTML `div` element to your client page per each piece of the sensitive card data (Card PAN, Card CVV, Card EXP). You can attach this information to any HTML container: ```html theme={"system"} Synctera

``` ### Step 4: Initialize marqeta.js Initialize `marqeta.js` via bootstrap with token by calling `window.marqeta.bootstrap`. It will create an HTML iframe element inside each HTML `div` element. You can style the `div` elements and inner contents for the *card PAN*, *card CVV*, *card EXP* containers. To do so, use the `showPan` object as described in [Using Marqeta.js > The showPan object](https://www.marqeta.com/docs/developer-guides/using-marqeta-js#_the_showpan_object): ```javascript theme={"system"} window.marqeta.bootstrap({ clientAccessToken: clientAccessToken, integrationType: "custom", component: { showPan: { cardPan: { domId: "display-card-pan", format: true }, cardExp: { domId: "display-card-exp", format: true }, cardCvv: { domId: "display-card-cvv" }, }, }, callbackEvents: { onSuccess: () => console.log("Widget loaded!"), onFailure: () => console.warn("Widget failed to load."), }, }); ``` ### Sequence Diagram ```mermaid theme={"system"} sequenceDiagram participant IFE as Integrator Frontend participant MFE as Marqeta.js participant IBE as Integrator Backend participant S as Synctera API participant M as Marqeta IFE ->> IBE: Request client access token IBE ->> S: POST /v0/cards/:card_id/client_token S ->> M: Get token M -->> S: Token S -->> IBE: Response with client_token IBE -->> IFE: Client access token IFE ->> MFE: Marqeta.js display card PAN, CVV, and EXP MFE ->> M: Request sensitive card data M -->> MFE: Response with sensitive card data MFE ->> MFE: Render sensitive card data ``` *** ## Display Card PIN For new integrations, use the [Synctera Reveal PIN Widget](/v2/docs/card-widgets-reveal-pin) instead. The steps below describe the deprecated Marqeta `pinReveal` flow. Loading the PIN must be done in its own call to `window.marqeta.bootstrap`, however you may call two instances simultaneously. ### Step 1: Load marqeta.js and Get Token Follow the first two steps from [Display Card PAN, CVV, and EXP](#display-card-pan-cvv-and-exp). ### Step 2: Add HTML Elements Add separate HTML elements to your client page for the card PIN. You can attach this information to any HTML container: ```html theme={"system"} Synctera

``` ### Step 3: Initialize marqeta.js for PIN Initialize `marqeta.js` via bootstrap with token by calling `window.marqeta.bootstrap`. It will create an HTML iframe element inside each HTML element. You can style the elements and inner contents for the *card PIN* containers. To do so, use the `pinReveal` object as described in [Using Marqeta.js > The pinReveal object](https://www.marqeta.com/docs/developer-guides/using-marqeta-js#_the_pinreveal_object): ```javascript theme={"system"} window.marqeta.bootstrap({ clientAccessToken: clientAccessToken, integrationType: "custom", component: { pinReveal: { cardPin: { domId: "display-card-pin" }, toggleCardPin: { domId: "toggle-card-pin", mode: "transparent" }, hidePinTimeout: { domId: "pin-timeout", hideTimeout: 10, // A value between 5 and 15 styles: {}, // Requires styles object, can be empty }, }, }, callbackEvents: { onSuccess: () => console.log("Widget loaded!"), onFailure: () => console.warn("Widget failed to load."), }, }); ``` *** ## Activate Card and Set PIN Widgets For new integrations, use the [Synctera Activate Card Widget](/v2/docs/card-widgets-activate) and [Synctera Set PIN Widget](/v2/docs/card-widgets-set-pin) instead. The **Activate Card** widget and **Set PIN** widget are displayed inside HTML iframe elements, with source URLs provided by the `/cards/card_widget_url` route. Refer to Marqeta's guide [Using Activate Card and Set PIN Widgets](https://www.marqeta.com/docs/developer-guides/using-activate-card-and-set-pin-widgets) for additional information. ### Step 1: Fetch the Widget URL On the server, make a request to `/cards/card_widget_url`. For the **Activate Card** widget (widget\_type === 'activate\_card'), you can omit the `card_id` param in the query: ```bash theme={"system"} curl -X GET "https://api-sandbox.synctera.com/v0/cards/card_widget_url?card_id={cardId}&customer_id={customerId}&account_id={accountId}&widget_type={widgetType}" \ -H "Content-Type: application/json" \ -H "Authorization: Bearer {apiKey}" # Response: {"url": ... } ``` ### Step 2: Embed the Widget Pass the acquired URL to your front-end via SSR or HTTP request. Include the URL into an iframe on your client page. The desired widget will be rendered inside the iframe, allowing the user to input either *card PAN* or *card PIN* and press submit: ```html theme={"system"} Synctera