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
1. Production URL: https://direct-embed.branchapp.com/card-widget.html
2. 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