stripe

stripe copied to clipboard

Platform

• [ ] Web
• [X] iOS
• [ ] Android

Describe the bug Payment sheet shows up briefly and immediately disappears and the payment fails.

To Reproduce Steps to reproduce the behavior:

1. See image

Expected behavior Payment sheet should stay up.

Screenshots

Additional context Code to process the payment;

async processCardPayment() {
        FormHelper.updateBindObject(this.formGroup, this.processPaymentRequest);
        /*
        With PaymentSheet, you can make payments in a single flow.
        As soon as the User presses the payment button,
        the payment is completed. (If you want user have some flow after that,
        please use paymentFlow method)
        */

        try {
            // be able to get event of PaymentSheet
            await Stripe.addListener(PaymentSheetEventsEnum.Completed, () => {
                console.log('PaymentSheetEventsEnum.Completed');
            });

            await Stripe.addListener(PaymentSheetEventsEnum.Failed, (data: any) => {
                console.log('PaymentSheetEventsEnum.Failed', data);
            });

            // Connect to your backend endpoint, and get every key.
            const paymentIntentCreateResponse = await this.stripeService.createPaymentIntent(this.processPaymentRequest.amount);
            console.log('paymentIntent: ', paymentIntentCreateResponse);

            await Stripe.initialize({
                publishableKey: paymentIntentCreateResponse.publishableKey
            });


            // prepare PaymentSheet with CreatePaymentSheetOption.
            await Stripe.createPaymentSheet({
                paymentIntentClientSecret: paymentIntentCreateResponse.paymentIntent,
                customerId: paymentIntentCreateResponse.customerId,
                customerEphemeralKeySecret: paymentIntentCreateResponse.ephemeralKey,
                merchantDisplayName: 'XXXXXXX'
            });

            console.log('createPaymentSheet');
            // present PaymentSheet and get result.
            const result = await Stripe.presentPaymentSheet();
            console.log('result: ', result);
            if (result && result.paymentResult === PaymentSheetEventsEnum.Completed) {
                // Happy path
                await this.alertCtrl.create({
                    header: this.translateService.instant('PaymentSuccessTitle'),
                    message: this.translateService.instant('PaymentSuccessMessage') + ' ' + this.processPaymentRequest.amount + '.',
                    buttons: [
                        {
                            text: this.translateService.instant('OK'),
                            handler: () => {
                                this.navCtrl.pop()
                            }
                        }
                    ]
                });
            } else {
                console.error(result);
                await this.notificationService.error('PaymentError');
            }
        } catch (error: any) {
            await this.errorService.handleError(error)
            console.error(error);
        }
        console.log('Processed payment');
    }

Usage Product Stripe plugin.

Product Name: Product URL : Using Function:

• [X] Payment Sheet / Payment Flow
• [ ] Apple Pay
• [ ] Google Pay
• [ ] Identity (@capacitor-community/stripe-identity)
• [ ] Terminal（@capacitor-community/stripe-terminal）