johnm2023_code

[charred wren]

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

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

[gentle slate]

Hi, we document more about error handling here: https://docs.stripe.com/error-handling. Are you able to review this and let me know if that does help?

[terse portal]

what I am looking for is the java class definations for all of the fields labeled as 'any'

javascript I mean

angular used typescript.....

I am looking for the javascript type for the types of 'any'

[terse portal]

the code I am using works... it is just that in my code review... someone was asking if I could replace the ';any'. with a specific class name

[sacred canopy]

hey there, the types for Stripe.js are available in @stripe/stripe-js: https://github.com/stripe/stripe-js/tree/master/types

What is cardHandler here, exactly?

Is that an event handler on some Element?

[terse portal]

Yes

[sacred canopy]

What event?

[terse portal]

it is called in the event that an error occurs

[sacred canopy]

What do you mean, can you show how thats passed to an Element?

[terse portal]

readonly stripe = signal<any | null>(null);
readonly card = signal<any | null>(null);

cardError = signal<string>(null);
displayCardElement = signal(false);
cardExpiresDate = signal<string>('');
maskedCardNumber = signal<string>('');
newCreditCard = signal<CreditCard | null>(null);
editCreditCard = signal<CreditCard | null>(null);
updatedCardMonth = signal<string>(null);
updatedCardYear = signal<string>(null);
cardInfos = viewChildren<ElementRef>('cardInfo');
ngAfterViewInit(): void {
    this.paymentPlatformService.getStripePrivateKey().then(pubKey => {
        const stripeInstance = Stripe(pubKey);
        const cardInstance = stripeInstance.elements().create('card');

        cardInstance.addEventListener('change', this.cardHandler);

        // Set signals
        this.stripe.set(stripeInstance);
        this.card.set(cardInstance);

        runInInjectionContext(this.injector, () => {
            effect(() => {
                const elements = this.cardInfos();
                const card = this.card();

                if (elements.length > 0 && card) {
                    const cardElement = elements[0];

                    card.mount(cardElement.nativeElement);
                }
            });
        });
    });
}

private cardHandler = (error: any) => {
if (error) {
this.cardError.set(error.message);
} else {
this.cardError.set(null);
}
};

[sacred canopy]

Ok so this:
cardInstance.addEventListener('change', this.cardHandler);

its a card change event handler

[terse portal]

yes

[sacred canopy]

then you probably want StripeCardElementChangeEvent -- like this:
https://github.com/stripe/stripe-js/blob/master/tests/types/src/valid.ts#L741

[terse portal]

private cardHandler = (error: StripeCardElementChangeEvent) => {
if (error) {
this.cardError.set(error.message);
} else {
this.cardError.set(null);
}
};

says it can't find the name

this is how I am importing the stripe component

declare let Stripe;

is there a better way with typescript ?

This is basically the javascript examples I was following

[sacred canopy]

What do you mean? You'll need to import the type from @stripe/stripe-js

import type {StripeCardElementChangeEvent} from '@stripe/stripe-js';

How are you importing/loading Stripe.js?

[terse portal]

see, we are using the pure javascript solution

in the index.html

<script src="https://js.stripe.com/v3/"></script>

then declare let Stripe;

[sacred canopy]

Then there are no types, types are only provided via that module i linked to

[terse portal]

Ah... ok.

so, to get the types... I need to add the typescript module

npm install stripe

[sacred canopy]

the @stripe/stripe-js module, yes. It's primarily a module loader helper, but it also provides types for using Stripe.js

[terse portal]

Perfect. Answers my question.