adyen-examples / adyen-react-online-payments Goto Github PK

View Code? Open in Web Editor NEW

66.0 5.0 45.0 5.86 MB

Accept payments on your React/Express-based website with cards, wallets, and key local payment methods

License: MIT License

HTML 4.66% JavaScript 75.95% CSS 19.00% Dockerfile 0.23% Shell 0.16%

hacktoberfest

adyen-react-online-payments's Introduction

Adyen online payment integration demos

Run this integration in seconds using Gitpod

Open your Adyen Test Account and create a set of API keys.
Go to gitpod account variables.
Set the ADYEN_API_KEY, REACT_APP_ADYEN_CLIENT_KEY, ADYEN_HMAC_KEY and ADYEN_MERCHANT_ACCOUNT variables.
Click the button below!

Note: Notice the REACT_APP_ prefix in the REACT_APP_ADYEN_CLIENT_KEY.

NOTE: To allow the Adyen Drop-In and Components to load, you have to add https://*.gitpod.io as allowed origin for your chosen set of API Credentials

First time with Gitpod?

Details

This repository showcases a PCI-compliant integration of the Sessions Flow, the default integration that we recommend for merchants. Explore this simplified e-commerce demo to discover the code, libraries and configuration you need to enable various payment options in your checkout experience.

The demo leverages Adyen's API Library for Node.js (GitHub | Docs) on the server side.

Requirements

Node.js 12+

Installation

Clone this repo:

git clone https://github.com/adyen-examples/adyen-react-online-payments.git

Navigate to the root directory and install dependencies:

npm install

Usage

Create a ./.env file with your API key, Client Key - Remember to add http://localhost:3000 as an origin for client key, and merchant account name (all credentials are in string format):

# server-side env variables
ADYEN_API_KEY="your_API_key_here"
ADYEN_MERCHANT_ACCOUNT="your_merchant_account_here"
ADYEN_HMAC_KEY=yourNotificationSetupHMACkey

# client-side env variables: using REACT_APP prefix to be included in the REACT build 
REACT_APP_ADYEN_CLIENT_KEY="your_client_key_here"

Build & Start the server:

This will create a React production build and start the express server

npm run server

Visit http://localhost:8080/ to select an integration type.

To try out integrations with test card numbers and payment method details, see Test card numbers.

Note

The demo supports cancellation and refunds, processing the incoming Adyen webhook notifications. Make sure webhooks are enabled and processed (see below).

Webhooks

Webhooks deliver asynchronous notifications about the payment status and other events that are important to receive and process. You can find more information about webhooks in this blog post.

Webhook setup

In the Customer Area under the Developers → Webhooks section, create a new Standard webhook.

A good practice is to set up basic authentication, copy the generated HMAC Key and set it as an environment variable. The application will use this to verify the HMAC signatures.

Make sure the webhook is enabled, so it can receive notifications.

Expose an endpoint

This demo provides a simple webhook implementation exposed at /api/webhooks/notifications that shows you how to receive, validate and consume the webhook payload.

Test your webhook

The following webhooks events should be enabled:

AUTHORISATION

To make sure that the Adyen platform can reach your application, we have written a Webhooks Testing Guide that explores several options on how you can easily achieve this (e.g. running on localhost or cloud).

adyen-react-online-payments's People

Contributors

Stargazers

Watchers

adyen-react-online-payments's Issues

Can you provide an official test account？

I tried several registered test users, and the result prompting the form of submission of the form failed！

I don't know where the problem is ~

Smart buttons (PayPal and Google Pay) are not loading

I'm implementing a react storefront that utilizes @adyen/adyen-web.
I faced few issues during the implementation:

import '@adyen/adyen-web/dist/adyen.css' wasn't compiling which I got resolved by adding style-loader and css-loader to webpack config file
Another issue which is blocking me is smart buttons not showing and I'm not seeing any clues on why they won't.

A. I checked for console errors
B. I tried multiple @adyen/adyen-web versions between 5.2.0 and 5.3.1, no luck
C. Read through the updated 5.x.x documentation 20 times :)
D. Built and deployed your repository and everything seems to work. My guess it's a webpack issue.
I would really appreciate it if someone can point me in the right direction and if I'm missing something obvious

Deployed storefront (with the issue described above):
https://xcpwaretail-development.mobify-storefront.com/

Updated example for 5.0.0?

I see the payment session has been reduced to one API call (https://docs.adyen.com/online-payments/web-drop-in?tab=codeBlocksessions_1) to the server can you provide an updated example of this with Node/Express/React?

Thanks!

WeChat Pay receive internal error

I added WeChat Pay in my payment methods, and when I tried to check out with it I got HTTP 500 error, which said it's an "internal error". I got a similar result using curl (using the command specified on this page):

{
  "status": 500,
  "errorCode": "903",
  "message": "Internal error",
  "errorType": "internal"
}

Is there anything I missed?

3DS native flow does not work

Thank you for this repo and the examples you provided.

However, while trying to implement and test the solution, I noticed that testing the 3DS 2 Native Flow does not work.
I tried to use it by https://docs.adyen.com/development-resources/test-cards/test-card-numbers#test-3d-secure-2-authentication card 4212 3456 7891 0006 VISA test card.

What happens instead, the UI gets frozen after the password is submitted to the 3DS mock view.
Will you be so nice to have a look? Thank you.

"Unexpected token" error when running on < Node 12

Seems there might be an issue running this on anything < node12 which is contrary to the docs that state Node v8.

I've cloned the repo and I've installed the packages as well as created the environment variables file with my own details, but when I run "npm run dev" I'm getting "SyntaxError: Unexpected token ;"

Originally tested using Node 10, but as soon as I switch to Node 12 everything works.

Here's the full log:

adyen-react-online-payments % npm run start

[email protected] start /Users/martincrawley/Documents/Code/adyen-react-online-payments
dotenv -e .env react-scripts start

/Users/martincrawley/Documents/Code/adyen-react-online-payments/node_modules/eslint-webpack-plugin/node_modules/jest-worker/build/index.js:110
_ending;
^

SyntaxError: Unexpected token ;
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object. (/Users/martincrawley/Documents/Code/adyen-react-online-payments/node_modules/eslint-webpack-plugin/dist/getESLint.js:9:5)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: dotenv -e .env react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/martincrawley/.npm/_logs/2022-09-26T17_13_48_300Z-debug.log

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

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:

follow the instructions here to use curl to test my api key and merchant account. Test passed.
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.)
npm run dev, then visit localhost:8080/.
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":

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

Swish payment method use on mobile browser via Open the app button

I'll post it here as well
Adyen/adyen-web#2342

Not working redirection when using different payment method after making successful payment first time

I noticed problem with not working redirection when using different payment method after making successful payment first time.

To reproduce problem I perform following scenario:

Use drop-in
Pay with test card
After successful payment processing return home
Use drop-in one more time
Choose iDEAL method
Select test bank (i.e. Test Issuer 5)
Click Continue... button
Redirection didn't occur. Button is still clickable.
Reload page
Choose iDEAL method
Select test bank
Click Continue... button
Redirection occurred properly

In this screen cast you can find how test scenario looks:
https://user-images.githubusercontent.com/578223/161933153-053f6634-bde0-4e21-8faf-57d2b9a84762.mp4

I tested with @adyen/web and @adyen/api-library libraries in the same versions as in demo and after updating them to the newest versions (@adyen/adyen-web 5.12.0 and @adyen/api-library 10.2.0). In both cases the problem is still present.

I'm not sure if described problem relates to usage of @adyen/web library in this demo or to library itself, so I firstly reported problem here.

How to Encrypt Card Details Using Custom Card Integration

Hi there,

I'm looking to be able to encrypt card details using an instance of AdyenCheckout, e.g.

const checkout = await AdyenCheckout({…});

checkout.create('securedfields, {…});

If I am already using

checkout.createFromAction(…)

How would this be integrated?

I'm also using a form library (Formik) to build the form which contains the card component.

Many thanks!

how can I pay with stored card details ?

Hello,

how can I pay with stored card details ? So the user should not again to typing his credit cards data

Upgrade to Adyen Web 5.16.0

Current version uses Adyen Web 5.2.2 which has a known issue with Paypal.

Upgrade sample application to use Adyen Web 5.16.0 (latest available to date), update Node @adyen/api-library version too

Note: Github workflow e2e must be updated to use latest Adyen Testing suite Docker image

External submit button

I cannot seems to find a React example with having a custom button for submitting the form. Your documentation states that it can be done https://docs.adyen.com/online-payments/build-your-integration/additional-use-cases/advanced-flow-integration/?platform=Web&integration=Drop-in&version=5.39.1#configuring-drop-in unser showPayButton description.

Fix Environmental Variable names

Description
Environmental variables are named inconsistently:

What's affected

Gitpod (see alsoreadme) - Setting the ADYEN_API_KEY, ADYEN_CLIENT_KEY, ADYEN_HMAC_KEY and ADYEN_MERCHANT_ACCOUNT variables, will not work as the application is currently looking at: "REACT_APP_XXXX"
There's a REACT_APP_RETURN_URL that is used on application-level (see: https://github.com/adyen-examples/adyen-react-online-payments/blob/main/server.js#L41), which we could remove?

Proposed fix

Remove REACT_APP_RETURN_URL as we're already dynamically determining the host url (https://github.com/adyen-examples/adyen-react-online-payments/blob/main/server.js#L35)
Use REACT_ADYEN_API_KEY, REACT_ADYEN_CLIENT_KEY, REACT_ADYEN_HMAC_KEY and REACT_ADYEN_MERCHANT_ACCOUNT and inject these variables into gitpod.

Acceptance Critera

Gitpod works
Consistent environmental naming with REACT_ standards/conventions
Readme, E2E tests and docker build are also updated accordingly

Instead of replacing `location.href` I'd recommend to set some value to the (local component) state and render a [`<Redirect to="..." />`][1] when this value is set to perform a redirect.

Instead of replacing location.href I'd recommend to set some value to the (local component) state and render a <Redirect to="..." /> when this value is set to perform a redirect.

Originally posted by @qurben in #8 (comment)

Invalid Origin Error

When I run this application, I'm unable to test out any of the payment methods due to an "Invalid Origin" error. When I try to test out a credit card, the card fields all show "Invalid Origin" - see the image I've added.

I've checked my customer area, and I have both http://localhost:8080 and http://localhost:3000 setup as the allowed origins. Any idea what I'm doing wrong?

Accessing status of components?

Hi! Sorry if this is the wrong place for questions. Feel free to close and I'll contact support.

In the docs a status is mentioned on both components and dropin, stating:

setStatusAutomatically 
Set to false to not set the Drop-in status to 'loading' when onSubmit is triggered. Defaults to true.

However, I can't find a status property anywhere on a component instance. Is that a typo in the docs, or is it possible to get the current status of a component?

Thanks!

The payment was refused. Please try a different payment method or card.

Hey guys!

I've tried .net and react versions, and in both cases I get:

I suggest the problem lies with ENV keys, in case REACT_APP_ADYEN_CLIENT_KEY.

Could you please provide an example of the correct setup?

Kind regards,
Misha

Set redirectUrl using hostname

The redirectUrl is hardcoded (http://localhost:8080) therefore it doesn't work when the app is deployed on Gitpod (or other cloud providers). Refactor to use the hostname header.