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 (* indicates required option)
Gift ID
* Required
The gift ID
Property name:
Company ID*
* Required
The company ID provided from Wolfe
Property name:
Session Id*
* Required
The session ID generated connecting the partner, API, and gift
Property name:
Variant
Describes the appearance/interaction with the UI Link components.
Property name:
Valid values:
Default:
Card Input Variant
Choose the option for the credit card input whether its a selection dropdown or radio buttons.
Property name:
Valid values:
Default:
Include Gift Details
Option to include the Merchant Name, Original Gift Balance and Remaining Gift Balance
Property name:
Default:
Exclude Success Screens
Option to exclude certain Success Screens
Property name:
Valid values:
Default:
Success Screen Button label
Option to change the button text on the success screen after linking a gift.
Property name:
Default:
Scope
This will determine the scope of the Link component.
Property name:
Valid values:
Default:
User Defined Field - Support Email*
* Required
The partner support email provided to recipients in the card-linking disclaimer text.
Property name:
User Defined Field - Label Placement
User Defined Field: The option to include field input labels inside the field border, or outside and above the field border.
Property name:
Default:
Valid values:
User Defined Field - Primary Color
User Defined Field: The color used throughout the UI Link components as the primary color.
Property name:
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 name:
User Defined Field - Terms of Service URL*
* Required
The terms of service URL used for legal disclaimers' text
Property name:
User Defined Field - Body Font Family
The font family used for body text throughout
Property name:
Default:
Valid values:
User Defined Field - Heading Font Family
The font family used for headings throughout
Property name:
Default:
Valid values:
User Defined Field - Legal Font Family
The font family used for legal text throughout
Property name:
Default:
Valid values:
User Defined Field - Partner Company Name
The partner name used throughout the Link Component
CSS
Test Data
To test in sandbox environment, you can use this data:
Card number
4242-4242-4242-4242
Name on card
John Doe
Card expiration
12/26
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