fix: update stripe wallets to use payment intent #54668

ahmaxed · 2024-05-06T09:58:28Z

Checklist:

I have read freeCodeCamp's contribution guidelines.
My pull request has a descriptive title (not a vague title like Update index.md)
My pull request targets the main branch of freeCodeCamp.
I have tested these changes either locally on my machine, or GitPod.

Closes #XXXXX

…nto feat/update-charge-stripe

api-server/src/server/boot/donate.js

ojeytonwilliams · 2024-05-29T15:39:39Z

shared/config/donation-settings.ts

+};
+
+export const allStripeProductIdsArray = Object.values(stripeProductIds)
+  .flatMap(env => Object.values(env))
+  .flatMap(duration => Object.values(duration));


Suggested change

};

export const allStripeProductIdsArray = Object.values(stripeProductIds)

.flatMap(env => Object.values(env))

.flatMap(duration => Object.values(duration));

} as const;

export const allStripeProductIdsArray = [

...Object.values(stripeProductIds['live']['month']),

...Object.values(stripeProductIds['staging']['month'])

];

Bit more readable, imo. Also, it's stricter type-wise (it has the literals, not the just string)

ojeytonwilliams · 2024-05-29T15:40:28Z

shared/config/donation-settings.ts

+export const stripeProductIds = {
+  live: {
+    month: {
+      500: 'prod_Cc9bIxB2NvjpLy',
+      1000: 'prod_BuiSxWk7jGSFlJ',
+      2000: 'prod_IElpZVK7kOn6Fe',
+      4000: 'prod_IElq1foW39g3Cx'
+    }
+  },
+  staging: {
+    month: {
+      500: 'prod_GD1GGbJsqQaupl',
+      1000: 'prod_GD1IzNEXfSCGgy',
+      2000: 'prod_IEkNp8M03xvsuB',
+      4000: 'prod_IEkPebxS63mVbs'
+    }
+  }
+};


Suggested change

export const stripeProductIds = {

live: {

month: {

500: 'prod_Cc9bIxB2NvjpLy',

1000: 'prod_BuiSxWk7jGSFlJ',

2000: 'prod_IElpZVK7kOn6Fe',

4000: 'prod_IElq1foW39g3Cx'

}

},

staging: {

month: {

500: 'prod_GD1GGbJsqQaupl',

1000: 'prod_GD1IzNEXfSCGgy',

2000: 'prod_IEkNp8M03xvsuB',

4000: 'prod_IEkPebxS63mVbs'

}

}

};

const stripeProductIds = {

live: {

month: {

500: 'prod_Cc9bIxB2NvjpLy',

1000: 'prod_BuiSxWk7jGSFlJ',

2000: 'prod_IElpZVK7kOn6Fe',

4000: 'prod_IElq1foW39g3Cx'

}

},

staging: {

month: {

500: 'prod_GD1GGbJsqQaupl',

1000: 'prod_GD1IzNEXfSCGgy',

2000: 'prod_IEkNp8M03xvsuB',

4000: 'prod_IEkPebxS63mVbs'

}

}

};

What is this for? It's not imported anywhere.

@ahmaxed, all of the product ids match what we have on Stripe, and are the correct donation amounts and duration.

Thank you, Kris.

ojeytonwilliams · 2024-05-29T15:45:33Z

client/src/components/Donation/wallets-button.tsx

+          if (paymentIntent.status === 'requires_action') {
+            const { error } = await stripe.confirmCardPayment(clientSecret);
+            if (error) {
+              console.log('confirmationError');


Suggested change

console.log('confirmationError');

ojeytonwilliams · 2024-05-29T15:53:07Z

client/src/components/Donation/wallets-button.tsx

+            if (paymentMethod) {
+              displayError(t('donate.refresh-needed'));


It's not clear why having a payment method should result in an error being displayed. I would have assumed the opposite, so perhaps this needs a different name or a comment to clarify.

So the payment comes after clicking. If it comes before it means something has gone wrong.
I just mapped the use of token to paymentMethod. That error case might have been resolved.
I will give it another look

ojeytonwilliams · 2024-05-29T15:54:06Z

client/src/components/Donation/wallets-button.tsx

  postPayment,
  onDonationStateChange,
  handlePaymentButtonLoad
 }: WalletsButtonProps) => {
-  const [token, setToken] = useState<Token | null>(null);
+  const [paymentMethod, setpaymentMethod] = useState<PaymentMethod | null>(


Suggested change

const [paymentMethod, setpaymentMethod] = useState<PaymentMethod | null>(

const [paymentMethod, setPaymentMethod] = useState<PaymentMethod | null>(

Nit.

ojeytonwilliams · 2024-05-29T15:54:38Z

client/src/components/Donation/wallets-button.tsx

-        paymentProvider: PaymentProvider.Stripe,
-        token,
+    pr.on('paymentmethod', async event => {
+      setpaymentMethod(event.paymentMethod);


Suggested change

setpaymentMethod(event.paymentMethod);

setPaymentMethod(event.paymentMethod);

Nit.

ojeytonwilliams · 2024-05-29T16:01:33Z

api-server/src/server/boot/donate.js

+      const subscription = await stripe.subscriptions.retrieve(subscriptionId);
+      const isSubscriptionActive = subscription.status === 'active';
+      const productId = subscription.items.data[0].plan.product;
+      const isSubscribedInMinutes = isWithinFiveMinutes(


Why "within"? Surely we want to know that current_period_start was in the last five minutes, no?

The main purpose for this to check if it has happened recently. 5 minutes is only an arbitrary number.
Do you suggest calling it inLastFiveMinutes?

That sounds reasonable. To be honest, it was the fact that isWithinFiveMinutes checked the absolute time difference that got me wondering. That seemed very weird!

api-server/src/server/boot/donate.js

shared/config/donation-settings.ts

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

feat: update client

f066962

github-actions bot added platform: learn UI side of the client application that needs familiarity with React, Gatsby etc. scope: i18n language translation/internationalization. Often combined with language type label labels May 6, 2024

ahmaxed mentioned this pull request May 6, 2024

feat(api): add charge-stripe endpoint #54545

Open

4 tasks

initial-api

bf1b190

github-actions bot added the platform: api Server application that needs familiarity with Express, Loopback, MongoDB etc. label May 15, 2024

fix: finalize api

db66ab6

ahmaxed force-pushed the feat/update-charge-stripe branch from da0270b to db66ab6 Compare May 20, 2024 12:29

ahmaxed added 4 commits May 23, 2024 10:39

Merge branch 'main' into feat/update-charge-stripe

1ce48f0

feat: update findOrCreate

d398290

Merge branch 'main' of https://github.com/freeCodeCamp/freeCodeCamp i…

721f91c

…nto feat/update-charge-stripe

fix: add error landling

51c224f

ahmaxed commented May 28, 2024

View reviewed changes

api-server/src/server/boot/donate.js Outdated Show resolved Hide resolved

Update api-server/src/server/boot/donate.js

c2516e6

ahmaxed marked this pull request as ready for review May 28, 2024 07:35

ahmaxed requested a review from a team as a code owner May 28, 2024 07:35

fix: handle intent errors

05611d7

ahmaxed added the status: waiting review To be applied to PR's that are ready for QA, especially when additional review is pending. label May 28, 2024

ojeytonwilliams requested changes May 29, 2024

View reviewed changes

Update api-server/src/server/boot/donate.js

2482f58

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

ShaunSHamilton changed the title ~~Update the Stripe wallets to use payment intent.~~ fix: update stripe wallets to use payment intent May 30, 2024

ahmaxed added 2 commits May 30, 2024 19:37

fix: add Oliver's suggestions

6c55f99

fix: more clean up

f446afb

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: update stripe wallets to use payment intent #54668

fix: update stripe wallets to use payment intent #54668

ahmaxed commented May 6, 2024

ojeytonwilliams May 29, 2024

ojeytonwilliams May 29, 2024

scissorsneedfoodtoo May 30, 2024

ahmaxed May 30, 2024

ojeytonwilliams May 29, 2024

ojeytonwilliams May 29, 2024

ahmaxed May 29, 2024

ojeytonwilliams May 29, 2024

ojeytonwilliams May 29, 2024

ojeytonwilliams May 29, 2024

ahmaxed May 29, 2024

ojeytonwilliams May 30, 2024

-};
-export const allStripeProductIdsArray = Object.values(stripeProductIds)
-  .flatMap(env => Object.values(env))
-  .flatMap(duration => Object.values(duration));
+} as const;
+export const allStripeProductIdsArray = [
+  ...Object.values(stripeProductIds['live']['month']),
+  ...Object.values(stripeProductIds['staging']['month'])
+];

		if (paymentMethod) {
		displayError(t('donate.refresh-needed'));

	const [paymentMethod, setpaymentMethod] = useState<PaymentMethod \| null>(
	const [paymentMethod, setPaymentMethod] = useState<PaymentMethod \| null>(

	setpaymentMethod(event.paymentMethod);
	setPaymentMethod(event.paymentMethod);

fix: update stripe wallets to use payment intent #54668

Are you sure you want to change the base?

fix: update stripe wallets to use payment intent #54668

Conversation

ahmaxed commented May 6, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment