jan_paymentelement-types

[true plinth]

👋 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/1250128686926266418

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

[wicked granite]

jan_paymentelement-types

@simple belfry I'll do my best to help but I'm not really experienced with JS types.

Can you explain how you're using types in your Angular app?

[simple belfry]

Yes, I use Strict mode so I have to make a Type for each var.
So I defined elementsInstance as follows:
import { loadStripe, Stripe, StripeElements } from '@stripe/stripe-js';
private elementsInstance: StripeElements | null = null;

So in this Function I would to create the payment element:
async createPaymentElement(): Promise<any> {
if (!this.elementsInstance) {
throw new Error('Elements instance is not set up');
}

const options = {
  layout: {
    type: 'accordion',
    defaultCollapsed: false,
    radios: false,
    spacedAccordionItems: true
  }
};

return this.elementsInstance.create('payment', options);

}

Without the Options var it works fine, but with I get the error even when I does not want to do anythin with issuingCardCopyButton

[wicked granite]

You aren't typing the createPaymentElement returned value here right? Is that the issue?

the problem is that this.elementsInstance.create(xxx, xxx); can return different element so I think you have to be explicit

[simple belfry]

no, its in another component:
async setupPayment() {
if (this.user) {
try {
const elements = await this.stripeService.fetchAndSetClientSecret();
if (!elements) {
console.error('Stripe Elements not initialized');
return;
}
const paymentElement = await this.stripeService.createPaymentElement();
if (paymentElement) {
paymentElement.mount(this.paymentElementRef.nativeElement);
paymentElement.on('change', (event: { complete: any; }) => {
this.ngZone.run(() => {
this.isPaymentMethodSelected = event.complete;
});
});
}
} catch (error) {
console.error('Error setting up payment element:', error);
}
}
}

[wicked granite]

not sure what that means

you define a function and you aren't typing the return value, isn't that the issue?

[simple belfry]

Yes I understand, but I thought with 'payment' in the first argument I will explicit

[wicked granite]

Yeah I don't think so. It's not an "enum", it's just a string and I don't think the types are able to map those

Like if we had this.elementsInstance.create(Element.Type.Payment, options); maybe that would work better

I'm still partially guessing here since I don't use types client-side much unless I'm debugging someone's React code

[simple belfry]

its another Function. This uses the function I sent you before to create in the service and mount in the component

[wicked granite]

yeah I do think you have to type the return value

[simple belfry]

what to you mean, which value?

[wicked granite]

Right now you do return this.elementsInstance.create('payment', options); and you have : Promise<any> {
I think that's the issue, you need to type those two to match

[simple belfry]

okay, but I don't know, how to type. With the type of payment element StripePaymentElement?

it shows the same error, when I go like this:
async createPaymentElement(): Promise<StripePaymentElement> {
if (!this.elementsInstance) {
throw new Error('Elements instance is not set up');
}

const options = {
  layout: {
    type: 'accordion',
    defaultCollapsed: false,
    radios: false,
    spacedAccordionItems: true
  }
};

return this.elementsInstance.create('payment', options);

}

[wicked granite]

Can you type your options variable to be StripePaymentElementOptions

[simple belfry]

Thats It!!!!

Thank you so so much!!!

[wicked granite]

Sure thing!

[simple belfry]

Have a Nice day!