I recently upgraded stripev3 to stripeupe

[alokltd]

Describe the bug
I recently upgraded my Stripe API from stripev3 to stripeupe.

checkoutService.initializePayment({
                    methodId: 'card',
                    gatewayId:'stripeupe',
                    stripeupe: {
                        containerId: 'stripeupe-container',
                        options: {
                            cardNumberElementOptions: {
                                classes: {base: "form-input optimizedCheckout-form-input"},
                                placeholder: "",
                                showIcon: false,
                                containerId: 'stripe-card-number-component-field',
                            },
                        cardExpiryElementOptions: {
                                classes: {base: "form-input optimizedCheckout-form-input"},
                               containerId: 'stripe-expiry-component-field',
                           },
                       cardCvcElementOptions: {
                           classes: {base: "form-input optimizedCheckout-form-input"},
                           placeholder: "",
                           containerId: 'stripe-cvc-component-field',
            },
        }
    },
});

I'm using @bigcommerce/checkout-sdk-js I was using this code to initialize the Stripe card field won't show. Is this the right way to initialize the StripeUPE form fields?

Thank you in advance.

[animesh1987]

Hey @alokltd from this is the interface for stripeupe https://github.com/bigcommerce/checkout-sdk-js/blob/master/packages/core/src/payment/strategies/stripe-upe/stripe-upe-initialize-options.ts#L14. Don't think you need the options object. You may pass a style object if you want to customise the look and feel.

@vmparra can you please confirm as well. Thanks.

[vmparra]

You're totally right @animesh1987 .

StripeUPE doesn't require options to be set.

[alokltd]

Hi @animesh1987 @vmparra

Thank you for your response. I tried that too. But it didn't work.

Below are the steps that I followed.

1. I upgraded the StripeUPE in BC admin.
2. Upgraded the bigcommerce/checkout-sdk-js version to 1.280.1. I'm not sure if I should use the 1.32.1 release version or the changed log version.
3. I'm using a customised theme, should I make any changes such as include some URLs, or API to use the service.initializePayment?
4. Also, the initialize function comes as checkoutService.initializePayment not service.initializePayment. Is that how the SDK provides the function?
5. Where can I find the style option?

Sorry for all the questions. It is creating a problem for the business and we cannot rollback the upgraded version in the BC backend.

Regards,
Alok

[alokltd]

Also, I'm getting this error after I updated the checkout-sdk and the initialize payment method.
Uncaught (in promise) MissingDataError: Unable to proceed because payment method data is unavailable or not properly configured. The data could be unavailable because it has not loaded from the server, or configured by the merchant yet. To fix the former issue, you can try calling CheckoutService#loadPaymentMethods before performing the same action again.

I look forward to your response.
Thank you.

[alokltd]

Hi @animesh1987 @vmparra

Any response on above issue would be very helpful, guys. I'm stuck and it is affecting the business.

Now that I've updated the SDK to ^1.280.2, I'm getting Uncaught (in promise) MissingDataError: Unable to proceed because cart data is unavailable. error in the console.

I look forward to your response.

Thank you.
Alok

[animesh1987]

Also, the initialize function comes as checkoutService.initializePayment not service.initializePayment. Is that how the SDK provides the function?

Service is pretty much the same as checkoutService, just different names. That should not be an issue.

Feels like there are multiple issues that you may be having. Can you please share the code how you are trying to initialise stripeupe.

As you can see here https://github.com/bigcommerce/checkout-sdk-js/blob/master/packages/core/src/payment/strategies/stripe-upe/stripe-upe.mock.ts#L38 this is the test for the file.

Can you please share the payload you are getting as part of loadPaymentMethods call? It should be in network tab when a call to payments is made.

[alokltd]

Thank you for your response, @animesh1987

When I ran console.log(this.service.loadPaymentMethods()); inside componentDidMount(){}, it gives a Promise message as rejected.

I cannot get pass through the loading screen.

And I cannot find anything that looks similar to loadPaymentMethods call in the network tab.

Also, should I pass checkoutId to the service initialization this.service = createCheckoutService();?

I look forward to your response.

Thank you.
Alok

[bhargav-codes]

I am having the same issue, I have checkout SDK on my theme that was just working fine. Recently when I tried to download the live theme and run it locally using stencil CLI, the checkout is suddenly throwing the following error

I am in need for this fix ASAP

[animesh1987]

Hey @alokltd seems like you don't have a checkout loaded to make the request. Can you check if you have a checkout loaded successfully? You can see here https://github.com/bigcommerce/checkout-js/blob/master/packages/core/src/app/checkout/Checkout.tsx#L137

You can check for payment methods loaded in network tab by filtering calls to payments endpoints.

[animesh1987]

I am having the same issue, I have checkout SDK on my theme that was just working fine. Recently when I tried to download the live theme and run it locally using stencil CLI, the checkout is suddenly throwing the following error

I am in need for this fix ASAP

Is your issue related to stripe UPE not being able to be initialized?

[bhargav-codes]

Hey @animesh1987 , My issue is with the checkout SDK... Recently I am facing this issue with my theme ... Earlier it used to work just perfectly but like a month ago, I faced this issue where when I try to download a theme from my store and try to set it up on my local machine, the checkout SDK is stuck on loading and throws this issue I posted in the console

[alokltd]

Hi @animesh1987

Thank you for your response.

I have checkout loaded as

Promise.all([
            this.service.loadCheckout()
](.then(() => {
//execute
})

Should I also pass the checkoutID? Where can I find the checkoutID?

Before when using stripev3, I did not passed the checkoutID.

I look forward to your response.

Thank you.
Alok

[bc-0dp]

Hi @alokltd was this resolved in the end?