#choward1538_code
sturdy kestrelBOT
👋 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/1263931351942299690
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
noble plinthBOT
Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
- choward_applepay-confirm-error, 1 day ago, 9 messages
odd island
my dev console didn't provide much helpful insight
Just this:
Unhandled Promise Rejection: [object Object]
fallow kestrel
Is there somewhere I can reproduce the error?
odd island
Yes! go here
you'll need to be on a mobile device where you have apple pay cards in your wallet to test
fallow kestrel
Oh, that doesn't really help... I wanted to see dev tools
odd island
you can connect your mobile device to your laptop and see the dev tools!
fallow kestrel
Can you show me your full client-side code here for your submit handler?
fallow kestrel
Do you fetch your backend before calling elements.submit()?
Oh or you may not call elements.submit() at all if you are doing the intent-first integration
Which is fine
odd island
yep no elements.submit
fallow kestrel
But yeah if you can show me that code, it would help
odd island
surething
const placePreorder = async () => {
try {
updateAbandonedCart();
track_preorder_buyer_pressed_order(
oemProfileProps,
cartCosts.totalCartCost,
checkoutCart,
);
// Initial inputs ready
setErrorStringAndHideAfterDelay('');
// Disable form submission until Stripe.js has loaded.
if (!stripe || !elements) {
return false;
}
// validate initial inputs
const valResult = await placeOrderInitialErrorChecking();
if (!valResult) {
track_preorder_placed_failed(
oemProfileProps,
cartCosts.totalCartCost,
checkoutCart,
'validationFailed',
);
return false;
}
// toggleProcessingOrderModalOpen(true);
const { preorders, buyer } = await createPreorderDBObjs();
const preorderIds = preorders.map((preorder) => preorder.id);
const currentUrl = new URL(window.location.href);
// Set the new pathname directly to '/PurchaseSuccessPage'
currentUrl.pathname = '/PurchaseSuccessPage';
// Set the redirectUrl to the updated URL
const redirectUrl = currentUrl.toString();
await updatePaymentIntentAmount(preorderIds, buyer.id);
const confirmParams = {};
const stripePaymentParams = {
elements,
confirmParams,
redirect: 'if_required',
};
if (!window.Cypress) {
stripePaymentParams.confirmParams.return_url = redirectUrl;
}
const result = await stripe.confirmPayment(stripePaymentParams);
hm it seems i cant send the second half
sturdy kestrelBOT
🧑💻 How to format code on Discord
Inline code: wrap in single backticks (`)
This:
The variable `foo` contains the value `bar`.
Will turn into this:
The variable
foocontains the valuebar.
Code blocks: wrap in three backticks (```)
Also, you can specify the language after the first three backticks to get syntax highlighting.
This:
```javascript
function foo() {
return 'bar';
}
```
Will turn into this:
function foo() {
return 'bar';
}```
Notes about **code blocks**:
- Specifying the language is optional (e.g., you can omit `javascript` in the example above)
- If you don't specify the language you won't get syntax highlighting
- When you're inside a code block (after you type \`\`\`) the `Return`/`Enter` key will add a new line instead of sending your message
- Once you end the code block `Return`/`Enter` works normally again
You can [read more about message formatting on Discord's website.](https://support.discord.com/hc/en-us/articles/210298617)Sorry let me format better
fallow kestrel
Ah okay yeah I'm pretty sure I know the issue
odd island
ah sick
fallow kestrel
So Apple and Google both have security precautions where they want the payment modals to open very quickly after the click handler. Usually you will see an error in your console if you run into this but not sure why it isn't showing for you. Anyways, try running a test where you either comment everything out in your handler before confirmPayment() or move that to the first thing in the handler code.
odd island
k I'll give it a try
If this does work, what is the suggested course of action here? We implement a SAGA pattern that creates db objects first, runs validation on inputs, etc before the final step of trying to confirm a payment. Is there a way to trick the code into activating another click handler after the initial click that fires after doing all my necessary pre-confirm-payment logic but right before attempting to confirm the payment intent?
fallow kestrel
No not really. You'll need to refactor a bit unfortunately. You may want to look at: https://docs.stripe.com/payments/build-a-two-step-confirmation
Actually sorry simpler would be to use https://docs.stripe.com/payments/accept-a-payment-deferred?platform=web&type=payment
That would be the least amount of refactoring
But basically you would call elements.submit() immediately (which is what actually triggers the modal to open in that flow) and then you call your backend after that to create your PaymentIntent and do said validations.
That flow is actually a bit superior as you don't end up with a bunch of incomplete PaymentIntents as they aren't actually created until the customer hits your "pay" button
odd island
yep that seems to fix it
fallow kestrel
Yeah unfortunately there is no way around this since it is an Apple limitation