Reactjs - Cashfree Integration(Cashfree is not defined)

Question

I am using reactjs frontend and django at backend, i am trying to integrate Cashfree seamless basic payment gateway with my webpage. I have tried the same steps which is mentioned in this https://dev.cashfree.com/payment-gateway/integrations/web-integration/seamless-basic#response-verification , but i am getting Line 35:18: 'CashFree' is not defined no-undef this error. I have attached the code snippet also.

1.created a form to store the data {

      "orderId" : "Test6", 
      "orderAmount" : "500", 
      "orderCurrency" : "INR", 
      "orderNote" : "", 
      "customerName" : "Test", 
      "customerPhone" : "9900012345", 
      "customerEmail" : "[email protected]", 
      "returnUrl" : "http://example.com/", 
      "notifyUrl" : "http://example.com/",
      "paymentOption" :"" ,
      "paymentCode" : ""
    }

2. Attached the script given in the docs in index.html

3.Generated the signature.

4.

const Pay = ()=>{

    useEffect(()=>{
    
         
      const config = {};
      config.layout = {};
      config.checkout = "transparent";
      config.mode = "TEST";
      let response = CashFree.init(config);
      console.log(response);
      if (response.status !== "OK") {
           
      }
    
    },[])
    var pc = (data)=>{
      data.paymentOption = "card";
      data.card = {};
      data.card.number = "4444333322221111";
      data.card.expiryMonth = "07";
      data.card.expiryYear = "23";
      data.card.cvv = "123";
      CashFree.paySeamless(data, postPaymentCallback());
      return false;
    };
    const postPaymentCallback = (event) => {
      console.log(event);
      if (event.name == "PAYMENT_RESPONSE" && event.status == "SUCCESS") {
      } else if ( event.name == "PAYMENT_RESPONSE" && event.status == "CANCELLED") {
      } else if (event.name == "PAYMENT_RESPONSE" && event.status == "FAILED") {
      } else if (event.name == "VALIDATION_ERROR") {
      }
    };
    
    const payCard = ()=>{
      CashFree.initPopup(); // This is required for the popup to work even in case of callback.
        axios.get("https://reqres.in/api/users?page=2") // This is an open endpoint.
        .then((response)=>{
            console.log(response);
            pc();
    
        })
    };
    const payBank = (data)=> {
      CashFree.initPopup();
      data.paymentOption = "nb";
      data.nb = {};
      data.nb.code = "3002";
    
      CashFree.paySeamless(data , postPaymentCallback);
      return false;
    };
    const payWallet = (data) =>{
      data.paymentOption = "wallet";
      data.wallet = {};
      data.wallet.code = 4001;
    
      CashFree.paySeamless(data, postPaymentCallback);
      return false;
    };
    const payUpi = (data) => {
      data.paymentOption = "upi";
      data.upi = {};
      data.upi.vpa = 3244;
    
      CashFree.paySeamless(data, postPaymentCallback);
      return false;
    };
}

return(
<button onClick={Pay()}>PAY</button>
)

i am running into error at this step 35:18: 'CashFree' is not defined no-undef and i have tried installing the cashfree-sdk but still i am getting 'CashFree.init()' is not a function

Answer 1

After you load the SDK by adding the script tag, you need to access CashFree from the window object.

So do window.CashFree instead of just CashFree