#krish4029_api

1 messages · Page 1 of 1 (latest)

fast pumiceBOT
#

👋 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/1437885050392805496

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

burnt hawk
#

Where did you get "Error: Clover version is not supported" error from?

maiden kelp
#

The error is from my browser console - seems to originate from stripe.js.

this a small snippet with of my front end code.

import { CheckoutProvider } from "@stripe/react-stripe-js/checkout";
import { loadStripe } from "@stripe/stripe-js";

<CheckoutProvider stripe={stripePromise}
  options={{
    clientSecret: clientSecret,
    elementsOptions: {appearance},
  }}
>
  <CheckoutSessionPayment {...{checkoutSessionId, creditBundlePaymentId, onSuccess, onError}} />
</CheckoutProvider>

contents of CheckoutSessionPayment:

import {
  PaymentElement
} from '@stripe/react-stripe-js/checkout';
import {
  useCheckout
} from '@stripe/react-stripe-js/checkout';
<div className="checkout-session-container">
  <form onSubmit={handleSubmit}>
    <PaymentElement />
  </form>
</div>
burnt hawk
#

Could you share the code where you create stripePromise? Which version of react-stripe-js and stripe-js are you using?

maiden kelp
#

versions:

"@stripe/react-stripe-js": "^5.0.0",
"@stripe/stripe-js": "^8.0.0",

I'll post the complete files if it isn't too much:
CheckoutSessionWrapper is the outer wrapper where IoadStripe and call backend to create the checkout session. From the client_Secret of this checkout session, I initialize CheckoutProvider. CheckoutSessionPayment is the child component which has the PaymentElement.

fast pumiceBOT
hushed moon
#

Try removing your package.json.lock file and running npm update

#

just in case you're running an older version of those libs

maiden kelp
#

CheckoutSessionWrapper.tsx - outer component

import React, { useState, useEffect } from "react";
import { CheckoutProvider } from "@stripe/react-stripe-js/checkout";
import { loadStripe } from "@stripe/stripe-js";
import CheckoutSessionPayment from "./CheckoutSessionPayment";

const CheckoutSessionWrapper = () => {
  const [stripePromise, setStripePromise] = useState(null);
  const [clientSecret, setClientSecret] = useState(null);
  const [checkoutSessionId, setCheckoutSessionId] = useState(null);
  const getStripeKey = async () => {
    try {
      const response = await AxiosAPIUtils.get(Routes.FETCH_STRIPE_KEY);
      return response["publishable_key"];
    }
  };

  const initializeCheckoutSession = async () => {
    try {
      const response = await AxiosAPIUtils.post(
        Routes.CREATE_CHECKOUT_SESSION
      );
      
      setClientSecret(response.clientSecret);
      setCheckoutSessionId(response.checkoutSessionId);
    }
  };

  useEffect(() => {
    const setupStripe = async () => {
      const stripeKey = await getStripeKey();
      if (stripeKey) {
        setStripePromise(loadStripe(stripeKey, { betas: ["custom_checkout_beta_5"] }));
      } else {
        setLoading(false);
      }
    };
    setupStripe();
  }, []);

  useEffect(() => {
    if (stripePromise) {
      initializeCheckoutSession();
    }
  }, [stripePromise]);

  if (loading || !stripePromise || !clientSecret) {
    return (
      <div className="center">
        <Spinner size="large" speed="slow" className="spinner" />
      </div>
    );
  }

  return (
    <>
    { stripePromise && clientSecret && <div className="checkout-session-container">
      <CheckoutProvider stripe={stripePromise}
        options={{
          clientSecret: clientSecret
        }}
      >
        <CheckoutSessionPayment {...{checkoutSessionId, creditBundlePaymentId, onSuccess, onError}} />
      </CheckoutProvider>
    </div>}
    </>
  );
};
export default CheckoutSessionWrapper;
maiden kelp
#

I use yarn i did clear cache, remove node_modules folder and ran yarn install. Let me delete the lock file and try again

hushed moon
#

Gotcha. Yeah try that and se if that makes a difference

maiden kelp
#

I tried deleting yarn.lock. but got the same error. APi request for creating checkout session - req_lp3IfPzQwlCT5E
Browser console error: Error: Clover version is not supported from stripe.js.

i see a minified version of stripe.js in Sources. If it helps, it originates from this function:

_attachCustomCheckoutMethods

hushed moon
#

hmm, can you try removing custom_checkout_beta_5 header?
The feature is GA so you don't need that value

maiden kelp
#

okay!

#

That helped. Thanks a lot @hushed moon ! 😄