ngx-stripe: TypeError: Cannot read property 'elements' of undefined

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!