#tartar

1 messages · Page 1 of 1 (latest)

native pivotBOT
trim hinge
#

Why do you create another Payment Intent while clicking the pay? You could use the Payment Intent created during loading phase when making the payment.

round mantle
#

I did, but in my dashboard it always ends up with two pi. one incomplete, one complete. So I doubted one from loading, one from clicking (confirm)

trim hinge
#

Could you share the code where you create the payment intent when loading and clicking the pay button?

round mantle
#

this is backend

const paymentIntent = async (amount: number, account_id: string) => {
    const data = await stripe.paymentIntents.create({
      amount: amount * 100,
      currency: 'usd',
      automatic_payment_methods: {
        enabled: true,
      },
      on_behalf_of: account_id,
    });
    return data;
  };
#

this is front

import React from 'react';
import { loadStripe } from '@stripe/stripe-js';
import { Elements } from '@stripe/react-stripe-js';
import useSWR from 'swr';
import { FetchMutate } from '../utils/fetcher';

import CheckoutForm from '../components/checkoutForm';

const stripePromise = loadStripe(
  process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);

export default function Payment() {
  // const [clientSecret, setClientSecret] = React.useState('');

  const { data, error } = useSWR(
    [
      `${process.env.NEXT_PUBLIC_BASE_URL}/stripe/payment-intent`,
      {
        data: { amount: 12, account_id: 'acct_1ME2Z1RT0SC4FVHR' },
        method: 'POST',
      },
    ],
    FetchMutate
  );

  if (error) return <div>Failed to load </div>;
  if (!data) return <div>Loading...</div>;
  const clientSecret = data.data.client_secret;

  const appearance = {
    theme: 'stripe',
  };
  const options = {
    clientSecret,
    appearance,
  };

  return (
    <div>
      {clientSecret && (
        <Elements options={options} stripe={stripePromise}>
          <CheckoutForm />
        </Elements>
      )}
    </div>
  );
}
#

<CheckoutForm /> I copied from the docs

trim hinge
#

Which docs?

round mantle
trim hinge
#

The code looks fine. I'm not familiar with useSWR. Is it possible to put log in useSWR to check if useSWR is called twice?

#

It's likely that useSWR is loaded twice

round mantle
#

ok I will look for it more