Close button on the save credit card frame

[jpissis]

Thanks for this great plugin. I implemented on IONIC application and it work perfectly. However when i process a new payment with a credit card i registered before, and i change my mind and want to cancel, the button "close" launch payment anyway.

To Reproduce Steps to reproduce the behavior:

1. Process a payment and click to save the credit card
2. Process another payment and click to the close button to cancel the payment.

[rdlabo]

Thanks for issue.

The button "close" launch payment anyway.

This is unknown trouble. What is this platform? (iOS, Android, Web), and What is method??(PaymentSheet, PaymentFlow, GooglePay, ApplePay)

Thanks.

[jpissis]

I use PaymentFlow method on Android device.

My StripeService :

export class StripeService {
    processFlow: 'willReady' | 'Ready' | 'canConfirm' = 'willReady';

    constructor(
        private paymentService: PaymentService
    ) {
    }

    async _initializer(): Promise<void> {
        Stripe.addListener(PaymentFlowEventsEnum.Loaded, () => {
            this.processFlow = 'Ready';
            console.log('PaymentFlowEventsEnum.Loaded');
        });

        Stripe.addListener(PaymentFlowEventsEnum.FailedToLoad, () => {
            console.log('PaymentFlowEventsEnum.FailedToLoad');
        });

        Stripe.addListener(PaymentFlowEventsEnum.Completed, () => {
            this.processFlow = 'willReady';
            console.log('PaymentFlowEventsEnum.Completed');
        });

        Stripe.addListener(PaymentFlowEventsEnum.Canceled, () => {
            this.processFlow = 'willReady';
            console.log('PaymentFlowEventsEnum.Canceled');
        });

        Stripe.addListener(PaymentFlowEventsEnum.Failed, () => {
            this.processFlow = 'willReady';
            console.log('PaymentFlowEventsEnum.Failed');
        });

        Stripe.addListener(PaymentFlowEventsEnum.Created, (info) => {
            console.log(info);
            this.processFlow = 'canConfirm';
        });

        await Stripe.initialize({
            publishableKey: environment.stripePK,
        });
    }

    async createPaymentFlow(firebaseId: string, productID: number): Promise<void> {
        const paymentSheetData = await
            this.paymentService
                .createStripePaymentFlow(firebaseId, productID);

        await Stripe.createPaymentFlow({
            paymentIntentClientSecret: paymentSheetData.paymentIntent,
            customerId: paymentSheetData.stripeCustomerID,
            customerEphemeralKeySecret: paymentSheetData.ephemeralKey,
            merchantDisplayName: 'Saveurs application mobile',
        });
    }

    async showCreditCardForm(): Promise<void> {
        await Stripe.presentPaymentFlow();
    }

    async confirmPaymentSuccess(): Promise<boolean> {
        const result = await Stripe.confirmPaymentFlow();

        console.log('===== 1 Confirm paymentFlow');
        console.log('===== 2 result paymentFlow => ' + JSON.stringify(result));

        return (result.paymentResult === 'paymentFlowCompleted');
    }
}

And the method of my angular component :

async subscriptionProcess() {

        await
            this.stripeService
                .createPaymentFlow(this.user.uid, environment.subscriptionProductID)
                .then(async () => {
                    await
                        this.stripeService
                            .showCreditCardForm()
                            .then(async () => {
                                await this.stripeService.confirmPaymentSuccess();
                            });
                });
    }

[rdlabo]

This is not plugin issue, your code issue. Stripe.presentPaymentFlow() return resolve always, when presented paymentSheet.

You must create flow:

1. Stripe.presentPaymentFlow()
2. check this.processFlow = 'canConfirm'
3. App user click confirm payment button
4. Stripe.confirmPaymentFlow()

Please check demo work . Thanks.

[jpissis]

Sorry it's my fault. Many thanks for your return. It works.

[rdlabo]

@jpissis Did you adapt this plugin for production? If yes, please tell us what app. Please help us to develop this plugin in 2022. https://github.com/capacitor-community/stripe/issues/145 Thanks.