[SOLVED] Unable to use imported Phonepe js script file

Hello

I am trying to implement the Phonepe API in my game: https://developer.phonepe.com/v4/reference#installation

And to do this i download js file from here:

But i am not able to use it. I am getting error like this at multiple pages.
image

I tried to use es6 syntax at top but it did not worked.

/*jshint esversion: 6 */

Any kind help will be really appreciated!

Hi @Ketan_ATA,

What’s the error you are getting when you run your app?

You shouldn’t worry about the code editor syntax errors, those are useful only if you plan in editing that script.

Also make sure you are putting that .js file to load first in order, before you use it in any other scripts, here:

https://developer.playcanvas.com/en/user-manual/scripting/loading-order/

Thanks for quick reply. :+1:t2:

Yes, i checked my loading order where this Phonepe.js is at top then other js files.

This is the error:

“Something is really wrong here! We should be able to fetch version always. Are you sure you are testing it inside the PhonePe app?”

Any suggestion? :roll_eyes:

Maybe this means that you are only allowed to use this library from inside the native/shell PhonePe app?

I am not aware of this service but I think this is an issue with that service and not Playcanvas. I’d say try and reaching out to their support forums.

But i think those errors should not come
or
Maybe it need to be on their server to work…?

Ok will check for it…
Thanks for quick reply and help. :+1:t2:

1 Like

Hey @Ketan_ATA,

This is quite a common issue with PhonePe API. Imo, if you can, avoid using this payment gateway as it caused quite a few issues on my apps in the past. Razorpay offers a rock solid WebAPI that’s far superior when compared to PhonePe. If it’s not imperative for you to use PhonePe, I’d recommend Razorpay, as it offers the same features with a better documented API.

https://razorpay.com/docs/payment-gateway/web-integration/

@DevilZ Thanks for showing alternative… But i have to deal with PhonePe at-lest now.
And i figure-out way to that as well.

==============================

Any way i am at middle of something… needs es6 related help…

console.log("PhonePe = ", PhonePe);

PhonePe.PhonePe.build(PhonePe.Constants.Species.web).then((sdk) => {
   sdk.fetchAuthToken().then((res) => {
       console.log("Grant token data received = " + res);
       alert(res);
   }).catch((err) => {
       console.log("Error occurred while fetching the grant token: " + err);
       alert(err);
   });
});

console.log("fetchAuthToken done");

Gives me output:

Well, as per the code the PhonePe is exist.
I am not able to understand whats wrong with it.

It would be great if someone can help to sort out…

Hi @Ketan_ATA,

Can you click on that error on the browser console and locate which exact code is responsible for causing it?

If you are able to share a project url as well I can take a look.

Sure!

image

Here…

PhonePe.MessagingHandler.callback('0e99d5c9-da9b-40de-ace9-763931801d3b'  , '1' , '6' , 'null ')

Is this some code of yours? Or a library/file you added?

Its from the package:

My code call this lib which is mentioned here: https://developer.phonepe.com/v4/reference#fetchauthtoken

console.log("PhonePe = ", PhonePe);

PhonePe.PhonePe.build(PhonePe.Constants.Species.web).then((sdk) => {
   sdk.fetchAuthToken().then((res) => {
       console.log("Grant token data received = " + res);
       alert(res);
   }).catch((err) => {
       console.log("Error occurred while fetching the grant token: " + err);
       alert(err);
   });
});

console.log("fetchAuthToken done");

I doubt on this code… Is it correct? or any other problem?

Sorry I don’t have any experience with PhonePe, but given the error you are getting is at the library side most likely the sdk init or loading isn’t correctly.

This is something better asked on the PhonePe forums or support channels.

Its okay…
No need to say sorry…
I will try to contact them…

Last thing…
Here take a look…
image
Well when i added lib in console and executed same code through console then it worked!
Also generate desired output on playcanvas screen…

Then after also it is still not working through the playcanvas code… :thinking:

R u sure about es6 promise kind of thing? it is working well here?

Then I suspect it may be an issue with the loading order of your files?

The PhonePe SDK should come before trying to execute any of your code that’s using it.

Script Loading Order looks good!
image

And also…

Well, as per the code the PhonePe is exist.

Are you able to share a project to show this error? That would really help!

Well, thank you very much for help. :smiley:

==============

I need help with this…

var data = JSON.stringify({
  "request": "xyz"
});

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
  if (this.readyState === this.DONE) {
    console.log(this.responseText);
  }
});

xhr.open("POST", "https://apps-uat.phonepe.com/v3/service/auth/access");
xhr.send(data);

Gives this error:

Access to XMLHttpRequest at ‘https://apps-uat.phonepe.com/v3/service/auth/access’ from origin ‘https://playcanv.as’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

What am i supposed to exactly?

You have to ask PhonePe. At a guess, you might have to whitelist the domain or URL in your PhonePe Dev/project account or host your app on their servers.

1 Like

I asked to PhonePe support.
They said:

We are not whitelist any thing regarding CORS issue

What should i do now? :thinking: