I've done several hours of research on this, including some StackOverflow leads. There are many examples out there by WeLearnCode, Medium, ITNext, among others, on how to integrate Stripe with React. Some of these used Serverless and Amplify CLI, which are not my tools of choice. Since PCI security standards are not to be taking lightly, I wanted to ask if the below arch is more than substantial when creating a client portal in a ReactJS SPA that allows customers to make Stripe payments. I am looking to handle both one-time payments as well as recurring (subscription-based) monthly payments. To reiterate, I have spent many hours researching.
Already in my current app stack:
- ReactJS
- Route53
- AWS Amplify
- API Gateway
- Lambda (NodeJS)
- Amazon Simple Email Service
To be added to my stack:
- Cognito
- API Gateway (more endpoints)
- Lambda (functions for Stripe and Cognito)
My avoids:
- List item
- Amplify CLI
- Serverless
- StripeJS UI components
Starting from the front end, I have an existing ReactJS Web app to which I'd like to add a client portal. This ReactJS Web app is managed and built via Amplify and is hosted via Route53. A visitor to the website should be able to create a user account via a sign up form and Cognito User Pool. Cognito would determine what actions the user has available. They should be able to log in and then edit payment methods, make payments, and edit their profile, using my own custom forms within the ReactJS Web app.
Customer profile info I plan to have users specify when signing up through the ReactJS web app:
- First and Last Name
- Company Name
- Mailing Address
- Phone Number
- Email Address
All of the profile information I plan to capture for a user can be managed by Stripe, through Stripe's customer object. So, there's no need for cloud storage of any kind as far as I can see; in fact, it'd be best to keep all customer data with Stripe for security and because any customer changes would need to be updated with Stripe in order for payments to be successful.
AWS Cognito handles auth and user pools, the latter of which I might can leverage for users who subscribe to (pay for) monthly services. It looks like I can use amazon-cognito-identity-js via front end (ReactJS) or back end (in my case, Node).
My gut feeling is to use amazon-cognito-identity-js in the back end, rather than front end. In that case, I would have to transmit user sign-in and other information from the front end to back end. I would use API Gateway to send user info (for signup) or user creds (for sign in) to trigger the appropriate Lambda to create or log in the user, respectively. All of this transferring of sensitive information would be unnecessary however if I were to use amazon-cognito-identity-js in the React code.
For Stripe services, such as making payments, saving/editing payment methods, and updating I would have appropriate forms of my own in the ReactJS Web app. These forms would lead to axios calls to REST endpoints in API Gateway, triggering Lambdas that will interact with the Stripe API, for making payments, saving/deleting/editing payment methods, and updating customer objects. Again, Cognito would determine what accesses (to endpoints) a user has.
There is an AmplifyAuthenticator component available through Amplify that can be plugged into a ReactJS app, to provide basic forms. StripeJS also has pre-built UI form components. However, I would prefer to design my own login and signup forms and make the necessary call to authenticate a user. I also want to create my own forms for (1)creating and editing user profiles, (2)saving, editing, and deleting payment methods, and (3)making payments. I of course have no intention of storing payment method information.
If anyone wants to comment on this high-level arch including security concerns, I'd appreciate it. I'm especially wondering if my how I plan to incorporate Stripe and Cognito would be a good approach. The passing of sensitive personal information is of utmost concern.
I've tried researching and detailing out a high arch solution, but I'm not sure based on examples and docs.