#ivy-b-fooda_stripejs-issues-with-issuing
1 messages · Page 1 of 1 (latest)
👋 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/1473405541056381128
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
Hello! Taking a look at this...
I am not aware of needing to enable anything to use issuing elements. Are you following this integration guide? https://docs.stripe.com/issuing/elements
Yes, I am following this integration guide. When I get to the
const nonceResult = await stripe.createEphemeralKeyNonce({
issuingCard: cardId,
});
step, the Promise just hangs
And for overall troubleshooting steps I've taken here:
- Stripe.js loads successfully
- Stripe object initializes correctly
- typeof stripe.createEphemeralKeyNonce === "function"
- We are using a valid publishable key
- The call is executed in browser context (not server)
- No ad blockers / extensions enabled
- The Promise neither resolves nor rejects
- No network request is made to /v1/issuing/ephemeral_keys/nonces
- No console errors appear
Are you able to successfully call other Stripe JS functions from the same place in your code?
Checking another call, one moment
I tested other Stripe.js methods like createToken, and those Promises also remain pending indefinitely. It appears Stripe.js is not successfully completing backend communication in this environment.
Stripe.js is loading from https://js.stripe.com/clover/stripe.js
Is this expected? Could this account or publishable key be on a restricted/beta loader variant?
Sorry for the delay! I am juggling another thread.
Quick update: we tested other Stripe.js methods (e.g., createToken('card', ...)) and those also hang and never trigger a network request. Stripe.js loads successfully, but no calls to api.stripe.com are made at all. This suggests a broader Stripe.js network initialization issue rather than Issuing-specific configuration. Any ideas what could cause Stripe.js to load but never dispatch API requests?
Yes, it looks like the problem is not with createEphemeralKeyNonce but with your Stripe JS integration as a whole. Have you successfully used your test publishable key for anything else before?
Also, are you including Stripe.js directly or as a module? https://docs.stripe.com/js/including
I just did some additional isolation testing. And I think I confirmed the issue is broader than Issuing Elements:
• stripe.createToken('card', ...) also hangs
• No requests to api.stripe.com appear in Network
• No console errors
• Stripe.js loads successfully
I then tested directly in the browser console:
fetch("https://api.stripe.com/v1/tokens", { method: "POST" })
That request also remains pending indefinitely (no rejection, no response, no CORS error).
However, our backend can successfully call Stripe APIs (e.g., creating ephemeral keys), so Stripe itself is reachable from our servers.
At this point I suspect a browser/network-level restriction, but wanted to confirm whether Stripe.js has any known behavior like this.
Yes — I am loading Stripe.js via @stripe/stripe-js (using loadStripe(...)), not by manually adding the <script> tag.
Thanks for confirming and testing! I agree there's likely a browser issue (ad block, extensions, CPS, cross-origin, DNS, network/proxy settings, VPN) at play.
It might help to test in incognito, with different browsers, or on differetn devices to see if the issue persists.
I have been doing most of these tests in incognito. I am testing a couple other devices to see what is going on with it.
I confirmed:
• Stripe.js is loading (version “clover”)
• createToken() triggers a request to /v1/tokens and receives 401
• However, the Promise never resolves or rejects
We are using @stripe/stripe-js@8.7.0 via loadStripe (module import), not via script tag.
Are there any known cases where Stripe.js Promises hang despite receiving an API response?
Hi there 👋 jumping in as my teammate needs to step away soon. No, not that I know of offhand. Are you able to share your test site where you're seeing this behavior with us?
I am testing locally right now and I will ask if I can share the test site.
Hhmm, can you share the code you're using to consume the Promise?
Yes. Loading Stripe here:
import { loadStripe } from '@stripe/stripe-js';
export const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY!, {
betas: ['issuing_elements_2', 'issuing_add_to_wallet_button_element_1'],
});
Issuing Elements used here:
import { stripePromise } from '@/services/stripe';
type Props = {
stripeCardId: string;
};
export default function FoodaIssuingCard({ stripeCardId }: Props) {
const containerRef = useRef<HTMLDivElement>(null);
const stripeElementRef = useRef<any>(null);
const [fetchKey] = useLazyQuery(getStripeCardEphemeralKey);
useEffect(() => {
if (!stripeCardId) return;
let isMounted = true;
const initialize = async () => {
try {
const stripe = await stripePromise;
if (!stripe || !containerRef.current) return;
const { nonce, error } = await stripe.createEphemeralKeyNonce({
issuingCard: stripeCardId,
});
if (error || !nonce) {
console.error('Stripe nonce error:', error);
return;
}
const { data } = await fetchKey({
variables: { stripeCardId, nonce },
});
const ephemeralKeySecret =
data?.getStripeCardEphemeralKey?.ephemeralKey;
if (!ephemeralKeySecret || !isMounted) {
console.error('Failed to retrieve ephemeral key');
return;
}
const elements = stripe.elements();
const cardNumberElement = elements.create(
'issuingCardNumberDisplay',
{
issuingCard: stripeCardId,
nonce,
ephemeralKeySecret,
}
);
stripeElementRef.current = cardNumberElement;
cardNumberElement.mount(containerRef.current);
} catch (err) {
console.error('FoodaIssuingCard initialization failed:', err);
}
};
initialize();
return () => {
isMounted = false;
if (stripeElementRef.current) {
stripeElementRef.current.unmount();
stripeElementRef.current = null;
}
};
}, [stripeCardId, fetchKey]);
return <div ref={containerRef} />;
}
Nothing is jumping out at me there so far, but I'm not the most familiar with React.
I keep coming back to this part:
• createToken() triggers a request to /v1/tokens and receives 401
That makes me wonder if something is going on with the publishable key being used.
Hi there,
taking over for my colleague who has to step away.
The code you shared, is that the exact code you are using for the Issuing Element?
Yes, this is the exact code I am using for the Issuing Element at the moment.
I can confirm whether we are using that api key for our BE calls that are successful. I believe it should be the same.
That makes sense. I just noticed a few things in the code.
There is an error inside the if condition.
const stripe = await stripePromise;
if (!stripe !containerRef.current) return;
You would need either a || or && to concatenate the conditions
Same in this if statement
if (error !nonce) {
console.error('Stripe nonce error:', error);
return;
}
Another question I have is, where does the fetchKey function come from, that is needed for the ephemeral Key? I don't see an import for that.
That must've been an issue with the chat copy.
import { getStripeCardEphemeralKey } from '@/api/fooda_card/get_stripe_card_ephemeral_key';
Cut off import due to limited characters earlier.
Ok, good. Just wanted to make sure
Since this is a frontend call, that is not even reaching our system it is hard to investaigte from here. I understand right, that we don't have a link to that integration so we could investigate?
This version of it is not deployed in a staging environment at this time. I am still waiting on confirmation for sharing our staging environment for investigation.
The code above is what we are using to attempt to display the issuing elements as of now. The Stripe sandbox account is acct_1SZZIUCtZpQ7y6MP.
Yeah I looked into your account but can't find any logs regarding ephemeral keys so far. Looks like the code already breaks before that
Yes and through logging the area where we get the hanging Promise is:
const { nonce, error } = await stripe.createEphemeralKeyNonce({
issuingCard: stripeCardId,
});
Issuing card that I am primarily testing on exists. No errors around it, Stripe loads.