#ilan_code

1 messages · Page 1 of 1 (latest)

strange pulsarBOT
#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1362428071344345118

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

vagrant grotto
# 
const ExpressCheckout: FC = () => {
  const stripe = useStripe();
  const elements = useElements();
  const [loading, setLoading] = useState<boolean>(false);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);

  const onConfirm: ExpressCheckoutElementProps["onConfirm"] = async (e) => {
    if (!stripe || !elements) return;

    setLoading(true);
    setErrorMessage(null);

    const { error } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: `${window.location.origin}/payment-complete`,
      },
    });

    if (error) {
      setErrorMessage(error.message || "An unknown error occurred.");
    }

    setLoading(false);
  };

  const onReady: ExpressCheckoutElementProps["onReady"] = () => {};

  return (
    <ExpressCheckoutElement
      onConfirm={onConfirm}
      onReady={onReady}
      options={{
        paymentMethods: { googlePay: "always", applePay: "always" },
        buttonType: { googlePay: "pay" },
        buttonHeight: 50,
        layout: { maxColumns: 3 },
      }}
      className="mb-1"
    />
  );
};

export default function StripeCheckout() {
  return (
    <Elements
      stripe={stripe}
      options={{
        appearance: {
          theme: "stripe",
        },
        clientSecret:
          "pi_3REst9QKwfuVfbMT027upvdt_secret_ln9exP9fQ81Ihm5c4ZQAeu3xY",
      }}
    >
      <ExpressCheckout />
      <CheckoutForm />
    </Elements>
  );
}

There is more information about my code

# 
    const onClick: ExpressCheckoutElementProps["onClick"] = async ({
      expressPaymentType,
      resolve,
    }) => {
      if (!elements) return;

      const isTermsAccepted = true;

      if (!isTermsAccepted) return;

      const newAmount =
        expressPaymentType === "paypal" ? Math.round(1099 * 1.05) : 1099;

      elements.update({ amount: newAmount });

      return resolve();
    };

And this is what I tried when I wanted to pass directly the amount instead of client_secret

vivid owl
vagrant grotto
#

Thanks for your response.

As i can see there, first you need to pass the information about the amount, the currency inside the Elements component, then when you want to pay with the PaymentElement you need to create a payment intent before the stripe.confirmPayment

And if you want to use ExpressCheckoutElement i'ts pretty much the same but you can create paymentIntent with a different amount ?

vivid owl
#

The first part sounds right, can you reword the second part please? I'm unsure that I fully follow

strange pulsarBOT
vagrant grotto
#

Ok, look at my code bellow :

export default function StripeCheckout() {
  return (
    <Elements
      stripe={stripe}
      options={{
        amount: 1099,
        currency: "eur",
        mode: "payment",
      }}
    >
      <ExpressCheckout />
      <CheckoutForm />
    </Elements>
  );
}

So this is my Elements component

There I pass the amount, the mode: 'payment' etc...

Thanks to mode: 'payment' im able there in my ExpressCheckout component to update the price with the onClick function

const ExpressCheckout: FC = () => {
  const elements = useElements();
  const onConfirm: ExpressCheckoutElementProps["onConfirm"] = () => {
    // Logic for confirming the payment
    console.log("DONE");
  };

  const onClick: ExpressCheckoutElementProps["onClick"] = async ({
    expressPaymentType,
    resolve,
  }) => {
    if (!elements) return;

    const isTermsAccepted = true;

    if (!isTermsAccepted) return;

    const newAmount =
      expressPaymentType === "paypal" ? Math.round(1099 * 1.05) : 1099;

    elements.update({ amount: newAmount });

    return resolve();
  };

  const onReady: ExpressCheckoutElementProps["onReady"] = () => {};

  return (
    <ExpressCheckoutElement
      onConfirm={onConfirm}
      onReady={onReady}
      onClick={onClick}
      options={{
        paymentMethods: { googlePay: "always", applePay: "always" },
        buttonType: { googlePay: "pay" },
        buttonHeight: 50,
        layout: { maxColumns: 3 },
      }}
      className="mb-1"
    />
  );
};
#

But when the function onConfirm is triggered, what i should do ? Generate a client_secret with the Paypal fees I want to add, and call stripe.confirmPayment or i need to do something else ?

peak wing
#

👋 stepping in as pgskc needs to step away

#

Yep all you need to do is create your PaymentIntent for the corresponding final amount you want to charge.

#

So you pass that amount to your backend when you generate the client secret

#

Then pass the client secret back and confirm

vagrant grotto
#

Hi @peak wing thanks for your response. I don't need to use something like elements.confirm() I think it's mandatory but i don't really understand why

peak wing
#

elements.confirm() is not a Stripe.JS method so I'm not sure what you are referring to

#

You would use stripe.confirmPayment()

vagrant grotto
#

Yes it is look at your documentation there :

image.png
#

It's elements.submit() sorry

peak wing
#

Yes elements.submit() is necessary and is what actually presents the wallet modal.

vagrant grotto
#

Ok thanks I think everything work correclty

#

Thanks for you time !