Stripev3 Custom Checkout - Unable to checkout

[XBS-Nathan]

Hey, we are having an issue with submitted stripev3 payment form. Stripe payment form is rendering in the browser however when we go and submit the order we have the following error come back.

NotInitializedError: Unable to proceed because the payment step of checkout has not been initialized.`

From my understanding if the payment step was not initialized, we woudn't see the rendered stripev3 form. We are also passing the following object into submitOrder.

{ methodId: "card", gatewayId: "stripev3", paymentData: {} }

Also this is what we are also passing into the initializePayment method to render the stripev3 form.

options = { methodId: paymentMethod.id, gatewayId: 'stripev3', stripev3: { containerId: 'container', options: { card: { classes: {base: 'form-input'}, hidePostalCode: true }, } } };

[okaysuper]

I have the same issue. This seems to happen with credit card only.

[okaysuper]

A few more insights, it seems like the stripe card element is not found so the submitted paymentData object is empty.
I tried to use custom inputs for the card fields so I could manually populate paymentData.
Even with doing so I receive an error on the Stripe End: 'The PaymentIntent requires a payment method'.
Below is an extract of the Event data received on stripe:

"payment_method": null,
  "payment_method_options": {
    "card": {
      "installments": null,
      "network": null,
      "request_three_d_secure": "automatic"
    }
  },
  "payment_method_types": [
    "card"
  ],

In the checkout SDK I can see that the payment_method is either created with this._getStripeCardElements()[0] or this._getStripeElement()

Back to square one, the whole issue seems to come from the fact that the stripe element can't be found by the checkout SDK though it is initialized and mounted.

[jeffthemaximum]

I am experiencing this as well. I am unable to submitOrder via stripev3, because I get the same errors as above. @bc-peng or @animesh1987 have any ideas on a fix or workaround? This is a pretty bad bug IMO.

[XBS-Nathan]

We still didn't get around in fixing it so we parked the issue, finding a solution to this would be great so we can finally move over to stripe for payments.

[bc-peng]

@jeffthemaximum I see the related files changed recently after the issue raised. @okaysuper already noticed the error was thrown by this line. Maybe we could do more testing from there.

[huntario]

@XBS-Nathan @jeffthemaximum
Hunter with BigCommerce here. I wanted to share some information to help work through this situation. Here are some questions and procedures we can apply to isolate the cause of the issue.

1. Does this occur for the same store with the default checkout applied?

If the default checkout under Advanced Settings > Checkout is applied, does the test payment go through? Ideally, you would remove any scripts or other sources of customization for this test to get the best idea of how the default checkout behaves on your particular store.

If you are having issues even with the default checkout and you’ve done the basic troubleshooting such as removing any recently added scripts, then it’s worth reaching out to BigCommerce Support using the contact information in the bottom left of the control panel under “Help”. If you are part of the BigCommerce partner program - https://www.bigcommerce.com/partners/become-a-partner/ - then it will be best to open your support case through the Partner Portal.

Please keep in mind that front line support through this outlet is focused on helping with default checkout errors and functionality of the store.

2. Testing further with https://github.com/bigcommerce/checkout-js

Checkout JS linked to above is what BigCommerce loads for the default checkout. It is built with React/Typescript and uses the Checkout SDK. It is a production-ready implementation that can serve as the basis for additional customizations. It is also a great reference to see how BigCommerce has used the Checkout SDK internally.

You can follow the directions within that repo to get it running and then place your URL with the settings under Advanced Settings > Checkout.

Now for setting up the SDK for local development in conjunction with a local instance of Checkout JS. There are many ways you could accomplish this including npm link or npm yalk. In my personal opinion the easiest to setup is to simply link the SDK directory within the package.json file within Checkout JS. This is on a Mac and other OSs may have different path formatting.

"dependencies": {
"@bigcommerce/checkout-sdk": "../../checkout-sdk-js",
…

You can then use npm i within Checkout JS to ensure peer dependencies are satisfied. When finished your setup may look something like this:

Terminal 1:SDK directory > npm run bundle:watch

Terminal 2:SDK directory > npm run bundle-dts

Run this once the process in Terminal 1 has been allowed to complete. You will only need to repeat this now if you terminate the watch process in Terminal 1.

Terminal 3: Checkout JS > npm run dev

Terminal 4: Checkout JS > npm i

I had to do this to get the modifications of the SDK repo. You could include this in your npm scripts to speed things up. Again, there are many ways to accomplish local npm package development. While not the most streamlined workflow, it seems like the easiest to set up.

Terminal 5+ : Any additional apps you would like to run in support of the Checkout JS. For example I have an Express app that serves the result of builds and Ngrok to proxy through a domain and SSL with little setup hassle.

With this setup you can gain some insights into what these values are that are giving you trouble. Seeing what the values are in the default setup will help gain insight into the intended behavior.

Here is a screenshot from my setup, examining the line mentioned by @bc-peng and @okaysuper - checkout-sdk-js/src/payment/strategies/stripev3/stripev3-payment-strategy.ts : 208

Taking a look at the changes - ​​trxtraining@7fbb70b - perhaps there is some issue with the context not aligning with expectations within the code you are wanting to run?

If you can state the Checkout SDK issue within the context of Checkout JS, then that can serve as a common context to talk about and reproduce issues. The problem currently is we are not seeing this on a default Checkout SDK / Checkout JS setup and thus have no test case to verify the problem and work towards any necessary resolution.

I hope this information is helpful. Please let me know if I can assist further. Currently we are not seeing this error within the default setup. I would recommend checking that everything is updated and comparing the value of ‘this’ within the context of your implementation and the default Checkout SDK / Checkout JS setup.

[bc-0dp]

Hi @XBS-Nathan was this resolved?