Wolfe Card Linking UI
Introduction
Wolfe provides partners with a prebuilt Card-Linking UI component for gift recipients to manage all necessary operations related to linking a gift to a payment card.
The general integration flow works is:
Set-Up
Place script tag on all pages that will render the Card Linking UI
Add DIV component to page
Runtime
Upon page request, partner create session with server-to-server call on partner server via Wolfe API. See details below.
After page load, call to ready the UI for user interaction
What are you getting?
Below depicts a simple gift being linked to a redemption account.
Environments
Wolfe provides two environments to integrate the Link UI components.
Sandbox
The sandbox URL is:
Production
The production URL is:
Contact Wolfe to create sandbox and/or production environment credentials.
Session Creation
A session connects you with the Wolfe API and the gift. These sessions expire after 15 minutes. Session create API calls must be made server-to-server to protect the secret partner key and company ID.
Once a session expires, the partner determines how a new session is generated. An event is emitted from the UI (noted below) so the partner can listen and offer a message to the user indicating the session has expired and prompt the user to refresh the page.
Partner Gift Page Assets
To include the UI components on your site, you must include 2 assets:
Our script
Sandbox URL:
Production URL:
A DIV with data attribute
Depending on your options, the UI will be displayed inside the DIV or as a dialog.
Instantiate
Upon page ready, call
Include a settings parameter. All settings are listed below.
If you are using :
you will need to listen for componentReady event. Once this fires, the partner parent webpage will enable a button which when clicked, will open the dialog.
Upon button click, call
Instantiate Example
UI Configuration Options
Session Id
* Required
The session ID generated connecting the partner, API, and gift
Property:
Company Id
* Required
The company ID provided from Wolfe
Property:
Instance Scope
This will determine the scope of the Link component.
Property:
Valid values:
Default:
Variant
Describes the appearance/interaction with the UI Link components.
Property:
Valid values:
Default:
Include Gift Details
Option to include the Merchant Name, Original Gift Balance and Remaining Gift Balance
Property:
Default:
Exclude Success Screens
Option to exclude certain Success Screens
Property:
Valid values:
Default:
Success Screen Button label
Option to change the button text on the success screen after linking a gift.
Property:
Default:
Support Email
* Required
The partner support email provided to recipients in the card-linking disclaimer text.
Property:
User Defined Field - Primary Color
User Defined Field: The color used throughout the UI Link components as the primary color.
Property:
Valid values: any 6 character hex code
Example:
User Defined Field- Privacy Policy URL
* Required
The privacy policy URL used for legal disclaimers' text
Property:
User Defined Field- Terms of Service URL
* Required
The terms of service URL used for legal disclaimers' text
Property:
Events
The Card-Linking UI emits various events so partners can direct user actions as desired.
Example:
componentReady
This event fires after is called and the UI is ready.
sessionExpired
This event fires for any time a user request to API results in 401 Not Authorized. This can happen if the session has timed out after 15 minutes, or the user has taken certain actions which invalidate the session, having it marked as “used”. This event is useful for partners to handle this situation, where the partner needs to generate a new valid session and re-instantiate the UI.
dialogOpen
This event fires every time the dialog opens
dialogClose
This event fires every time the dialog closes.
deactivateCardSuccessClose
This event fires every time the “Deactivate Card Success” page is requested to be closed via button click.
cardLinkErrorClose
This event fires every time the “Card Link Error” page is requested to be closed.
cardLinkSuccessClose
This event fires every time the “Card Link Success” page is requested to be closed.
cardLinked
This event fires every time the card is successfully linked
cardUnlinked
This event fires every time the card is successfully unlinked
cardUnenrolled
This event fires every time the card is successfully unenrolled/deleted
error
This event fires as a general error event for API errors
Exposed methods
This method will load the iframe inside any DIV with data attribute
This method will open the dialog if setting is set
This method will reset all iframes and event listeners for content inside the DIV