How To Use Visa Receiver Directed Payouts

Navigate to...

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:

<script type="text/javascript" src="https://securecredentialcapture.visa.com/sdk.js"></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.

let ClientModalSettings = { type: 'IFRAME', elementId: string };
VisaSecureCapture.configure(ClientModalSettings);

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.

VisaSecureCapture.init({
apiKey: string // Client's API key
idToken: string,
preferredLanguage: 'en-us', //supported languages (ru-ru, en-us, es-es). Defaults to ru in case no value provided.
entryPoint: 'ADD_CARD' | 'VIEW_CARDS'
})

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.

VisaSecureCapture.on("UI.ready", callbackFn() => {
// perform appropriate action
})

VisaSecureCapture.on("UI.closed", callbackFn() => {
// perform appropriate action
})

VisaSecureCapture.on("UI.Card.added", callbackFn(userAliasInfo) => {
// perform appropriate action
})

VisaSecureCapture.on("UI.Card.removed", callbackFn(userAliasInfo) => {
// perform appropriate action
})

VisaSecureCapture.on("UI.Card.updated", callbackFn(userAliasInfo) => {
// perform appropriate action
})

VisaSecureCapture.on("UI.Card.made-default", callbackFn(userAliasInfo) => {
// perform appropriate action
})

/* When the event occurs, the SDK will call the callbackFn you provide and send the user's UserAliasInfo. You will receive the name ex. (John D) and cardName ex. (Visa ••• 9010). */

/* UserAliasInfo {
name: string,
     cardName: string
} */

/* Sample payload sent in postmessage to Client application
UserAliasInfo {
name: Ankur S
   cardName: VISA ••• 1091
} */

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

<!DOCTYPE html>
<html lang="en" style="height: 100%; width: 100%">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>HTML 5 Boilerplate</title>
<style>
#placeiFrameHere {
height: 100%;
width: 100%;
}
</style>
</head>
<script src="https://SecureCredentialCapture.visa.com/sdk.js"></script>
<script>
const VisaSecureCapture = window.VisaSecureCapture;
// Setup iframe
VisaSecureCapture.configure({
type: 'IFRAME',
elementId: 'placeiFrameHere',
});
</script>

<body style="height: 100%; width: 100%; margin: 0">
<div style="display: flex; align-items: center; flex-direction: column" id="pageActions">
<button style="height: 40; width: 160px" onclick='window.openSdk("ADD_CARD")'>
Add Card
</button>
<button style="height: 40px; width: 160px" onclick='window.openSdk("VIEW_CARDS")' id="viewCardsButton">
View Cards
</button>
</div>
</div>
<div id="placeiFrameHere"></div>
<script>
    VisaSecureCapture.init({
idToken: _idToken,
entryPoint: entry,
preferredLanguage: document.querySelector('#preferredLanguage').value
});
VisaSecureCapture.on("UI.ready", callbackFn() => {
// perform appropriate action
})

VisaSecureCapture.on("UI.closed", callbackFn() => {
// perform appropriate action
})

VisaSecureCapture.on("UI.Card.added", callbackFn(userAliasInfo) => {
// perform appropriate action
})

VisaSecureCapture.on("UI.Card.removed", callbackFn(userAliasInfo) => {
// perform appropriate action
})

VisaSecureCapture.on("UI.Card.updated", callbackFn(userAliasInfo) => {
// perform appropriate action
})

VisaSecureCapture.on("UI.Card.made-default", callbackFn(userAliasInfo) => {
// perform appropriate action
})
    </script>
</body>
</html>