Integrate 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.