Stripe Elements with angular 2

Question

I'm trying to integrate Stripe elements with angular 2 with an element card that accepts credit card information. Please note that, I'm not looking into using stripe checkout as there are several examples on this how to integrate stripe with angular 2.

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>

When my component loads I get this error:

The selector you specified (#card-element) applies to no DOM elements that are currently on the page. Make sure the element exists on the page before calling mount().

How can I access the dom element in angular 2 to work properly with Stripe?

Also, I'm using server side rendering on my angular app if this affects how angular works on the client somehow.

Answer 1

I hope you already found a solution to your issue. But, since there are no answers to your question, I'll try to help.

The error you have suggests that the problem lies within the point in the component lifecycle at which you call setUpCard(). You should call that method after the AfterViewInit event, i.e. when the component view is initialized. So you need to move the code you used in the ngOnInit() to the ngAfterViewInit() hook implementation.

Also look at https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#hooks-purpose-timing