Streifen Elemente mit eckigen 2

Question

Ich versuche Streifen Elemente mit eckigen 2 mit einer Elementkarte zu integrieren, die Kreditkarteninformationen akzeptiert. Bitte beachten Sie, dass, ich bin nicht auf der Suche in Streifen Kasse mit, da es mehrere Beispiele hierzu sind wie Streifen mit 2. Winkel integrieren

declare var Stripe:any; 

@Component({ 
    selector: 'app-account', 
    templateUrl: './account.component.html', 
    styleUrls: ['./account.component.scss'] 
}) 
export class AccountComponent implements OnInit { 

    constructor(
    private _zone: NgZone 
) { } 

    private cardToken:any; 

    ngOnInit() { 

    if (typeof window !== 'undefined') { 
     this.setUpCard(); 
    } 
    } 


    setUpCard() { 
    var stripe = Stripe('TEST_API_KEY'); 
    var elements = stripe.elements(); 
    var style = { 
     base: { 
     fontSize: '16px', 
     lineHeight: '24px' 
     } 
    }; 

    var card = elements.create('card', {style: style}); 

    card.mount('#card-element'); 
    } 

    getCardData(number, month, year, cvc) { 
     this.getCardToken(number, month, year, cvc); 
    } 

    getCardToken(number, month, year, cvc) { 
    var dataObj = {"number": number, "exp_month": month, "exp_year": year, "cvc": cvc}; 

    Stripe.card.createToken(dataObj, 
     (status, response) => { 

     this._zone.run(() => { 
      if (status === 200) { 
      this.cardToken = response; 
      console.log("the card token: ", this.cardToken); 
      } 
      else { 
      console.log("error in getting card data: ", response.error) 
      } 
     }); 
     } 
    ); 
    } 

HTML

<form role="form" id="payment-form"> 
    <div id="card-element"> 
    <!-- a Stripe Element will be inserted here. --> 
    </div> 
</form> 

Wenn meine Bauteilbelastungen ich diese bekommen Fehler:

Wie kann ich auf das dom-Element in angular 2 zugreifen, um ordnungsgemäß mit Stripe zu arbeiten?

Auch ich benutze Server-Side-Rendering auf meine eckige App, wenn dies beeinflusst, wie eckig funktioniert auf dem Client irgendwie.

Answer 1

Ich hoffe, Sie haben bereits eine Lösung für Ihr Problem gefunden. Aber da es keine Antworten auf Ihre Frage gibt, werde ich versuchen zu helfen.

Der Fehler, den Sie haben, deutet darauf hin, dass das Problem in dem Punkt im Komponentenlebenszyklus liegt, in dem Sie setUpCard() aufrufen. Sie sollten diese Methode nach dem AfterViewInit-Ereignis aufrufen, d. H. Wenn die Komponentenansicht initialisiert wird. Sie müssen also den Code, den Sie in ngOnInit() verwendet haben, in die ngAfterViewInit() - Hook-Implementierung verschieben.

Schauen Sie auch https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#hooks-purpose-timing