1

我正在使用条纹 js。

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

如果我initializePaymentRequest()从第一个 observable 调用，canMakePayment()返回 Object，我可以看到浏览器支持 google pay。

如果我调用initializePaymentRequest()from this.datas.subscribe，我会得到 null ，canMakePayment()这是不正确的。我仍然是同一个标签，并且支持谷歌支付。

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

为什么会发生这种情况？

更新

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

4

0 回答 0