feat: Add support for setup intents in PaymentForm

basedosdados · Aug 11, 2024 · 94559a7 · 94559a7
1 parent 10a37f6
commit 94559a7
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 31 deletions.
diff --git a/next/components/organisms/PaymentSystem.js b/next/components/organisms/PaymentSystem.js
@@ -21,20 +21,35 @@ import {
 
 const stripePromise = loadStripe(process.env.NEXT_PUBLIC_KEY_STRIPE)
 
-const PaymentForm = ({ onSucess, onErro }) => {
+const PaymentForm = ({ onSucess, onErro, clientSecret}) => {
   const stripe = useStripe()
   const elements = useElements()
 
   const handlerSubmit = async (e) => {
     e.preventDefault()
 
-    const data = await stripe.confirmPayment({
-      elements,
-      redirect: 'if_required',
-    })
-
-    if(data?.error?.code === "card_declined") return onErro()
-    if(data?.paymentIntent?.status === "succeeded") return onSucess()
+    const isSetupIntent = clientSecret.startsWith('seti_');
+    if (isSetupIntent) {
+      await elements.submit();
+
+      const data = await stripe.confirmSetup({
+        elements,
+        clientSecret: clientSecret,
+        redirect: 'if_required',
+      });
+
+      if (data?.error?.code === "card_declined") return onErro();
+      if (data?.setupIntent?.status === "succeeded") return onSucess();
+
+    } else {
+      const data = await stripe.confirmPayment({
+        elements,
+        redirect: 'if_required',
+      })
+
+      if(data?.error?.code === "card_declined") return onErro()
+      if(data?.paymentIntent?.status === "succeeded") return onSucess()
+    }
   }
 
   return (
@@ -89,26 +104,12 @@ export default function PaymentSystem({ userData, plan, onSucess, onErro }) {
   }
 
   const customerCreatPost = async (id) => {
-    let secret = ""
-
-    const subscriptionCreate = await fetch(`/api/stripe/createSubscription?p=${btoa(id)}`, {method: "GET"})
+    const clientSecret = await fetch(`/api/stripe/createSubscription?p=${btoa(id)}`, {method: "GET"})
       .then(res => res.json())
 
-    if(subscriptionCreate?.clientSecret) {
-      secret = subscriptionCreate?.clientSecret
+    if (clientSecret) {
+      setClientSecret(clientSecret)
     }
-    if(secret !== "") return setClientSecret(secret)
-
-    const result = await fetch(`/api/stripe/createCustomer`, {method: "GET"})
-      .then(res => res.json())
-
-    if(result?.id) {
-      const subscriptionCreate = await fetch(`/api/stripe/createSubscription?p=${btoa(id)}`, {method: "GET"})
-        .then(res => res.json())
-      secret = subscriptionCreate?.clientSecret
-    }
-
-    return setClientSecret(secret)
   }
 
   async function customerCreat(plan) {
@@ -169,7 +170,12 @@ export default function PaymentSystem({ userData, plan, onSucess, onErro }) {
 
   return (
     <Elements options={options} stripe={stripePromise}>
-      <PaymentForm userData={userData} onSucess={onSucess} onErro={onErro}/>
+      <PaymentForm
+        clientSecret={options.clientSecret}
+        userData={userData}
+        onSucess={onSucess}
+        onErro={onErro}
+      />
     </Elements>
   )
 }
diff --git a/next/pages/api/stripe/createSubscription.js b/next/pages/api/stripe/createSubscription.js
@@ -14,10 +14,7 @@ async function createSubscription(id, token) {
         query: `
         mutation {
           createStripeSubscription (priceId: ${id}) {
-            subscription {
-              id
-              clientSecret
-            }
+            clientSecret
           }
         }
         `
@@ -38,5 +35,5 @@ export default async function handler(req, res) {
   if(result.errors) return res.status(500).json({error: result.errors})
   if(result === "err") return res.status(500).json({error: "err"})
 
-  res.status(200).json(result?.data?.createStripeSubscription?.subscription)
+  res.status(200).json(result?.data?.createStripeSubscription?.clientSecret)
 }