Setup: Stripe API #60 by uche-okoroafor · Pull Request #97 · hatchways/team-breadsticks

uche-okoroafor · 2021-10-04T19:25:07Z

What this PR does (required):

Setup: Stripe API :

Create a stripe customer Account.
Add Payment Methods of the Customer to the stripe account
Retrieve customer Payment methods
Create a payment intent

Screenshots / Videos (required):

Any information needed to test this feature (required):

Create a stripe account, copy your public Key and Secret Key
Install the dependencies by running npm install on the client folder and the server folder
Go to the App.tsx and paste the public key at "loadStripe"( loadStripe(publicKey) )
Go to the .env file in the server folder and add your secret key STRIPE_SK

Any issues with the current functionality (optional):

List any problems where you were not able to complete all tasks on ticket
List any problems this PR may cause for the project or other active PRs
Post a screenshot/video of the problem, along with detailed console outputs where applicable

sundayezeilo

Great work to this stage 👍
Just check out a few comments I left and take a look.
Happy coding!

sundayezeilo · 2021-10-04T20:16:35Z

+      setUserIds({ stripeId, userId: user.id });
+      return stripeId;
+    } catch (err) {
+      console.log(err);


Remove console log

sundayezeilo · 2021-10-04T20:17:03Z

+
+      SetPaymentProfileExist(true);
+    } catch (err) {
+      console.log(err);


Remove console log

sundayezeilo · 2021-10-04T20:25:42Z

+const asyncHandler = require("express-async-handler");
+
+exports.createPaymentIntent = asyncHandler(async (req, res) => {
+  if (req.method === "POST") {


Once you create your routes, you don't need this kind of check.

sundayezeilo · 2021-10-04T20:26:31Z

+exports.createPaymentIntent = asyncHandler(async (req, res) => {
+  if (req.method === "POST") {
+    try {
+      const { amount } = req.body;


Don't forget to validate amount

sundayezeilo · 2021-10-04T20:30:45Z

+  const { userId } = req.params;
+  if (!userId || !id) {
+    return res
+      .status(404)


A missing field in the request should be a bad request status 400

sundayezeilo · 2021-10-04T20:32:40Z

+  const { customerId } = req.params;
+
+  if (!customerId) {
+    return res.status(404).json({ err: "customerId is undefined" });


This should be a bad request and return 400

sundayezeilo · 2021-10-04T20:33:09Z

+    const customer = await stripe.customers.retrieve(customerId);
+    res.status(200).json({ customer, paymentMethods });
+  } catch (err) {
+    res.status(400).json({ err: err.message });


This can be a 422

sundayezeilo · 2021-10-04T20:34:05Z

+      .attach(id, {
+        customer: customer.id,
+      })
+      .catch((err) => res.status(404).json({ err: err.message }));


This can be a 422

sundayezeilo · 2021-10-04T20:35:31Z

+  } else {
+    res.setHeader("Allow", "POST");
+    res.status(405).end("Method Not Allowed");


These lines are irrelevant, as long as your routes are properly created.

sundayezeilo · 2021-10-04T20:36:19Z

+  const { paymentMethodId, userStripeId } = req.body;
+  if (!paymentMethodId || !userStripeId) {
+    return res
+      .status(404)


This should be a 400

rajivtitus · 2021-10-06T17:25:18Z

+
+export const PaymentProfilesProvider: FunctionComponent = ({ children }): JSX.Element => {
+  const [paymentProfiles, setPaymentProfiles] = useState<IPaymentProfiles | undefined>(undefined);
+  const [loggedInuserDetails, setLoggedInuserDetails] = useState<IPaymentProfiles['loggedInuserDetails']>(undefined);


What is the purpose of the loggedInuserDetails state? Our AuthContext already has a state which holds the logged in user's information

I used it for resetting the data stored in the context because when I log in with a different user on the same computer , the data of the previous user will be there, so I have to reset the data

If we need the loggeInUserDetails you can get it from the AuthContext, it is not advisable to store the same data within another context as this may cause confusion.

rajivtitus · 2021-10-06T17:28:49Z

+  const { loggedInUser } = useAuth();
+  const { updatePaymentProfiles, paymentProfiles, updateLoggedInUser } = usePaymentProfiles();
+  const [paymentProfileExist, SetPaymentProfileExist] = useState<boolean>(false);
+  const [userIds, setUserIds] = useState<any>(false);


Please avoid using 'any' as a type

Ditto throughout!

I will make changes but please how can I declare the data type of a promise containing an object with lots of Properties?

You can define an interface and use it 👍🏽

Ref: https://www.tutorialsteacher.com/typescript/typescript-interface

rajivtitus · 2021-10-06T17:29:52Z

+          </Grid>
+          <Grid item container md={10} className={classes.gridContainer}>
+            <Typography variant="h6" className={classes.containerInfo}>
+              {paymentProfiles && 'Saved Payment Profiles:'}


Suggested change

{paymentProfiles && 'Saved Payment Profiles:'}

{paymentProfiles ? "Saved Payment Profiles:" : "You don't have any Payment Profile"}

rajivtitus · 2021-10-06T17:34:03Z

+                paymentProfiles.map((paymentMethod: any) => (
+                  <Grid item xs={12} sm={12} md={6} key={paymentMethod.id}>
+                    <Card className={classes.payCard}>
+                      <div className={classes.cardHeader}>


Please use MUI Box components instead of HTML divs. A lot of the CSS properties can be passed as props to the Box component

Eg: <Box display="flex" alignItems="center".....>

Ditto throughout!

rajivtitus · 2021-10-06T17:35:56Z

+import * as Yup from 'yup';
+import { iframeStyles } from './CardElementStyles/CardElementStyles';
+
+interface IState {


Suggested change

interface IState {

interface BillingInfo{

Co-authored-by: Rajiv Titus <75184965+rajivtitus@users.noreply.github.com>

rajivtitus

@uche-okoroafor Good work with this! Just some minor comment to address :)

…/hatchways/team-breadsticks into Setup-Stripe-API-#60-/full-stack

rajivtitus · 2021-10-08T07:43:46Z

@uche-okoroafor There are a couple of pending comments, once they are addressed please tag me in so that we can get this approved :)

stripe api created

f628531

sundayezeilo suggested changes Oct 4, 2021

View reviewed changes

uche-okoroafor added 3 commits October 5, 2021 20:53

resolved issues

ed964b9

added the right status code

8f20fc2

Update payment.js

d65d8c3

rajivtitus reviewed Oct 6, 2021

View reviewed changes

Comment thread client/src/context/usePaymentProfilesContext.tsx Outdated

rajivtitus reviewed Oct 6, 2021

View reviewed changes

Update client/src/context/usePaymentProfilesContext.tsx

6bc1a70

Co-authored-by: Rajiv Titus <75184965+rajivtitus@users.noreply.github.com>

rajivtitus reviewed Oct 6, 2021

View reviewed changes

uche-okoroafor and others added 4 commits October 8, 2021 08:12

Merge branch 'main' into Setup-Stripe-API-#60-/full-stack

f11f5fe

Update App.tsx

c345a89

updated

306ba60

Merge branch 'Setup-Stripe-API-#60-/full-stack' of https://github.com…

44f3094

…/hatchways/team-breadsticks into Setup-Stripe-API-#60-/full-stack

	{paymentProfiles && 'Saved Payment Profiles:'}
	{paymentProfiles ? "Saved Payment Profiles:" : "You don't have any Payment Profile"}

Uh oh!

Conversation

uche-okoroafor commented Oct 4, 2021

What this PR does (required):

Screenshots / Videos (required):

Any information needed to test this feature (required):

Any issues with the current functionality (optional):

Uh oh!

sundayezeilo left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rajivtitus Oct 8, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rajivtitus Oct 6, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rajivtitus left a comment

Choose a reason for hiding this comment

Uh oh!

rajivtitus commented Oct 8, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rajivtitus Oct 8, 2021 •

edited

Loading

rajivtitus Oct 6, 2021 •

edited

Loading