第一次单击事件后，Stripe 客户端集成不会重定向

Question

I am integrating Stripe client only integration in Angular2+ project following these steps:

Stripe docs

The onClick implementation is working fine, but for some reason the click event redirects me only when I clicked twice, even though the console.log is working on the first one.

HTML

<button id="checkout-button" role="link" (click)="onClick($event)">
    Checkout
</button>

.ts

onClick() {
    var checkoutButton = document.getElementById('checkout-button-sku_...');
    checkoutButton.addEventListener('click', function () {
        stripe.redirectToCheckout({
            items: [{ sku: 'sku_...', quantity: 1 }],
            successUrl: 'https://your-website.com/success',
            cancelUrl: 'https://your-website.com/canceled',
        })
            .then(function (result) {
                if (result.error) {
                    var displayError = document.getElementById('error-message');
                    displayError.textContent = result.error.message;
                }
            });
    });
}

Answer 1

It happens because at the first click, you are adding addEventListener . So when you click the second time, then your event handler is run.

In addition, it is not good to use document.getElementById . You can use TemplateRef :

<button      
  role="link"
  (click)="onClick()"
  #checkout_button
>
  CheckoutButton Sku
</button>

TypeScript:

@ViewChild('checkout_button') myEl: ElementRef;

constructor() {
}

ngAfterViewInit() {
  console.log(this.myEl.nativeElement);
}

Answer 2

checkoutButton.addEventListener('click', function () {

You do not need to bind another event handler.

(click)="onClick($event)"

This part binds an event listener to the button. In onClick you do an another bind every time when button is clicked. This is why it works only for the second time.