Visa Receiver Directed Payouts

How to Use Receiver Directed Payouts

• Login into the VDP Portal (developer.visa.com) with Username and Password

  • After login, click on the link ‘Add New Project” on the top right had corner
  • A dashboard will popup where information for the 2 fields below are provided:
    • Project Name:
    • Project Description:
  • Select API: Visa Receiver Directed Payouts

• Go to https://developer.visa.com/pages/working-with-visa-apis/create-project

  • Follows the steps here to create a project
  • Once all the necessary steps are completed, the statuses will be updated

• To receive your certificate credentials, request a one-time password by selecting the Credentials tab and selecting one time password. The one-time passcode will be received by email.

• Once the certification is completed, reach out to your Visa Direct representative, where the URL will be provided to download the SDK for Receiver Directed Payouts.

Step 1: Load the SDK JavaScript Library

First, load the JavaScript library. This can be done using the following script:

SDK will expose VisaSecureCapture Object with multiple methods, which are explained further down this page.

Step 2: Configure the SDK

The VisaSecureCapture.configure(ClientModalSettings) function needs to be called before all the other functions. This function tells the SDK where to inject the iFrame. Provide the elementId of the HTML element where the iFrame is to be placed within.

Step 3: Initialize the Flow

The VisaSecureCapture.init({idToken, entryPoint, preferredLanguage}) function will begin the RDP flow. It requires an idToken to authenticate the client and user.

• On Init() call, the SDK will create an IFRAME and insert it into the HTML element whose ID was provided in Step 2
• After that SDK will open the RDP webpage in the created iFrame.
• ADD_CARD will take the user to the screen where they can begin adding their card information.
• VIEW_CARDS will take the user to the home page to view all the cards they have stored. On this page they can edit and delete their existing cards or add a new card.

Step 4: Event Subscription

The VisaSecureCapture.on(eventName, callbackFn(UserAliasInfo)) function allows the client to subscribe to events triggered by user actions within the RDP webpage. For example, the 'UI.ready' event is triggered when the SDK has successfully opened the UI, and the session is beginning.

Event details:

'UI.ready'

• The event is triggered when the SDK has successfully opened the UI, and the session is beginning. This event returns no data.

'UI.closed'

• The event is triggered when the user closes the webpage, or the session expires, and the window is closed automatically.

User Actions – Events letting the client know about actions made by the user in the window.

'UI.Card.added'

• User has added a new card

'UI.Card.removed'

• User has removed a card

'UI.Card.updated'

• User has updated one of the cards already uploaded

'UI.Card.made-default'

• User has made a new card their default

Step 5: Event Unsubscription

The VisaSecureCapture.off(eventName) function allows the client to unsubscribe from events.

Sample Code