RESET INITIALISATION or UPDATE AMOUNT

[SylvainAssemat]

Hi

In my use case, i put the checkout-web render in a stepper (embedded) So a final user can choose some items, go to the payment process , and if needed, go back and change some items that will change the total amount in the cart. In that way, i need to update the first initialisation "amount.value" which is mandatory.

What is the best solution to do this ?

I try to initialise again , but it seens to execute multiple function (stacked) each time the initilisation is done (ex 3 times createRecurringPayment)

I dont find any "destroy" method to clean and restart the process.

Can you help me ?

Thanks

[SylvainAssemat]

@jidefela-mgp Any Help on this ?

[mykytashaban]

@SylvainAssemat

Hi,

Thanks for sharing the details! To better understand the issue, could you please provide a code snippet of how you're initializing the checkout-web and handling the re-initialization? This will help me troubleshoot and suggest a more effective solution.

Thanks!

[SylvainAssemat]

Hello @mykytashaban

First initialization

let options = {
                clientId: mangopayClientId,
                profilingMerchantId: mangopayProfilingMerchantId,
                environment: mangopayEnvironment,
                amount: {
                    value: 0, // -> Need to be dynamically updated
                    currency: 'EUR'
                },
                locale: 'fr', // 'en' | 'fr' | Object
                paymentMethods: [
                    {
                        type: 'card',
                        options: {
                            supportedCardBrands: ['CB', 'VISA', 'MAESTRO', 'MASTERCARD'],
                            onCreateCardRegistration: (cardType) => createCardRegistration(cardType),
                            onCreatePayment: (data) => createRecurringPayment(data)
                        }
                    }
                ],
                branding: {
                    //fontFamily: 'Helvetica Neue',
                    fontSize: {
                        primary: '14px',
                        secondary: '12px'
                    },
                    borderType: 'round', // 'square' | 'round' | 'bottom'
                    colors: {
                        primary: '#3598e9',
                        secondary: '#545A61',
                        accent: '#4E40EF',
                        accentContrast: '#FFFFFF',
                        border: '#ddd',
                        borderFocused: '#3598e9',
                        error: '#EC0B43'
                    },
                    borderRadius: '8px',
                    backgroundColor: '#ffffff',
                    textColor: '#3598e9',
                    lineHeight: '48px',
                    variables: undefined,
                    rules: undefined
                }
            };

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

            //console.log(mangopaySdk);

            if (!mangopaySdk) {
                throw new Error('Failed to load Mangopay CheckoutSdk');
            }

            mangopaySdk.on('initialize', (event) => {
                console.log('💰initialize', event);
            });

            mangopaySdk.on('tokenizationComplete', (event) => {
                console.log('💰tokenizationComplete', event);
            });

            mangopaySdk.on('paymentComplete', (event) => {
                console.log('💰paymentComplete', event);
            });

            mangopaySdk.on('loaded', (event) => {
                console.log('💰loaded', event);
            });

            mangopaySdk.on('change', (event) => {
                console.log('💰change', event);
            });

            mangopaySdk.on('error', (event) => {
                console.log('💰error', event.detail);
                // console.log('onError', event.detail.error.ResultCode);
                // console.log('onError', event.detail.error.ResultMessage);
                // console.log('onError', event.detail.error.Status);
                const { error } = event.detail;
                Toast.fire({
                    icon: 'error',
                    title: error.ResultMessage
                });
            });

Then basically, i try to initialize again later when user update their items in cart

$('#container').empty(); //Initialization does not replace the first render 
options.amount.value = saleOrder.montant; //Updated 
mangopaySdk = await CheckoutSdk.loadCheckoutSdk('#container', options);

The createCardRegistration function and createRecurringPayment function will be triggered more than once when PAY button is clicked.

Do you have a woraround or any advice ?

Thanks

[mykytashaban]

@SylvainAssemat It looks like the issue arises because the SDK is initialized multiple times without a proper clean-up, which causes event listeners and functions to stack. You can check demo example here. Let me know please if everything works

[SylvainAssemat]

@mykytashaban

Oh i see

await mangopaySdk.umount();

This is what i am looking for !!!

Thanks i will try it and close the issue after tests OK

Thanks