TypeError: undefined is not an object (evaluating '_this.cardRef.nativeElement')

[picosam]

This error was present in the console even before you added StripeCardComponent. It happens the first time the stripe script is loaded:

[Log] TypeError: undefined is not an object (evaluating '_this.cardRef.nativeElement') (main.bundle.js, line 2715)
(anonymous function) — book-bedroom.component.ts:43
__tryOrUnsub — Subscriber.js:238
next — Subscriber.js:185
_next — Subscriber.js:125
next — Subscriber.js:89
_next — map.js:83
next — Subscriber.js:89
_next — filter.js:87
next — Subscriber.js:89
next — Subject.js:55
next — BehaviorSubject.js:44
onload — ngx-stripe.es5.js:78
wrapFn — zone.js:1075
onInvokeTask — core.es5.js:3881
runTask — zone.js:192
invokeTask — zone.js:499
invokeTask — zone.js:1427
globalZoneAwareCallback — zone.js:1445

[richnologies]

Hi, may I see your ts and html files to see whats going on?

[picosam]

Sure, here you go:

<form [formGroup]="formGroup" role="form" (ngSubmit)="buy()">
	<label>
		<span>Name</span>
		<input formControlName="name" class="field" />
	</label>
	<ngx-stripe-card [options]="cardOptions"></ngx-stripe-card>
</form>

import {Component, OnInit, ViewChild} from '@angular/core';
import {StripeService, StripeCardComponent} from 'ngx-stripe';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
	templateUrl: './book-bedroom.component.html',
	styleUrls: ['./book-bedroom.component.css']
})
export class BookBedroomComponent implements OnInit {

	formGroup: FormGroup;
	@ViewChild(StripeCardComponent) card: StripeCardComponent;

	cardOptions = {
		style: {
			base: {
				iconColor: '#666EE8',
				color: '#31325F',
				lineHeight: '40px',
				fontWeight: 300,
				fontFamily: 'Lato',
				fontSize: '18px',
				'::placeholder': {
					color: '#CFD7E0'
				}
			}
		}
	};

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

	ngOnInit() {
		this.formGroup = this.fb.group({
			name: ['Jane', Validators.required]
		});
	}

	buy() {
		const name = 'Jane';
		console.log('card');
		this.stripeService.createToken(this.card.getCard(), { name })
				.subscribe(token => {
					console.log('Token created correctly');
					console.log(token);
				}, error => { console.log(error); });
	}
}

[richnologies]

I cannot reproduce the error on my laptop. I will give it a try tomorrow at the office on some Virtual machines and get back to you

[picosam]

I'll also do some more tests on different browsers tomorrow. For now, I can only claim this happens on Safari.

[picosam]

I believe this is really not occurring anymore; strange! Any news about the locale settings? Thanks!