Events lauched multiple times after error

[storm23]

I'm using @mangopay/checkout-sdk in a vue.js 2 environment.

If an error occurs during payin with CB, users can retry a payment. If they do, each event is launched twice. Then three times if they retry etc ...

I tried to reload my vuejs component after an error, but I have the same problem.

See below my vuejs2 component.

I've tried with all package versions, even 1.1.6-alpha.4

<script type="text/ecmascript-6">
import { CheckoutSdk } from '@mangopay/checkout-sdk';
import mangoService from '@/services/mango'
export default {

    props: {
        amount: Number,
    },
    mounted() {

        this.initMangoPaySDK()
    },
    data() {

        return {
            mangopaySdk: null,
            currency: 'EUR',
            mangoTermsAccepted: true
        }
    },
    methods: {
        async createCardRegistration(event) {

            try {

                let response = await mangoService.callToMyAPI(event)
                let cardRegistrationInfos = response.data

                return cardRegistrationInfos
            }
            catch (error) {

                this.$emit('error', error)
            }
        },
        async createPayment(event) {

            try {

                let depositCreatedResponse = await mangoService.callToMyAPI(event)
                let depositPreAuthData = depositCreatedResponse.data

                return depositPreAuthData
            }
            catch (error) {

                this.$emit('error', error)
            }
        },
        error(event) {

            this.$emit('error', event.detail.error.ResultMessage)
        },
        async paymentComplete(event) {

            let status = event.detail.Status
            try {

                //DO STUFF
            }
            catch (error) {

                this.$emit('error', error)
            }

            this.$emit('paymentComplete', status)
        },
        async initMangoPaySDK() {

            const options = {
                clientId: process.env.VUE_APP_MANGO_CLIENT_ID,
                profilingMerchantId: process.env.VUE_APP_MANGO_PROFILING_MERCHANT_ID,
                environment: this.isProduction ? 'PRODUCTION' : 'SANDBOX',
                supportedCardBrands: ['VISA', 'MASTERCARD', 'CB'],
                amount: {
                    'currency': this.currency,
                    'value': this.amount
                },
                paymentMethods: [
                    {
                        type: 'card',
                        options: {
                            onCreateCardRegistration: this.createCardRegistration,
                            onCreatePayment: this.createPayment
                        }
                    }
                ]
            }

            try {

                this.mangopaySdk = await CheckoutSdk.loadCheckoutSdk('#container', options)
                if (!this.mangopaySdk) {

                    throw new Error('Failed to load MangopayCheckoutSdk');
                }
            }
            catch (error) {

                console.log(error)
            }

            this.mangopaySdk.on('paymentComplete', this.paymentComplete)
            this.mangopaySdk.on('error', this.error)
        }
    },
    computed: {

        isProduction() {

            return process.env.VUE_APP_ENVIRONMENT === 'production'
        }
    }
}
</script>
<template>
    <div id="checkoutForm">
        <div id="container"></div>
    </div>
</template>

I tried many things to properly reload the component and refresh events if there is an error. For example, in the view :

Implementation of the component :

<MangoCardForm 
      :key="mangoCardFormKey"
      @error="handleError" 
      @paymentComplete="handlePaymentComplete"
      :amount="price" 
      @createCardRegistration="handleCreateCardRegistration"
  />

In "handleError" function :

 methods: {

    handleError(error) {

        this.mangoCardFormKey = this.mangoCardFormKey + 1
    },
....

This solution refresh the component, but "old" events are still attached to the MangoPaySDK.

[denysyakovenko]

Hi @storm23 Thanks for having interest to Mandgopay Checkout SDK!

I've tried to reproduce the issue you've described but unfortunately haven't been able to. I've created another example that uses vue2 with pretty much the same code that you have. Could you please try it and give a feedback if you still have the same issue?

[storm23]

Hello. In your example, the component doesn't handle 4xx errors. if "createCardRegistration" method fire a 4xx error, the user has to refresh the page. I would like to auto-refresh the page automatically. But the "error" method is not launched when a 4xx error occurs.

In order to test that, in createCardRegistration, try to fetch a "not found" ressource, the "error" method will not be fired, so You can't handle this error.

Regards,