Embedded Direct Card Widget iFrame
You can provide the ability for users to receive disbursements directly to a debit card, instead of the Branch Wallet, by embedding the Branch-customized TabaPay SSO Card Widget. This will let a user securely input card details, returning a token to access the card without storing PII.
- Add HTML to contain the iFrame:
<div><iframe id="card-widget"></iframe></div>
- Add JavaScript to load the Card Widget into the iFrame
- Production URL: https://direct-embed.branchapp.com/card-widget.html
- Sandbox URL: https://direct-embed-sandbox.branchapp.com/card-widget.html
// The URL below is for the Branch Sandbox, choose the production or sandbox URL accordingly
var iFrameURL = "https://direct-embed-sandbox.branchapp.com/card-widget.html";
document.getElementById("card-widget").src = iFrameURL;
- Create a JavaScript function to extract the Card Widget iFrame data upon completion
function extractCardWidgetData( event ) {
if ( event.data != "Close" ) {
if ( event.data.slice( 0, 7 ) == "Error: " ) {
// Error
} else {
var asData = event.data.split( "|" );
if ( asData.length == 9 ) {
// asData[ 0 ] contains the First Name
// asData[ 1 ] contains the Last Name
// asData[ 2 ] contains the Card BIN+Last4
// asData[ 3 ] contains the expiration in YYYYMM format
// asData[ 4 ] contains the token
// asData[ 5 ] contains the address
// asData[ 6 ] contains the city
// asData[ 7 ] contains the state 2 char ISO code
// asData[ 8 ] contains the zip code
// Call Branch "Add External Card for Employee" endpoint using extracted data here
} else {
// Data Error
}
}
} else {
// Close or Cancel
}
}
- Use JavaScript to bind the data extraction function to a listener on the Card Widget iFrame completion event
window.addEventListener( "message", extractCardWidgetData, false );
- Call the Branch Add External Card for Employee endpoint inside the listener function, supplied with the extracted user details
Example iFrame Card Widget
Updated 11 days ago