为什么在以下情况下canMakePayment有时会返回null

Question

我正在使用stripe-js。

当我在以下代码中调用this.initializePaymentRequest()时，

如果我从第一个可观察到的地方呼叫initializePaymentRequest()，则canMakePayment()返回Object，并且我能够看到浏览器支持Google pay。

如果我从initializePaymentRequest()呼叫this.datas.subscribe，那么我从canMakePayment()中得到的是空值，这是不正确的。我仍然是同一个标签，并且支持Google Pay。

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;
        });
    }
}

为什么会这样？

更新

我可以看到，如果我在setTimeout中调用initializePaymentRequest()，它也将返回null。设置超时有什么办法破坏支付api？