#edgarsantiago93_unexpected
tame totemBOT
👋 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/1221876050049368075
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
lyric pythonBOT
tight arch
HI 👋
Okay so you are mounting an Express Checkout Element?
https://docs.stripe.com/elements/express-checkout-element
And Link will not complete on Safari?
blazing kraken
correct, all wallets work both locally and qa (live server) except link on safari
yes
tight arch
Is this specific to your site? Can you complete Link payments in our demo? (the ECE page)
blazing kraken
let me double check that
tight arch
For instance, I can complete a test payment in Safari on our demo page
blazing kraken
just tested, i cant
im testing from mexico and tested with my teammates, located on the us and in costarica , they could not pay on safari
the weeird thing is that chrome for example, wokrs normally
tight arch
Okay, that's interesting. Do you have a QA server I can check with?
A publicly accessible URL?
blazing kraken
yes, gimme one sec
sorry for the delay
its going to ask you for the auth info
tight arch
I see the test interface for Link
Do you complete the form?
The Link UI launches in it's own window. Are you blocking pop-ups?
blazing kraken
and one exxtra step
please go to this url
http://qa.rocket-resume.com/_internal?_i=1
scroll down to where you see PAYMENT_BETA_PAGES v3
and make sure is active so you get the new version
no yeah, we have 2 versions , the one youre seeing is using the old payment request button
this new one uses express checkout
blazing kraken
awesome you should see this interface now
tight arch
Where? On the first link?
blazing kraken
oh yes, sorry, after a refresh you should see it
tight arch
That's what I saw the first time
Still see the same thing
I click on the Link button and I get the second pop up window to fill in my info
blazing kraken
yeah, we also see that, weve test:
- creating an account and then paying
- logging into an existing account and attempt payment
- already logged when reaching that page and attempt payment
all scenarios just show the loading button forever
like this
tight arch
Okay I am able to reproduce. And you don't see anything on your server?
blazing kraken
nope, no logs no errors
even on the inspector, all requests give a 200
i also looked on stirpe logs and we dont see anything
tight arch
Can you share the code you are using to sumbit the payment?
I'm seeing an iframe CSP error in the console. Are you loading the UI inside an iframe of your own?
blazing kraken
yes, let me get that
no, loading normally
the thing is that if you go to chrome and repeat the same exercise, it works
we first thought that maybe something we changed on this deployment broke the integration but our prod site, which was working up to last week, is also broken on safari (no new code deployed for the past 2 weeks)
this is the code we are using
// element options
export const ExpressCheckoutOptions ={
wallets: {
applePay: 'auto',
googlePay: 'auto',
},
}
// submit function
async (evt: CheckoutEvent) => {
const { error } = await elements.submit();
if (error) {
const paymentElement = elements.getElement('payment');
paymentElement?.focus();
return handleError(error, { trackingProps });
}
showElementLoadingState(true);
const addressElement = elements.getElement('address');
let addressValue: DefaultValuesOption['billingDetails'] | object = {};
if (addressElement) {
const { value } = await addressElement.getValue();
addressValue = transformProfileFromStripeData(value);
}
return dispatch(
createPurchaseActionV2(
{
purchaseId,
profile: addressValue,
returnUrl: returnUrlProp,
},
trackingProps,
) as unknown as AnyAction,
)
.then(handlePurchase)
.catch((err: Error | StripeError) => handleError(err, { trackingProps }));
},
and handle purchase after getting the result from the server
const handlePurchase = useCallback(
async ({
subscription,
trackingProps,
returnUrl,
}: {
subscription: StripeSubscription;
trackingProps: TrackingProps;
returnUrl?: string;
}) => {
// todo: append google client id (and any others) in case the return url is on a separate device
const stripeParams: ConfirmPaymentOrSetupData = {
elements: elements || undefined,
redirect: REDIRECT_IF_REQUIRED,
confirmParams: {
return_url: returnUrl,
},
};
const result = await stripe.confirmPayment({
...stripeParams,
clientSecret: subscription.latestInvoice.paymentIntent.clientSecret,
});
const { error } = result;
const intent =(result as PaymentIntentResult).paymentIntent
if (error) {
return handleError(error);
}
// INFO: Prevent handleSuccess from being called if the user cancels the payment
// https://stripe.com/docs/api/payment_intents/object#payment_intent_object-next_action
if (intent?.next_action?.type === CANCELED_CASHAPP_PAYMENT) {
return handleReset('', {});
}
if (intent?.status === REQUIRES_PAYMENT_METHOD || intent?.status === CANCELED) {
// TODO: check if there is already a payment element message for this
return handleReset('We were unable to process your payment, please try again', {});
}
if (intent?.status !== SUCCEEDED) {
return handleError();
}
return handleSuccess;
},
[elements, handleError, handleSuccess, stripe, handleReset],
);
Thanks for this. I'm discussing this situation with my colleagues
blazing kraken
thanks!
tight arch
Okay and you can confirm the logic reaches the handlePurchase callback? Can you add logs to show code execution reaching the handler?
blazing kraken
let me check
i dont believe it reaching that point bc that only gets executed after the payment is successful, comparing localhost(where it works) and qa/prod, the flow gets stuck before that
actually i dont think its even getting into handleSubmit, we pass that as the onConfirm callback to the element, we having logs in there but where are not seeing anything, also no timeouts or errors at all
tight arch
So you are saying it never even reaches elements.submit()?
blazing kraken
i dont think it is, it gets triggered when the user presses the pay now button but we are not seeing any logs or anything
tight arch
So when you run this code on localhost it completes?
Or can you repro the hanging behavior?
blazing kraken
it completes normally, this is only happening on safari desktop and on ios on both safari and chrome (might be bc they both use webkit)
tight arch
Hmmmm....
lyric pythonBOT
tight arch
At this point I think we have exhausted to the amount of real-time debugging we are able to do. Can you please write in to Support here
https://support.stripe.com/contact and provide all the detail you shared with me. We will need to attempt to reproduce this issue. Can you also provide the code that generates the payment you are attempting to collect?