paypalcommercecredit payment provider: click_initiate_payment_reject

[fresh5447]

I am successfully initializing the paypalcommercecredit payment option, however when I click the "Pay Later" button that is injected, the paypal modal opens and is stuck in a spinning state, and I receive the following error:

Here you can see the payment successfully injecting the pay later option:

This is what my initialization is:

                   const options = {
                        methodId: 'paypalcommercecredit',
                        paypalcommerce: {
                            container: '#checkoutButton--paypalcommercecredit',
                            clientId: clientId,
                            initializesOnCheckoutPage: true,
                            currencyCode: 'USD',
                            submitForm: () => {
                                console.log("paypalcommercecredit submitForm Triggered")
                                getRoot(self).setLoading(true)
                                // Example function
                                getRoot(self).service.submitOrder({payment: { methodId: 'paypalcommercecredit' }})
                                    .then(() => {
                                        return window.location.assign('/checkout/order-confirmation');
                                    }).catch((err) => {
                                        console.error("Order Submit Error", err)
                                        return window.location.assign('/cart.php');
                                    })
                            },
                            onComplete: () => console.log("On Complete Fired"),
                            onRenderButton: (resolve, reject) => {
                                console.log("paypalcommercecredit ON RENDER BUTTON??")
                                const hasError = getRoot(self).service.getState().errors.getInitializePaymentError();
                                if (hasError) {
                                    console.error("PayPal on onRenderButton:", getRoot(self).service.getState().errors.getInitializePaymentError())
                                } else {
                                    console.log("paypalcommercecredit  onRenderButton success")
                                }
                            },
                        },
                    }

                    await service.initializePayment(options);

I have also ensured the PayLater option is enabled in BigCommerce

Currently running @bigcommerce/checkout-sdk" version": "1.183.0"

Any tips on debugging this would be great, thanks!

[animesh1987]

Hey @serhii-tkachenko can your team please take a look at this query?

[serhii-tkachenko]

Hey @fresh5447 👋

As far as I see, this error occurred because onValidate callback is not provided. Also you have several options in paypal commerce object, that don't use in initializePayment method.

                   const options = {
                        methodId: 'paypalcommercecredit',
                        paypalcommerce: {
                            container: '#checkoutButton--paypalcommercecredit',
                            clientId: clientId,
                            submitForm: () => {
                                console.log("paypalcommercecredit submitForm Triggered")
                                getRoot(self).setLoading(true)
                                // Example function
                                getRoot(self).service.submitOrder({payment: { methodId: 'paypalcommercecredit' }})
                                    .then(() => {
                                        return window.location.assign('/checkout/order-confirmation');
                                    }).catch((err) => {
                                        console.error("Order Submit Error", err)
                                        return window.location.assign('/cart.php');
                                    })
                            },
                            onRenderButton: (resolve, reject) => {
                                console.log("paypalcommercecredit ON RENDER BUTTON??")
                                const hasError = getRoot(self).service.getState().errors.getInitializePaymentError();
                                if (hasError) {
                                    console.error("PayPal on onRenderButton:", getRoot(self).service.getState().errors.getInitializePaymentError())
                                } else {
                                    console.log("paypalcommercecredit  onRenderButton success")
                                }
                            },
                            onValidate: (resolve, reject) => {
                                // --- here is you validation code here
                            }
                        },
                    }

                    await service.initializePayment(options);

I might recommend to check the initialization typescript interface for PayPalCommerce here: https://github.com/bigcommerce/checkout-sdk-js/blob/master/packages/core/src/payment/strategies/paypal-commerce/paypal-commerce-payment-initialize-options.ts#L79

Please, let us know if it fixes the issue. Thanks!

[bc-0dp]

Hi @fresh5447 was this resolved?