Integrate with ReactJS
Integrate affordability widget on your website built with ReactJS
You can natively integrate affordability widget on you webpage that you have built using ReactJS.
Integration steps
- Create a React Component using PayU’s ready to use code snippet
- Import the React component on your product page
Step 1: Create a React component
PayU provides you with a ready to use code snippet that you can use to create the Affordability Widget component. Copy and paste the following code snippet in a file to create the affordability widget component and name it as AffordabilityWidget.jsx
import React, { useEffect } from "react";
function AffordabilityWidget({key,amount}) {
function loadWidget() {
const widgetConfig = { key, amount };
payuAffordability.init(widgetConfig);
}
function appendScript() {
let myScript = document.getElementById("payu-affordability-widget");
if(!myScript){
myScript = document.createElement('script');
myScript.setAttribute('src', "https://jssdk.payu.in/widget/affordability-widget.min.js");
myScript.id="payu-affordability-widget";
document.body.appendChild(myScript);
}
myScript.addEventListener('load', loadWidget, true);
}
useEffect(() => {
appendScript();
}, [])
return (
<div id="payuWidget"/>
)
}
export default AffordabilityWidget;
Step 2: Import the React component on your product page
Import the component that you created in step 1 by specifying the location of the component and add it on your product page to indicate where the affordability widget should appear (e.g. below product price).
import React from "react";
import AffordabilityWidget from <location of component>
function ProductPage(){
return (
<AffordabilityWidget key='OADt8R' amount='6000'/>
)
}
export default Product Page;
Parameter | Description |
---|---|
key mandatory | String Enter the your merchant key that is generated by PayU. |
amount mandatory | Number The price of the product. The value of this field must be dynamically changed based on the price of the product. |
Updated 5 months ago