TypeError: Cannot read property 'elements' of undefined

[stationed]

Hello. I am currently facing an issue of having the stripe being undefined and the form elements go missing when the website is live (on https). All was good when I run on the localhost.

On live website

On localhost

Error on console: TypeError: Cannot read property 'elements' of undefined

Versions I am using angular: 7.1.1 ngx-stripe: ^7.6.0 stripe: ^8.39.1

app.module.ts

imports: [
   NgxStripeModule.forRoot(<my-stripe-pk>)
]

checkout.component.html

<form id="card-form" novalidate (ngSubmit)="stripePayment($event)" [formGroup]="stripeForm">
    <input type="text" class="form-control" formControlName="name" placeholder="Name on card">
    <ngx-stripe-card [options]="cardOptions" [elementsOptions]="elementsOptions"></ngx-stripe-card>
    <button type="submit" id="payment-btn" class="btn btn-success">Make Payment</button>
</form>

checkout.component.ts

import { StripeService, StripeCardComponent, ElementOptions, ElementsOptions } from "ngx-stripe";

@ViewChild(StripeCardComponent) card: StripeCardComponent;

stripeForm: FormGroup;

elementsOptions: ElementsOptions = {
  locale: 'en'
};

cardOptions: ElementOptions = {
    style: {
      base: {
        iconColor: '#666EE8',
        color: '#31325F',
        lineHeight: '40px',
        fontWeight: 300,
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSize: '18px',
        '::placeholder': { color: '#CFD7E0' }
      }
    }
};

constructor(private formBuilder: FormBuilder, private stripeService: StripeService) { }

ngOnInit() {
    this.stripeForm = this.formBuilder.group({
      name: ['', [Validators.required]]
    });
}

stripePayment( ) {
    this.stripeService.createToken(this.card.getCard(), { name }).subscribe(result => {
        if (result.token) {
          // do something
       }
    });
}

Any help will be greatly appreciated!

[Picorete]

I have the same issue :( if you find a solution don't forget to share it!

[richnologies]

Hello @stationed,

I believe you have mix a between the new and the old versions. That's our fault. Couple of months ago we make a huge refactor to drop our own interfaces in favor of @stripe/stripe-js official ones. In order to provide all the new features to old angular versions we create two branches of the project, Legacy (which represents the old version) and LTS (the new version, which we make compatible back to Angular 6). We thought that was a good way for many people to access the new features, but we end up introducing a breaking change in a minor update and that is a problem.

In the readme there is a table to indicate the versions for each one. The version you're indicated ^7.6.0 represents the new version of the library for Angular 7. However, your imports in the sample code corresponds to the old version. Maybe this is why it works on development where the compiler is more forgiving, but not in production.

We've created a stackblitz for you, is basically your example with very little changes to make it work with the new version of the library: https://stackblitz.com/edit/ngx-stripe-card-element-form?file=app/app.module.ts

Hope it helps,

R

[alsoicode]

I have exactly the same issue, and I'm not mixing versions.

My package.json specifies exactly:

"@stripe/stripe-js": "1.11.0",
"ngx-stripe": "10.1.2"

Everything works fine running using ng serve as soon as I deploy my application to Heroku, it fails.

[alphacentauridigital]

Hello, I am also having the same issue with Angular v8.

I am getting the following error

ERROR TypeError: Cannot read property 'element' of undefined. card variable comes as undefined

@ViewChild(StripeCardComponent, { static: true }) card: StripeCardComponent;

My package.json contains: "ngx-stripe": "8.2.0", "@stripe/stripe-js": "1.11.0"

@alsoicode Were you able to solve this? I am getting an issue at ng serve as well. Thanks

[alphacentauridigital]

Solved by using static: false

@ViewChild(StripeCardComponent, { static: false}) card: StripeCardComponent;

Thanks

[alsoicode]

@alphacentauridigital @richnologies My <ngx-stripe-card> is inside a conditional parent fieldset, which seems to be what's causing the issue.

[richnologies]

Thanks @alphacentauridigital and @alsoicode, I'll have a look with all this new feedback.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[fxck]

Getting this as well, ngx-stripe 10.1.2, stripe-js 1.13.1

[fxck]

Ah, got it, I was using NgxStripeModule.forChild(), thinking it's the one exporting ngx-stripe components, but it's just NgxStripeModule without anything.

[ssitu-bdc]

NgxStripeModule.forChild()

how did you resolve the issue?

[dtslvr]

NgxStripeModule.forChild()

how did you resolve the issue?

Please try this:

@NgModule({
  declarations: [SubscriptionComponent],
  exports: [],
  imports: [
    CommonModule,
    NgxStripeModule
  ],
  providers: []
})
export class SubscriptionModule {}

[jordanboston]

Does anyone have a solution for this yet? TypeError: Cannot read properties of undefined (reading 'elements')

[alphacentauridigital]

@jordanboston Please try this...

Solved by using static: false

@ViewChild(StripeCardComponent, { static: false}) card: StripeCardComponent;

Thanks

[jordanboston]

@alphacentauridigital

Turns out our Stripe Public key was not making in correctly after an update. This actually fixed it now. Thanks!

[richnologies]

Agreed @jordanboston, usually the reason for this is mismatch between public and private keys, for example using the test public key with the live private key.

[nickromanenko]

Ah, got it, I was using NgxStripeModule.forChild(), thinking it's the one exporting ngx-stripe components, but it's just NgxStripeModule without anything.

Thanks, this fixed it for me

[rubenheymans]

for me my async await to get the clientSecret didn't work properly

[richnologies]

Hi @rubenheymans, happy to help!

Maybe is different problem, can you open a new issue and provide me with some context about your problem

Thanks,

R

[rubenheymans]

Thanks but no I meant that this was causing the issue, the load order was wrong. I already fixed it. I thought it could be a hint for others wo have this issue.

[richnologies]

My bad @rubenheymans, by all means, thanks for the help :)

[l4nos]

I was having this issue since switching to using StripeFactoryService to initialize instead of ForRoot.

I was using stripe connect to feed in a stripeAcocunt parameter into the intialization. The value is correct and so is the public key but for some resason I'm still getting ...

Cannot read properties of undefined (reading 'elements')

...whenever I tried to render the component.

For me I forgot to feed the stripe instance into the component.

[SAMURAii-7]

If anyone is using ngx-stripe with angular 17+ then in the app.config.ts, include provideNgxStripe(PUBLISHABLE_KEY) as NgxStripeModule.forRoot(PUBLISHABLE_KEY) won't work inside the component's imports. I am new to angular so apologies if this was obvious.