Web

How it works

The Imprint Web SDK renders the application experience inside an <iframe> that the SDK injects into the container on your page. Everything the cardholder sees and interacts with — the application flow, and any redirect-based flows such as Account Linking — is loaded within that iframe.

Because the experience runs inside an iframe, every page the cardholder is redirected to must be allowed to render in a frame. If any page in a redirect chain returns an X-Frame-Options: DENY (or SAMEORIGIN) header, or a Content-Security-Policy frame-ancestors directive that excludes Imprint’s origin, the browser will refuse to display it and the flow will break — typically with a blank frame and no error the SDK can surface.This most commonly affects the Account Linking OAuth flow, where the cardholder is redirected to your login/authorization page. See Account Linking → Framing requirements for the exact requirements.

This framing constraint applies only to the Web SDK. The iOS and Android SDKs present the experience in a native view (not an iframe), so X-Frame-Options / CSP frame-ancestors headers do not affect them.

Installation

Load the Imprint script

Include the Imprint script either at index.html or the page on which you plan on loading the Imprint application. It must always be loaded directly from the URL below, rather than included in a bundle or hosted yourself.

<script src="https://apply.imprint.co/imprintsdk.js"></script>

Add a container to your page

Create a container for the Imprint application.

<div id="imprint-ui" />

#imprint-ui {
  height: 900px;
  width: 700px;
}

Imprint application requires a minimum width of 375px.

Display the card application experience

The script exposes the global Imprint object. Imprint.create() initializes the UI flow and accepts a configuration object with an optional callback function and additional data fields.Imprint.create() needs to be initialized with a client_secret (generated by Creating a Customer Session).The configuration object accepts an optional onCompletion callback function, which is triggered at the end of the application flow in different scenarios. Please refer to the full list of onCompletion parameter options below.Example Implementation:

Imprint.create({
 client_secret: "QzMyNzg4QzgtNEUwOS00QkU4LThDMjEtMkU5OUQ3QzkwRDhGCg==",
 selector: "#imprint-ui", // reference to your container
 onCompletion: (result, data) => {
   switch (result) {
     case "OFFER_ACCEPTED":
       // Implement logic for new approved cardholders
       console.log("Offer accepted, data:", data);
       break;
     case "REJECTED":
       // Implement logic for rejected applications
       console.log("Rejected, data:", data);
       break;
     case "IN_PROGRESS":
       // Implement logic for abandoned applications
       console.log("Abandoned, data:", data);
       break;
     case "ERROR":
       // Implement error handling
       console.log("Error occurred:", data);
       break;
   }
 }
});

Reference

Imprint.create() ~ Configuration Object Fields:

PROPERTY NAME	REQUIRED	TYPE	DESCRIPTION
`client_secret`	TRUE	String	Generated through Create Customer Session endpoint
`selector`	FALSE	String	DOM element to load the application. If not provided, Imprint will try to find a container with `id="imprint-ui"` (`#imprint-ui` selector)
`onCompletion`	FALSE	String	Callback function that accepts a `result` and `data` parameters (see all possible values below)
`referralCode`	FALSE	String	For use with Imprint’s Referral Program
`offerConfigUUID`	FALSE	String	Identifier for specific reward offer in the referral system

onCompletion ~ Callback result values:

ENUM	DESCRIPTION
`OFFER_ACCEPTED`	Application has been approved and credit offer accepted. New cardholder!
`REJECTED`	Application has been rejected by Imprint
`IN_PROGRESS`	Application has been exited, not completed
`ERROR`	Invalid request parameters (e.g., invalid token)

onCompletion ~ Callback data object fields:

PROPERTY NAME	TYPE	DESCRIPTION
`customer_id`	string \| null	Imprint Customer ID
`payment_method_id`	string \| null	Payment Method ID
`partner_customer_id`	string \| null	Partner Customer ID
`error_code`	string \| null	Error Code

Getting Started

Applications

Cards

Transactions

Rewards

Account Linking

Webhook Event Notifications

API Keys

Sandbox Testing

SDK Reference

How it works

Installation

Reference

​How it works

​Installation

​Reference

How it works

Installation

Reference