#Andrew Lukin

1 messages · Page 1 of 1 (latest)

south spireBOT
digital atlas
#

Hi there. Could you post a screenshot to show what exactly is happening?

#

Also any code snippets would help

whole meteor
#

Sure! And after some time there is just a white popup, without any console errors

unknown.png
#

And the code
const createCustomer = useMutation(Client.createCustomer, {
onSuccess: (r) => {
queryClient.setQueryData<PrivateUser>(['user/me'], r);
},
});
const createSubscription = useMutation(Client.createSubscription, {
onSuccess: (r) => {
const user = queryClient.getQueryData(['user/me']) as PrivateUser;
user.stripeSubscriptionId = r.subscriptionId;
queryClient.setQueryData<PrivateUser>(['user/me'], user);
},
});

const handleSubmit = async (e: any) => {
    if (!price) return;
    e.preventDefault();
    setStale(true);
    createCustomer
        .mutateAsync()
        .then((r) => createSubscription.mutateAsync({ priceId: price.id }))
        .then((r) => processPayment(r));
};

const processPayment = async (response: Subscription) => {
    if (!stripe || !elements || !response.clientSecret) return;
    const card = elements.getElement(CardElement);
    if (!card) return;

    try {
        const { error: stripeError } = await stripe.confirmCardPayment(response.clientSecret, {
            payment_method: { card },
        });
        setStale(false);
        if (!stripeError) {
            const user = queryClient.getQueryData(['user/me']) as PrivateUser;
            user.subscriptionActive = true;
            user.subscriptionExpirationDatetime = new Date();
            user.subscriptionExpirationDatetime.setMonth(user.subscriptionExpirationDatetime.getMonth() + 1);
            queryClient.setQueryData<PrivateUser>(['user/me'], user);
            showPopup(t`Subscription activated`);
            navigate(Routing.SEARCH);
            return;
        }
        console.error(stripeError);
        setError(stripeError.type);
    } catch (e) {
        console.error(e);
    }
};
#

Also, the "Cancel" button does not fit allowed insets (but I think I can fix it by myself)

unknown.png
digital atlas
#

And is this test mode?

whole meteor
#

nope

digital atlas
#

Can you share the payment intent id as well?

whole meteor
#

one sec

#

"pi_3LjqOxDAy3xhBc4V1yythmr1"

digital atlas
#

Ah ok. So the reason that the 3ds window just stalls on that visa logo is because 3ds failed due to a timeout while trying to contact the bank/issuer

#

Have you tested this code in test mode with our test cards?

whole meteor
#

exactly, but it works via browser

#

Just tried it in a browser

unknown.png
#

with a payment intent "pi_3LjqX4DAy3xhBc4V0JuW75j5"

digital atlas
#

Have you tried in test mode with one of our test cards in the app?

whole meteor
#

no, because the code is the same as in a browser, do I need to try it? what are the expectations?

digital atlas
#

Well it's against our TOS to test in live mode with real cards

#

But mostly it's so that I can see what the test 3ds prompt looks like

#

Because that doesn't reach out to an issuer

whole meteor
#

hm, thanks! so the app env is different from the web app?

digital atlas
#

No it's not a different env. The reason the payment intent you shared broke is due to a timeout on the issuer's side. Those should be intermittent/infrequent. I just want to see what your app's flow is going to look like if you use a test card in test mode as that should more closely imitate a scenario in which the issuer doesn't have any timeout issues

whole meteor
#

got it, thanks! I'll try it tomorrow and then return

digital atlas
#

With one of those test cards I shared

#

Because testing in live mode is a breach of our TOS...