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 };
    function appendScript() {
      let myScript = document.getElementById("payu-affordability-widget");
          myScript = document.createElement('script');
          myScript.setAttribute('src', "");
      myScript.addEventListener('load', loadWidget, true);
    useEffect(() => {
    }, [])

    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;
key mandatoryString Enter the your merchant key that is generated by PayU.
amount mandatoryNumber The price of the product. The value of this field must be dynamically changed based on the price of the product.