adyen-examples / adyen-react-online-payments

Accept payments on your React/Express-based website with cards, wallets, and key local payment methods
MIT License
66 stars 46 forks source link

How much testing demo should I expect to be able to try out? #2

Closed ZYinMD closed 4 years ago

ZYinMD commented 4 years ago

I ran the dev server and visited localhost:8080, and wasn't able to do much except clicking on the cards, not sure if that's expected.

So, this is what I did:

  1. follow the instructions here to use curl to test my api key and merchant account. Test passed.
  2. clone this repo, set values in .env. (Note that the CLIENT_KEY was not mentioned and not tested in step 1, but I clicked "Generate New Client Key" anyway, and added the generated client key in the .env.)
  3. npm run dev, then visit localhost:8080/.
  4. click on the cards, for instance "Drop In", then try different payment methods.

Every payment methods seem to display with some error message. Is that expected? For instance, the credit card input fields show "Please check origin key": image

And Alipay redirects to this page (I did have Alipay enabled in my merchant account): image

deepu105 commented 4 years ago

Hi @ZYinMD sorry that you are facing issues. These should have worked when the configuration of your merchant account is done correctly. I'll try to help you here. I need some more information. What payment methods did you face issues (I see credit card and Alipay above)

  1. For credit card did you add the domain (localhost:8080) to the client key that you created?
  2. For Alipay you need to do some additional configuration with the help of support, can you reach out to support so that they can do these for you
ZYinMD commented 4 years ago

Hi deepu105, thanks for helping!

So, I tested all payment methods, here are the results:

About adding locahost:8080 to the client key: Could you point me to the doc where it's mentioned ? Sorry I haven't read the majority of the doc, the reading path I followed was 1. read the Get Started , and 2. at the bottom of the Get Started page, found the link to this repo, and 3. come to this repo and read README.

About additional help from support for Alipay: thanks I'll reach out to them. Does Klarna and Wechat need similar support?

deepu105 commented 4 years ago

Hi @ZYinMD

For client key to work you need to add the origins you are using in the customer area, you don't have to regenerate the client key you can just add the origins following this doc and after few seconds it should work.

This demo is configured to work only for below payment methods as some payment methods need special handling in code and we are slowly adding support as required in demos. When you use drop-in it will display all the payment methods that you have enabled but they might not work unless the backend is configured to handle special cases.

If you want to try Alipay/Klarna I suggest checking out https://github.com/adyen-examples/adyen-node-online-payments which has an implementation for these and the changes are only on the backend and both these demos have a very similar nodeJS backend. For Alipay you might have to contact support to enable it as it has some limitations on test accounts due to how Alipay works. Hope this helps. Let me know if you have any more questions

ZYinMD commented 4 years ago

It's now working! Thanks for your help!

It may be a good idea to mention setting the "allowed origin" in README.

deepu105 commented 4 years ago

@ZYinMD thanks for suggestion, the client key docs are linked in Readme, but i'll add a mention of origins explicitly as well