💪🦊

[muted quail]

hello

what's your line of code

it looks like you might not be resolving the promise

but logging out the promise itself?

[torpid ingot]

with await it just gets stuck on it

[muted quail]

let's take step by step

can you log out what elements.getElement('cardExpiry') is

just want to make sure an Element exists

[torpid ingot]

thats a good shout actually

[muted quail]

second, why are you passing currency ?

you don't need to do that while creating a Token

[torpid ingot]

needed for connect account

[muted quail]

ah

[torpid ingot]

elements.getElement

[muted quail]

gotcha ok that looks good.

and just to confirm, you're creating a Token representing a debit card right, to later attach to a Connect account as its external account?

[torpid ingot]

yep

im using the 4242 card

but that shouldnt matter at this stage

[muted quail]

yep

now next, can run that code again and
1/ check the console logs for any errors / warnings
2/ check the network tab of browser console to see if a request is even being made

[torpid ingot]

sorry should've mentioned yeah I checked the network

[muted quail]

also what library are you using? can you send me the link for react-stripe-elements?

(cause that's technically the outdated one)

yeah I checked the network
what was in there?

[torpid ingot]

nothing there

this is the package

[muted quail]

ah that is the right package, react-stripe-js

[torpid ingot]

I think thats what mentioned on official stripe

[muted quail]

yep

and can you paste the log output of (currently) what you get logged for token ?

[torpid ingot]

uh

nothing currently because it just gets stuck in the await

I can make it without the await so a promise is returned

but it will just say pending

[torpid ingot]

so it doesnt get to console.log(token)

I can try to import the basic js stripe just for this purpose but that seems weird

[keen plover]

Hi there 👋 taking over for @muted quail

You said there's nothing in your network logs that indicate createToken() is actually getting to Stripe?

[torpid ingot]

yeah

I can try again

nope nothing

[rapid flower]

👋 how are you initializing Stripe? Can you share your full code for that Component?

Also it should be CardCvcElement, no?

Woops

Expiry

Not CVC

CardExpiryElement

[torpid ingot]

it can be either of the 3 I'm pretty sure, thats what the documentation said at least

it said something along the lines of "you dont need to submit all elements, one will suffice"

one sec grabbing component code

[rapid flower]

Yeah butt cardExpiry isn't the React Element

[torpid ingot]

autofilled from typescript I assume

one sec grabbing component

[rapid flower]

Ah okay using TS

[torpid ingot]

Main Component

import {
  CardCvcElement,
  CardElement,
  CardExpiryElement,
  CardNumberElement,
  Elements,
  PaymentElement,
} from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import React, { useEffect, useRef } from "react";
import { useTranslation } from "react-i18next";
import { createStripe } from "../../api/auth";
import { stripeKey } from "../../api/config";
import { useUserContext } from "../../context/user";
import { CardInfo } from "./CardInfo";
import "./paymentregister.scss";
const stripe = loadStripe(stripeKey);

const PaymentRegister = () => {
  useEffect(() => {}, []);
  const { t } = useTranslation();
  const { state, GET_CLIENT_SECRET } = useUserContext();

  return (
    <div className="container-m" style={{ paddingTop: "140px" }}>
      <div className="payment-details">
        <h1>{t("payment-register.title")}</h1>
        <div className="payment-details-fields">
          <Elements stripe={stripe}>
            <CardInfo></CardInfo>
          </Elements>
        </div>
        <p className="payment-details-tos">
          {t("payment-register.tos")}{" "}
          <a target="_blank">{t("payment-register.our-tos")}</a>{" "}
          {t("payment-register.tos2")}{" "}
          <a target="_blank" href="https://stripe.com/legal/connect-account">
            {t("payment-register.stripe-tos")}
          </a>
        </p>
      </div>
    </div>
  );
};

export default PaymentRegister;

CardInfo

import {
  CardCvcElement,
  CardExpiryElement,
  CardNumberElement,
  useElements,
  useStripe,
} from "@stripe/react-stripe-js";
import React from "react";
import { useTranslation } from "react-i18next";

export const CardInfo = () => {
  const { t } = useTranslation();
  const stripe = useStripe();
  const elements = useElements();
  const submitDetails = async () => {
    debugger;
    const token = await stripe.createToken(elements.getElement("cardExpiry"), {
      currency: "EUR",
    });
    console.log(token);
  };

  return (
    <>
      <CardNumberElement
        className="number"
        options={{ placeholder: "Card Number" }}
      ></CardNumberElement>
      <div className="payment-details-fields-double">
        <CardCvcElement className="cvc"></CardCvcElement>
        <CardExpiryElement className="expiry"></CardExpiryElement>
      </div>

      <a
        className="payment-details-submit"
        onClick={() => {
          submitDetails();
        }}
      >
        {t("payment-register.submit")}
      </a>
    </>
  );
};

[rapid flower]

Can you add event.preventDefault() in submitDetails?

[torpid ingot]

no that didnt work

I can see why that could've been the issue tho

[rapid flower]

Yeah okay didn't think so if you are reaching the promise without await

[torpid ingot]

but no 😞

[rapid flower]

This is very strange

[torpid ingot]

I saw online something about garbage collection?

but I didnt read enough to know if this is related

I can try finding it agian

[rapid flower]

Hmm not familiar with that

[torpid ingot]

I can try importing it with ES module and see if that one works?

maybe react issue?

[rapid flower]

Wait a sec

Doesn't debugger; work like a breakpoint?

[torpid ingot]

it does

[rapid flower]

Did you put that in to figure this out? Or it has always been there?

[torpid ingot]

Ill try rerunning it without debug

[rapid flower]

👍

[torpid ingot]

nope didnt change

[rapid flower]

This is just local, right? No where I can test myself?

[torpid ingot]

yeah this is local

Ill try importing this through ES module

and not react-stripe

might as well

[rapid flower]

Can you try changing cardExpiry to CardCvcElement or is TS not going to let you do that?

[torpid ingot]

okay one sec

thats for getElement

[rapid flower]

Yeah okay thanks

Okay let me repro on my end as well

Give me a min

[torpid ingot]

tried to import loadStripe as ES module, same issue

can send you the styles if you need

if you are carbon copying the components

[rapid flower]

I rarely ever use TS. Why does it not recognize stripe or elements? Object is possibly null

What do I need to do 😅

[torpid ingot]

oh uh the components themselves are JS

but the intellisense is getting the suggestions for what to input to getElements from TS

[rapid flower]

lol okay

mine works 😦

[torpid ingot]

version compare?

[rapid flower]

I made mine really simple

Here is what I have:

  CardCvcElement,
  CardExpiryElement,
  CardNumberElement,
  useElements,
  useStripe,
} from '@stripe/react-stripe-js'
import React from 'react'

export const CheckoutForm = () => {
  const stripe: any = useStripe()
  const elements: any = useElements()

  const submitDetails = async (e: any) => {
    e.preventDefault();
    
    const token = await stripe.createToken(elements.getElement('cardExpiry'), {
      currency: 'EUR',
    })
    console.log(token)
  }

  return (
    <>
      <CardNumberElement
        className="number"
        options={{ placeholder: 'Card Number' }}
      ></CardNumberElement>
      <div className="payment-details-fields-double">
        <CardCvcElement className="cvc"></CardCvcElement>
        <CardExpiryElement className="expiry"></CardExpiryElement>
      </div>
    <button
      

        onClick={(e) => {
          submitDetails(e)
        }}
        >test button
      </button>
    </>
  )
}

export default CheckoutForm

  CardCvcElement,
  CardElement,
  CardExpiryElement,
  CardNumberElement,
  Elements,
  PaymentElement,
} from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import React, { useEffect, useRef } from "react";
import CheckoutForm from './CheckoutForm'
const stripe = loadStripe("pk_test_123");

const App = () => {
  useEffect(() => { }, []);

  return (

    <Elements stripe={stripe}>
      <CheckoutForm></CheckoutForm>
    </Elements>
  );
};

export default App;```

Try something super simple like that in yours?

I need to step away for ~45 mins

[torpid ingot]

no its okay

and I'm sorry because

i just restarted my server

and it worked

[rapid flower]

lol!

[torpid ingot]

not server

but the react app

[rapid flower]

Your sever shouldn't be involved

Yeah okay

lol the old turn off and turn on

classic.

[torpid ingot]

christ

[rapid flower]

Bummer it took this long

I should have recommended that earlier 😅

But glad it is figured out

[torpid ingot]

lmao I was about to say is it my fault for not thinking about it or yours

thanks for being here with me tho lmao

[rapid flower]

haha just glad it is solved

[torpid ingot]

yeah thank you

[rapid flower]

Good luck going forward! Pop back in if you run into anything else