Cannot access StripeCardElement and instantiate object

[d0rf47]

Is this a feature request or a bug report?

Possible Bug Report

What's gone wrong?

Cannot Instantiate StripeCardElements. When trying to access getting cannot read property elements of undefined, when access this.card.element.

What was meant to happen?

The object should be accessible to use the service to process the payment
Steps to reproduce

Not currently live anywhere
Other information

Using Angular 11.0.9

app module
imports: [ CKEditorModule, BrowserModule, AppRoutingModule, FormsModule, ReactiveFormsModule, HttpClientModule, CommonModule, BrowserAnimationsModule, // required animations module ToastrModule.forRoot(), // ToastrModule added NgxStripeModule.forRoot('my_key'), ],

component

error in class: "Property 'card' has no initializer and is not definitely assigned in the constructor.ts(2564)"

html

console.log

[d0rf47]

I am not sure what I am doing wrong here. I followed the examples in the documentation but i cannot seem to instantiate the card properly.

[richnologies]

Hi @d0rf47, happy to help.

First question, are you 100% sure both keys (secret key on the server and public key on the front are the same). I've seen this error in the past and the most common reason is mixing test/live keys between back/front

[d0rf47]

Thanks for taking the time to help!

I am using the secret key sk_test_... on the server and the publishable key pk_test... on the angular client.

I feel like the issue has to be stemming from this line,

cause the editor is complaining that the card has no initializer and is not assigned in the constructor, i think i need to do something like
@ViewChild(StripeCardComponent) card: StripeCardComponent = new StripeCardComponent();

but i don't what to pass as an argument since the ctor requires one.

[richnologies]

Hi @d0rf47,

The ViewChild is fine. You don't need to use a constructor, Angular will find the element in your view and create it for you.

Here is a very simple working example: https://stackblitz.com/edit/ngx-stripe-issue-135. Feel free to fork it and add the necessary changes to reproduce the error.

Checking again to your code I've seen two things that are worth considering:

1. You don't need ngxStripeCardGroup if you're using the ngx-stripe-card element. The group directive if for when you're working with separate elements like ngx-stripe-card-number or ngx-stripe-card-cvc
2. You have an *ngIf wrapping the element. That is ok, but depending on your changedetection strategy can cause issues. I suggest try without the ngIf to discard the issue is related to that :)

Let me know if any of these helps you

R

[d0rf47]

Okay Ill give it a try. thanks

[richnologies]

That message from the compiler is because you're using Angular Strict Mode and that mode does not allow to have uninitialise variables. You can make that error go away with one of this 3 options:

1. By using the non-null assertion operator. This is like telling the compilar, this is ok, I know what I'm doing:
   @ViewChild(StripeCardComponent) card!: StripeCardComponent;
2. Make the property optional
   @ViewChild(StripeCardComponent) card?: StripeCardComponent;
3. Add the undefined type
   @ViewChild(StripeCardComponent) card: StripeCardComponent | undefined;

This should fix the compiler error, but I'm not sure it will help you with the other error.

Just let me know

R

[d0rf47]

Hey so I eneded up getting it working. You were correct about both issues. I think part of it was the editor too, after i made the changes and then restarted the ide it worked. Thanks for the help! i really appreciate it

[richnologies]

No problem, anytime :)