Why canMakePayment returns null sometimes in following case

Question

I'm using stripe-js.

When I call this.initializePaymentRequest() at following code,

If I call initializePaymentRequest() from first observable, canMakePayment() returns Object, and I'm able to see that google pay is supported in browser.

If I call initializePaymentRequest() from this.datas.subscribe, I'm getting null from canMakePayment() which is not true. I'm still same tab, and google pay is supported.

export class DatasComponent implements OnInit {
    datas: any;
    data: any;
    data2s: any;
    data2: any;

    paymentRequest: any;
    private isStripeAvailable: boolean;

    constructor(
        private db: AngularFirestore,
        private paymentService: PaymentService
    ) {
        // stripe js load status listener (true/false)
        paymentService.stripeStatus.asObservable().subscribe(data2 => {
            this.isStripeAvailable = !!data2;

            if ((this.data || {}).val) {
                // /********************  works here ****************
                this.initializePaymentRequest();
            }
        });

        this.slug1 = 'hello', this.slug2 = 'hi';

        this.data2s = db
            .collection('data2s', ref => ref
                .where('slug', '==', this.slug1)
            ).valueChanges();

        this.data2s.subscribe(data3 => {
            if (data3.length) {
                this.data2 = data[0];
                this.datas = db
                    .collection('datas', ref => ref
                        .where('slug', '==', this.slug2)
                    )
                    .valueChanges();

                this.datas.subscribe(data4 => {
                    if (data4.length) {
                        this.data = data4[0];
                        if (this.isStripeAvailable) {
                            // /*************** doesn't work here ********
                            this.initializePaymentRequest();
                        }
                    }
                });
            }
        });
    }

    initializePaymentRequest = () => {
        this.paymentRequest = this.paymentService.stripe.paymentRequest({
            country: 'US',
            currency: 'usd',
            total: {
                label: 'Sample Payment',
                amount: 500,
            },
            requestPayerName: true,
            requestPayerEmail: true,
            requestPayerPhone: true,
        });

        this.paymentRequest.canMakePayment().then(data => {
            // data is object if called from first, null if called from second
            debugger;
        });
    }
}

Why would this happen?

Update

I can see that if I call initializePaymentRequest() within setTimeout, It is returning null too. Is there any way set timeout is breaking payment apis?