getCard is undefind and where to pass options

[VivekIshir]

HI Guys , I am getting error getCard is undefind and where to pass options , Sharing my implementation code below

Here is my Stripe Component ts :-
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; import { FormGroup, FormBuilder, Validators } from "@angular/forms"; import { StripeService, Elements, Element as StripeElement, ElementsOptions, StripeCardComponent, ElementOptions } from "ngx-stripe";

@Component({ selector: 'app-stripe', templateUrl: './stripe.component.html', styleUrls: ['./stripe.component.scss'] }) export class StripeComponent implements OnInit { elements: Elements; // card: StripeElement; @ViewChild(StripeCardComponent) card: StripeCardComponent;

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

elementsOptions:ElementsOptions = { locale: 'es' }; stripeTest: FormGroup; constructor(private fb: FormBuilder, private stripeService: StripeService) { }

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

buy() { debugger; const name = this.stripeTest.get('name').value; this.stripeService .createToken(this.card.getCard(), { name }) .subscribe(result => { if (result.token) { // Use the token to create a charge or a customer // https://stripe.com/docs/charges console.log(result.token.id); } else if (result.error) { // Error creating the token console.log(result.error.message); } }); } onCardChange(event) { console.log(event); } }

below HTML code

<form novalidate (ngSubmit)="buy($event)" [formGroup]="stripeTest">

  <ngx-stripe-card [options]="stripeCardOptions" [elementsOptions]="elementsOptions" (card)="onCardChange($event);"></ngx-stripe-card>
  <button type="submit">
    BUY
  </button>
</form>

Error Screen

I am implementing in Angular 5 , any quick help is highly appreciable

[VivekIshir]

@richnologies @picosam could you please have a look above issues , i am facing

[richnologies]

Hi @VivekIshir, here is link to stackblick project with a very similar example to yours, please take a look:

https://stackblitz.com/edit/angular-aktoqb

If the problem persist, please indicate at least the version of angular, ngx-stripe, typescript and rxjs you are using and the html of your test which is not included on your question, thanks

[VivekIshir]

@richnologies Thanks for reply , i will be looking , I need to use Stripe payment gateway in my project and need to fetch all transactions made for user ,Stripe connect screen for user , that's what i am trying to achieve ,

[richnologies]

@VivekIshir I've been taking a look, and really don't think it will help with your case, but I upgrade the library seed, so it should work better with ng5.

Happy to here, I really believe Stripe is great. If you can reproduce your error in stackblitz.com that will help me a lot catching the problem.

If you need help, I am happy to help, so do hesitate to contact me by email for more specific questions.

[VivekIshir]

@richnologies please clarify me , i can achieve all Stripe payment feature using this or not, i will need to update my client for this further i m trying to implement , it showing me error an't bind to 'options' since it isn't a known property of 'ngx-stripe-card'.

[VivekIshir]

i am using this link https://www.npmjs.com/package/ngx-stripe

[richnologies]

Hi again @VivekIshir, I assume you don't check the code I provide you. If your problem persist please create a bare minimum of your project on stackblitz.com, otherwise it is very difficult for me to know the reason of your error. From the screenshot it seems to me that either the NgxStripeModule is not included or you are using an older version where that input was not available. The first one is more likely.

If the module does not work for you, you can always integrate Stripe yourself, here is a very good example:

https://alligator.io/angular/stripe-elements/

[VivekIshir]

@richnologies thanks now i am seeing in console receiving the card info but not seeing token that i need to pass for further request https://stackblitz.com/edit/angular-aktoqb

[richnologies]

HI @VivekIshir, yes you do, it is the string that begins with "tok_1CE... in your screenshoot, thats the token you need to pass to the server.