Wire Profile Module

This guide provides all the necessary information to integrate and configure the Wire Profile Module component, allowing users to securely add or update their wire transfer details in your application.

Getting Started

Follow these three steps for a basic implementation. This setup will render the UI for creating a new wire profile.

Step 1: Add the HTML Container

First, place an empty div element with the ID i-payoutUI in your HTML file where you want the user interface to appear.

<div id="i-payoutUI"></div>

Step 2: Install the Script

Next, include the wireProfileModule.bundle.js script in your HTML page. The defer attribute is recommended to ensure the HTML is fully parsed before the script runs.

<script defer src="wireProfileModule.bundle.js"></script>

📘
Dynamic Script Loading
If the static script tag causes issues, you can load the script dynamically using JavaScript. This method programmatically creates a script tag and appends it to the document's body.
let wireProfileModuleScript = document.createElement('script');

// Set the path to the bundle file
wireProfileModuleScript.src = 'wireProfileModule.bundle.js';
wireProfileModuleScript.defer = true;
// Append the script to the body
document.body.appendChild(wireProfileModuleScript);

Step 3: Configure the Module

Finally, create a <script> tag before the bundle script and define the global configuration object window.wireProfileModuleConfig. You must provide the required properties to initialize the module correctly.

When combined, a minimal HTML page will look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>i-payout Drop-in UI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <div id="i-payoutUI"></div>

    <script>
      window.wireProfileModuleConfig = {
        authToken: 'YOUR_JWT_AUTH_TOKEN',
        beneficiaryToken: 'USER_BENEFICIARY_TOKEN',
        merchantId: 'YOUR_MERCHANT_ID',
      };
    </script>

    <script defer src="wireProfileModule.bundle.js"></script>
  </body>
</html>

Configuration (`wireProfileModuleConfig`)

The window.wireProfileModuleConfig object is used to control the behavior, appearance, and data flow of the module.

Required Properties

These properties are mandatory for the module to function correctly.

Property	Type	Description
`authToken`	`string`	A JSON Web Token (JWT) used for authenticating all API requests.
`beneficiaryToken`	`string`	The unique identifier for the user (beneficiary).
`merchantId`	`string`	The unique identifier for your specific merchant account.

Optional Properties

These properties allow you to enable different modes, handle events, and customize the UI.

Property	Type	Description
`wireProfileToken`	`string`	The token for an existing wire profile. Providing this switches the module to update mode.
`lang`	`string`	Sets the display language. Defaults to `"EN"`.
`events`	`object`	An object containing callback functions. See Event Handling.
`labels`	`object`	An object to override default UI text. See UI Customization.
`styles`	`object`	An object to customize the look and feel. See UI Customization.

Module Modes

The module can operate in two modes: creating a new profile or updating an existing one.

Mode 1: Create a New Wire Profile

To create a new profile, provide only the three required properties in your configuration.

window.wireProfileModuleConfig = {
  authToken: 'YOUR_JWT_AUTH_TOKEN',
  beneficiaryToken: 'USER_BENEFICIARY_TOKEN',
  merchantId: 'YOUR_MERCHANT_ID'
};

Mode 2: Update an Existing Wire Profile

To fetch and update an existing profile, include the optional wireProfileToken property.

window.wireProfileModuleConfig = {
  authToken: 'YOUR_JWT_AUTH_TOKEN',
  beneficiaryToken: 'USER_BENEFICIARY_TOKEN',
  merchantId: 'YOUR_MERCHANT_ID',
  wireProfileToken: 'EXISTING_WIRE_PROFILE_TOKEN' // <-- Add this to update
};

Event Handling & Callbacks

Callbacks allow your application to react to the module's events. This is crucial for capturing the wireProfileToken after a new profile is created. Events are passed within an events object in the main configuration.

Available Events

Event	Description	Parameters
`onComplete`	Fired when the "create" or "update" operation either succeeds or fails.	`(error, response)`

The onComplete callback provides two arguments: error and response.

If the operation is successful, error will be null and response will contain the API data.
If the operation fails, error will contain the error details and response will be null.

Example: Capturing the `wireProfileToken`

The code snippet below shows the standard method for retrieving the token after a new wire profile is created.

<script>
  // 1. Define the callback function to handle the result
  const handleWireProfileCompletion = (error, response) => {
    if (error) {
      // Handle the error case
      console.error('Operation failed:', error.message);
      alert(`Error ${error.statusCode}: ${error.message}`);
      return;
    }
    
    // 2. On success, process the response from the API
    console.log('Operation successful!', response);
    
    // 3. Extract and store the new wire profile token for future updates
    const newWireProfileToken = response.data.token;
    console.log('New Wire Profile Token:', newWireProfileToken);
    // e.g., saveTokenToYourDatabase(newWireProfileToken);
  };

  // 4. Assign the function to the onComplete event in the config object
  window.wireProfileModuleConfig = {
    authToken: 'YOUR_JWT_AUTH_TOKEN',
    beneficiaryToken: 'USER_BENEFICIARY_TOKEN',
    merchantId: 'YOUR_MERCHANT_ID',
    events: {
      onComplete: handleWireProfileCompletion
    }
  };
</script>

API Responses

The onComplete callback returns a standardized JSON object.

When isSuccess is true, the data object will contain the profile's token:

{
  "data": {
    "token": "dc2eb0bf-63bc-463c-b104-8c193a3499b4",
    "isDocumentVerificationRequired": false,
    "lstErrMessagesReqFields": [],
    "code": 0,
    "desc": "",
    "msgType": 0,
    "expire_in_seconds": 0
  },
  "isSuccess": true,
  "message": "Wire profile created successfully",
  "statusCode": 0,
  "logIdentifier": "5ea63eb299a949c99794beba934021c5"
}

The response for an update is nearly identical, with a different success message.

{
  "data": {
    "token": "dc2eb0bf-63bc-463c-b104-8c193a3499b4",
    // ... other properties
  },
  "isSuccess": true,
  "message": "Wire profile updated successfully",
  "statusCode": 0,
  "logIdentifier": "5ea63eb299a949c99794beba934021c5"
}

UI Customization (Optional)

You can customize the text and appearance of the UI using the optional labels and styles properties.

`labels`

Use the labels object to override default text content like titles, buttons, and step indicators.

Property	Type	Default Value	Description
`widgetHeaderTitle`	`string`	`'Add or Update Wire Profile'`	The main title at the top of the widget.
`nextButton`	`string`	`'Next'`	Text for the "Next" button in the multi-step form.
`prevButton`	`string`	`'Prev'`	Text for the "Previous" button in the multi-step form.
`submitButton`	`string`	`'Submit'`	Text for the final submission button.
`stepOptions`	`string[]`	`['Step 1', 'Step 2', ...]`	An array of strings to override the step labels.

`styles`

Use the styles object to customize the look and feel by providing CSS properties or class names. Each style property accepts an object containing a style object (for inline CSS) and/or a cssClass string (for external classes).

Property	Target Element
`widgetContainer`	The main wrapper of the entire UI component.
`widgetHeader`	The header section that contains the title.
`widgetHeaderTitle`	The title text itself.
`formContainer`	The container wrapping the form fields.
`formStepContainer`	The wrapper for the multi-step labels.
`formStepLabel`	An individual step label.
`formControlsContainer`	The container wrapping the form input controls.
`sectionListMessageContainer`	The container for informational section messages.
`sectionTitle`	The title for a section of fields.
`sectionListMessage`	The text of an informational note within a section.
`formControlLabel`	The label for an individual input or dropdown.
`input`	All text input fields.
`dropdown`	All dropdown/select fields.
`validationMessage`	The text that appears for validation errors.
`prevButton`	The "Previous" button.
`nextButton`	The "Next" button.
`submitButton`	The final submission button.

Customization Example

The following example changes the header title, step labels, and applies a custom border to the widget:

window.wireProfileModuleConfig = {
  // ... required properties
  
  // Custom labels
  labels: {
    widgetHeaderTitle: 'Your International Wire Details',
    submitButton: "Save Profile",
    stepOptions: ['Beneficiary', 'Beneficiary Bank', 'Intermediary Bank', 'Review']
  },

  // Custom styles
  styles: {
    widgetContainer: {
      style: {
        'border': '2px solid #343a40',
        'border-radius': '12px',
        'padding': '24px'
      }
    },
    widgetHeaderTitle: {
      style: {
        'font-family': 'Arial, sans-serif',
        'color': '#343a40'
      }
    },
    input: {
      // Apply a pre-existing CSS class from your application's stylesheet
      cssClass: "form-control custom-input-style"
    }
  }
};