Conversation
| @@ -1,9 +1,14 @@ | |||
| import React, { useState } from 'react'; | |||
| import React, { forwardRef, useImperativeHandle, useState } from 'react'; | |||
| import { CardElement, useElements, useStripe } from '@stripe/react-stripe-js'; | |||
There was a problem hiding this comment.
Can stick with CardElement for demo day, but Stripe deprecated it, and recommends using PaymentElement moving forward
| @@ -1,9 +1,14 @@ | |||
| import React, { useState } from 'react'; | |||
| import React, { forwardRef, useImperativeHandle, useState } from 'react'; | |||
| import { CardElement, useElements, useStripe } from '@stripe/react-stripe-js'; | |||
There was a problem hiding this comment.
This works for demo day, but Stripe deprecated CardElement in favor of PaymentElement. Would be good to keep in mind to prep for deployment. The flow should be something like:
- Pass clientSecret to
<Elements options={{ clientSecret }}> - Use in the form
- Call
stripe.confirmPayment()on submit
|
|
||
| try { | ||
| const paymentIntent: Stripe.PaymentIntent = | ||
| await this.stripe.paymentIntents.create({ |
There was a problem hiding this comment.
It's good practice to also include an idempotency key as an argument to prevent multiple payment intents from being made if the network drops in the middle of this call.
We can generate one using crypto.randomUUID() when DonationForm loads and then pass it in here and in payments.service.ts
| amount: request.amount, | ||
| currency: request.currency, | ||
| metadata: request.metadata, | ||
| payment_method_types: ['card', 'us_bank_accounts'], |
There was a problem hiding this comment.
Stripe recommends letting them manage payment methods dynamically by using automatic_payment_methods: { enabled: true }
| try { | ||
| // Step 1: Create PaymentIntent | ||
| const amountInCents = Math.round(amount * 100); | ||
| const paymentIntentResponse = await apiClient.createPaymentIntent({ |
There was a problem hiding this comment.
Not 100% sure how this works, but it seems like recurring donations would fall back to one-times. There's a createSubscription method in payments.service.ts but it's not currently wired up to anything.
4 participants
Description
Implemented the stripe api within the donation form and shadcn in step 2 component.
Testing & Verification
When you put in a card that should fail on charge 4000 0000 0000 0341
Verification Steps:
When you put in a card that should succeed 4242 4242 4242 4242
Closes #42