flynn_paymentelement-confirmationtoken

[slow vapor]

👋 Welcome to your new thread!

⏲️ We'll be here soon! We typically respond in a few minutes, but in some cases we might need a bit more time (e.g., server's busy, you've got a complex question, etc.).

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can 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/1253374757924245505

📝 Have more to share? Add details, code, screenshots, videos, etc. below.

[neat pier]

flynn_paymentelement-confirmationtoken

@steady tinsel do you have a clear reproduction I can look at?

[steady tinsel]

Yep. Hang on- I'll screenshot the flow.

SO this is the code where we mount the element.

[neat pier]

Sorry I can't do anything with a picture of code to help you

it'd be like sharing a picture of your car and asking why it doesn't start

[steady tinsel]

This is the dialog for context.

[neat pier]

Sorry let's pause: this is complex and likely a bug in your real live app. I won't be able to do much with pictures. I need to see a live repro somewhere to help you debug

[steady tinsel]

I'll paste code- just giving context. This should be pretty simple.

I can't share a repo- it's private

[neat pier]

Then the next step is to make a really simple repro somewhere outside of your code to understand what's going wrong

[steady tinsel]

I'm likely just missing a fieldc. This is where I mount the element. const options: StripeElementsOptionsMode = {
mode: 'payment',
amount: this.amount,
currency: 'usd',
paymentMethodCreation: 'manual',
setupFutureUsage: 'off_session',
paymentMethodTypes: [ 'card' ],
captureMethod: 'manual',
paymentMethodOptions: {
card: {
require_cvc_recollection: true,
},
},
appearance: {},
};
this.elements = this.paymentProcessor.stripeService.elements(options);
this.elements.create('payment', {}).mount('#payment-element');

And this is where I try to submit and create the payment.

this.elements.submit().then((result) => {
if (result.error) {
this.messageService.error('Card payment failed: ' + result.error.message);
}
else if (this.elements && this.paymentProcessor.stripeService) {
const data: CreateConfirmationToken = {
elements: this.elements,
params: {
payment_method_data: {
billing_details: {
name: this.recordPaymentForm.controls.customer.value?.name,
},
},
},
};
this.paymentProcessor.stripeService.createConfirmationToken(data).then((stripeResult) => {
if (stripeResult.error) {
this.messageService.error('Payment failed: ' + stripeResult.error.message);
} else {
this.submitPayment();
}
});
}
});

Submitting the element works. But this call syas there;'s no Payment Element this.paymentProcessor.stripeService.createConfirmationToken(data).then((stripeResult)

[neat pier]

I'm really sorry there's not much I can do with just code right now

[steady tinsel]

Okay. I don't know how to reporduce this outside the context. The issue is it's an Angular app and the element has to be added on the fly.

I'll see what I can do.

SImple cases always work.

[neat pier]

yeah the fact that simple case always works confirms it's an issue with the order of your code. Unfortunately I don't know how to help you debug this without seeing it live in a simplified context

[steady tinsel]

Do you guys have any documentation using STripe Elements using Typsescript purchance? That iosn't React?

[neat pier]

no

[steady tinsel]

Okay- thanks for your time! 🙂

[neat pier]

I want to help, but I do need you to focus on a simple reproduction first, outside of your code

[steady tinsel]

I'll see if I can create one, but that will take time.