¶ PPE widget integrations
This section provides information on how to integrate the PPE widget in your e-commerce website. It is mainly composed of a javascript + css module which takes a configuration.
We also created a package that includes a PPE widget React component that can be added to any React project by installing it with your package manager.
¶ Plain HTML integration
Here is an example on replit.com (a token must be added in the configuration to see the widget working)
There must be 3 elements in the HTML document for the widget to work: CSS and Javascript files and the configuration.
¶ 1. The link to the CSS file:
<link href="https://ppe.wegetfinancing.com/index.css" rel="stylesheet" />It must be added in the <head> of the document.
¶ 2. The Javascript file:
<script src="https://ppe.wegetfinancing.com/index.js"></script>It must be added just before the </body> closing tag.
¶ 3. The configuration can be added in 2 ways:
- The first way is to add it directly in the
<head>of the HTML document:
<script>
// In case there are no config.json file the widget configuration can be added here
const ppeConfiguration = {
priceSelector: ".price-item", // the class name of the html element containing the prices on the page (REQUIRED) (string)
productNameSelector: ".name-item", // if applyNow is set to true, this selector is REQUIRED (string)
debug: true, // if true, prints debug messages on the console (boolean)
token: "", // Merchants need to add their WeGetFinancing's access token as a string (REQUIRED)
applyNow: true, // If set to true, a link to the simple loan form will be added (boolean)
branded: true, // If true, WeGetFinancing branding will be rendered (boolean)
minAmount: 1000, // we will not show the PPE if the amount is below this number (REQUIRED) (number)
customText: "or just", // Add any text before the monthly payment in the message under the price (string)
position: "leading" // positions the widget horizontally. The options are the following string options : 'equalSpacing' | 'leading' | 'trailing' | 'center' | 'fill' | 'fillEvenly'
}
window.ppeConfiguration = ppeConfiguration
</script>
- The second way is to reference a JSON file:
<link id="wgf-estimator-config" href="config.json" />🚨 The id has to be this exact one : wgf-estimator-config
¶ Other integrations
The following integrations are mostly built on the HTML integration, but with the addition of a server. This means that unlike the plain HTML integration example on replit.com, you don't need to include your token to see the widget in action in these integration examples.
To keep your token secure, you can configure the environment variable to pass it, allowing you to keep it confidential. You can see how to do this in the follwoing replit.com examples.
¶ Node/Express integration
Here is an example on replit.com
¶ Flask integration
Here is an example on replit.com
¶ PHP integration
Here is an example on replit.com
¶ Integration of the PPE widget component package (not yet public) in a React project
Here is an example on replit.com
You can use the ppe widget package to use the component in any React project. It works like any npm package and can be added using:
npm add ppe-widget
or
yarn add ppe-widget
The PPEWidget component can then be imported in the project .jsx or .tsx files like so:
import PPEWidget from "ppe-widget";The parameters are:
price(required, number): the price of the product to be financedproductName(optional, string): the name of the product being financedtoken(required, string): the merchant tokenminAmount(required, number): the minimum amount required for the financing offercustomText(optional, string): custom text to be displayed in the estimation messagebranded(optional, boolean): whether the financing offer is brandedapplyNow(optional, boolean): whether an apply now button should be displayed in the details popoverposition(optional, any): the position of the widget on the pagedata(optional, array): an array of financing offerswgf_env(optional, string): the WGF environment to be used in the details popover
<PPEWidget
price={2000}
applyNow={true}
branded={true}
productName="Giant TV"
customText="pay only"
token="" // Add your token here
minAmount={1000}
/>It gives this result:
And this pops up open when Apply Now! is clicked:
¶ How to customize the font colors
To customize the default colors of the text in the widget, you need to override 3 classes as shown in this example:
/* This will update the color of the text above the select input field */
.wgf-ppe .ant-typography {
color: red;
}
/* This will override the color of the message under the product price and of the footer section of the widget */
.wgf-ppe {
color: red;
}
/* This will override the blue text */
.wgf-ppe .blue-text {
color: green;
}