Payment fund

Overview

The Payment Fund Component is an embeddable UI Component that is initiated to fund a payment run from a linked bank account. When initiating the Payment Fund UI Component, users are prompted to:

• Consent a Payment : The end-user needs to consent for a single funding request. The funding information will be displayed in the component.

Sweeping Consent

When a linked account is used for the first time, the user is also prompted to sweep funds from their zero balance account back to their linked account.

Embed the Payment Fund UI Component

The Payment Fund UI Component requires the below parameters in order to be initialized successfully.

tip

To use Weavr UI components, you must first set up our UI library in your application and ensure that you have an authentication token set as per instruction.

paymentFund(reference, callbackUrl, state, options);

Parameter	Type	Required?	Description
reference	string	Required	The group reference returned from the fund endpoint.
callbackUrl	string	Required	The callback URL specifies where the user should be redirected after they have completed their journey on bank website.
state	string	Required	This property can be used to pass a string or serialized data which will be appended to your configured default callback URL.
options	object	Optional	Add styling to the component.

important

The callbackURL must be on the same domain as the Redirect URL configured in the portal.

const paymentFund = weavrComponents.prompt.paymentFund(
  reference,
  callbackUrl,
  state,
  options
);

Mounting

To display the component on the screen, it's necessary to mount it to the DOM. This involves creating a wrapping element that serves as the container for injecting the secure frame. Be sure to assign an id to the HTML element.

note

Upon mounting to the element target the component will immediately call the necessary API’s in order to populate the necessary data on screen.

<!--paymentFund.html-->
<div id="payment-fund-example"></div>

// secure-payment-fund.js
const paymentFund = weavrComponents.prompt.paymentFund(
  reference,
  callbackUrl,
  state,
  options
);
paymentFund.mount("#payment-fund-example");

Look and feel

The options parameter manages the overall appearance of the component. The below defines the options object:

Property	Type	Required?	Description
classNames	object	Optional	Defines which classes are to be appended to the wrapping element.
style	object	Optional	Defines the look and feel of the components elements.

const paymentFund = weavrComponents.prompt.paymentFund(
  reference,
  callbackUrl,
  state,
  {
    classNames: "payment-fund-class",
    style: {
      // Definition found below
    },
  }
);

Property Definitions

style

The specified styles will be implemented on the component when it is mounted. While all key-value pairs are optional, each has a default value assigned. You can customize the default values by passing the desired values accordingly.

Property	Type	Required?	Description
container	object	Optional	Styles the wrapping element of the component that within the secure frame
lineColor	string	Optional	Line color.
buttons	object	Optional	Defines the look and feel of the button elements.
consentFont	object	Optional	Defines the look and feel of the font used in the consent.
accounts	object	Optional	Describes the look and feel of the steps container in the final step of manual funding.

const paymentFund = weavrComponents.prompt.paymentFund(reference,callbackUrl, state, {
    classNames: 'payment-fund-class',
    style:{
        container: {
            height: '900px',
            fontSize: '1rem',
            fontFamily: 'Inter',
            backgroundColor: '#fff',
            padding: '3rem',
            borderRadius: '1rem',
            ...
        },
        lineColor: '#E0E0E0',
        buttons: {
            buttonRadius: '1rem',
            buttonBackgroundColor: '#F4F4F4',
            buttonTextColor: '#0F0B3E'
        },
        consentFont: {
            headingIconColor: '#0F0B3E',
            bodyTextColor: '#595959 ',
            termsUrlColor: '#2F22C3'
        },
        accounts: {
          backgroundColor: '#F4F4F4',
          separatorColor: '#E0E0E0'
        }
    }
})

container

Each property follows the object format outlined below. This object features the following parameters, with each one accepting inputs based on the provided link.

note

The Pseudo-Class Object is a recursive structure composed of the same properties listed below. During recursion, the properties specific to the Pseudo-Class are omitted.

Parameter	Type	Required	Description
backgroundColor	string	Optional	Background color
border	string	Optional	Border width, style, and color
borderRadius	string	Optional	Border rounded corners
classesNames	string	Optional	Custom styling, or referencing in your stylesheet
color	string	Optional	Text color
fontFamily	string	Optional	Text font
fontSize	string	Optional	Font size
fontSmoothing	string	Optional	Font smoothing (anti-aliasing)
fontStyle	string	Optional	Text Style (italic or normal)
fontVariant	string	Optional	Text with small caps (or other font variants)
fontWeight	string	Optional	Text weight (thickness or boldness)
height	string	Optional	Component height
letterSpacing	string	Optional	Space between characters in the text
lineHeight	string	Optional	Height of text
margin	string	Optional	Spacing within component
padding	string	Optional	Spacing inside Component (between content & border)
textAlign	string	Optional	Horizontal text alignment
textDecoration	string	Optional	Text underline or overline
textIndent	string	Optional	First line text indentation
textShadow	string	Optional	Text shadow effect
textTransform	string	Optional	Text capitalization
:hover	object*	Optional	Pseudo-Class Triggered when a user interacts with an element using a pointed device e.g. cursor

buttons

Describes the look and feel of the buttons found in the Payment Fund component.

Property	Type	Required?	Description
buttonRadius	string	Optional	The radius of the buttons.
buttonBackgroundColor	string	Optional	The background color of the buttons.
buttonTextColor	string	Optional	The buttons text color.

consentFont

The Payment Fund component prompts for acceptance of consents. The below describes the consent font style.

Property	Type	Required?	Description
headingIconColor	string	Optional	Any heading found in the Payment Fund component.
bodyTextColor	string	Optional	Any consent related text in the Payment Fund component.
termsUrlColor	string	Optional	The URL color for terms and conditions.

accounts

Describes the look and feel of the steps container in the final step of manual funding.

Property	Type	Required?	Description
backgroundColor	string	Optional	The background color of the steps container.
separatorColor	string	Optional	The separator color of the steps container.

---

Functions

You can interact with the library's components by utilizing the exposed functions. The below is a list of functions exposed for the Payment Fund component

mount

The mount function is called in order to mount a component into the defined selector.

paymentFund.mount(selector);

unmount

The unmount function is called in order to unmount a component from its selector.

note

Once a component is unmounted it can be remounted. One can remount the component utilizing the mount function.

paymentFund.unmount();

destroy

The destroy function can be used to remove the element and its references from the DOM.

note

Once a component is destroyed it cannot be remounted. The component is removed from Document Object Model (DOM) alongside any references and needs to be re-initialized.

paymentFund.destroy();

on

This function makes event listeners available for interacting with the component during events.

paymentFund.on(event, listener);

off

This function provides the capability to detach event listeners from the component.

paymentFund.off(event, listener);

---

Events

The Payment Fund component triggers the following events. You can listen to these events by attaching event listeners.

Event	Trigger condition
ready	Component has been initialization successfully.
change	When component's state changes.
error	An error is returned during API requests. If not handled, an error is returned.
accept	Triggered when the Payment Fund Consent is fulfilled.
decline	Triggered the decline button is clicked.
FUNDING_COMPLETED	Triggered when the 'Funding completed' button in the final step of the manual funding flow is clicked.
FUNDING_OPEN_BANKING	Triggered when 'Pay with open bankingOpen BankingA service that allows customers to securely share their bank account information and authorize payments directly from their bank account. In Payment Run,Open banking can be used to link accounts and fund payment runs, providing a seamless experience for buyers.' is selected as a funding option when initiating a payment runPayment RunA list of payments created by Buyers to settle their outstanding financial obligations with their suppliers. Payment runs are typically managed by the accounts payable function within a business on a periodic basis and go through stages of creation, authorisation, funding, and execution..
FUNDING_MANUAL	Triggered when 'Pay with a bank transfer' is selected as a funding option when initiating a payment runPayment RunA list of payments created by Buyers to settle their outstanding financial obligations with their suppliers. Payment runs are typically managed by the accounts payable function within a business on a periodic basis and go through stages of creation, authorisation, funding, and execution..

// Example - decline for accept event
paymentFund.on("accept", (event) => {
  // do something
});

// Example - listen for error event
paymentFund.on("error", (event) => {
  // do something
});

---

Examples

1. Show Payment Fund

<!--paymentFund.html-->
<div id="payment-fund-example"></div>

// paymentFund.js
const options = {
  classNames: "payment-fund-class",
  style: {
    container: {
      height: "900px",
      fontSize: "1rem",
      fontFamily: "Fuggles",
      backgroundColor: "#F0EDDE",
      padding: "3rem",
      borderRadius: "1rem",
    },
    lineColor: "#3CF7CA",
    buttons: {
      buttonRadius: "1rem",
      buttonBackgroundColor: "#7C1869",
      buttonTextColor: "#3CF7CA",
    },
    consentFont: {
      bodyTextColor: "#7C1869",
      headingIconColor: "#2A2B44",
      termsUrlColor: "#7C1869",
    },
    accounts: {
      backgroundColor: "#2A2B44",
      separatorColor: "#7C1869",
    },
  },
};

const paymentFund = weavrComponents.prompt.paymentFund(
  callbackUrl,
  state,
  options
);
paymentFund.mount("#payment-fund-example");

paymentFund.on("decline", (event) => {
  console.log("Decline", event);
  paymentFund.destroy();
});

paymentFund.on("accept", (event) => {
  console.log("Accept", event);
  paymentFund.destroy();
});