New product button broken

[eadolf]

I'm excited to use beluga but very discouraged as I'm not an advanced coder to solve this problem myself. Entering title allows the button to be clickable but on click, step two is not revealed. Also I assumed that beluga synced with my existing stripe product database, is this not true?

[binx]

Hello! Hmm... if you open up the javascript Console in your browser, it should be throwing an error with whatever is going on.

It's also hard for me to say if your sync with stripe is working or not, I'd look for errors in the Node terminal window (the yarn server tab). If you log into your Stripe account online, you should be able to see products showing up in their UI.

If you are seeing error messages, add them to this thread & I will try to help you debug :)

[eadolf]

Hey! So, I've re-done the installation 2 times, still the same issue. It looks like it's an https thing perhaps. console logs below.

btw, I am using Brave browser.

1 'breaking' change (though looking now, this is browser wide)
scheduler.development.js:298
[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around July 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details.

Warnings
(anonymous) @ scheduler.development.js:298
react.development.js:220 Warning: React.createFactory() is deprecated and will be removed in a future major release. Consider using JSX or use React.createElement() directly instead.

printWarning @ react.development.js:220
(index):1 You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS.

Error when I click the button the step 2
value @ (index):1
:3000/create-product:1 Failed to load resource: the server responded with a status of 500 (Internal Server Error)

[binx]

Hmmm. The 500 error would have more information about what's failing, you can look at the response from the browser's call (in Chrome, this would be in the "Network" tab, click the failing call and the "Response" tab). You could also log into Stripe and look at the Developer > Logs tab, this should also have information about what is failing on Stripe's end.

[DOSputin]

Installed and replicated same issue as @eadolf

New product flow hangs with 500 from server failing to POST

POST http://localhost:3000/create-product 500 (Internal Server Error)
createProduct @ CreateEditProduct.js:59
handleNext @ CreateEditProduct.js:38
onClick @ CreateEditButtons.js:44
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
executeDispatch @ react-dom.development.js:8243
processDispatchQueueItemsInOrder @ react-dom.development.js:8275
processDispatchQueue @ react-dom.development.js:8288
dispatchEventsForPlugins @ react-dom.development.js:8299
(anonymous) @ react-dom.development.js:8508
batchedEventUpdates$1 @ react-dom.development.js:22396
batchedEventUpdates @ react-dom.development.js:3745
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
discreteUpdates$1 @ react-dom.development.js:22413
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889

The top level of waterfall points to this code in CreateEditProduct.js starting at line 54

{
const createProduct = () => {
    let postProduct = {
      name: product.name
    }

    fetch('/create-product', {
        method: 'POST',
        headers: new Headers({ 'content-type': 'application/json' }),
        body: JSON.stringify(postProduct)
      }).then(response => response.json())
      .then(newProduct => {
        if (!newProduct.id) return;
        handleChange("stripe_id", newProduct.id)
        handleChange("created", newProduct.created)
        saveAndAdvance();
      })
      .catch(error => console.log(error));
  }
}

The response header:

HTTP/1.1 500 Internal Server Error
X-Powered-By: Express
x-dns-prefetch-control: off
x-frame-options: SAMEORIGIN
strict-transport-security: max-age=15552000; includeSubDomains
x-download-options: noopen
x-content-type-options: nosniff
x-xss-protection: 1; mode=block
content-type: application/json; charset=utf-8
etag: W/"905-bjYJyr1egfqUTRPRYsxLuzhAUmM"
date: Mon, 12 Jul 2021 20:52:02 GMT
connection: close
Vary: Accept-Encoding
Content-Encoding: gzip
Transfer-Encoding: chunked

The request header:

POST /create-product HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Content-Length: 15
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
content-type: application/json
Accept: */*
Sec-GPC: 1
Origin: http://localhost:3000
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: http://localhost:3000/config/product/new?step=0
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cookie: connect.sid=s%3AnApTMVyLUuaVZHX-qiT65P2OD-Eym6wx.Qvu9%2B54bGf9ATUZr5a7%2BxonILMvo7Ec7%2BTYF5zfYp6s

[binx]

In server/product.js, here's what /create-product is doing:

app.post("/create-product", function(req, res) {
  const product = {
    name: req.body.name,
    type: 'good'
  }
  if (req.body.attributes)
    product["attributes"] = [req.body.attributes];

  stripe.products.create(product, function(err, result) {
    err ? res.status(500).send(err) : res.json(result);
  });
});

If your node server is up and running, is the error on Stripe's end? Do you have your keys configured correctly between the .env file and the public key in src/assets/store_config? Have you logged into Stripe and looked at the error messages in the Developer log?

[stefjanson]

Hi, I am facing the same issue.
I checked the Developer log in Stripe, but there is nothing.

Edit:
This error occurs when the stripe key in the config.env is incorrect!
Please note the following things when configuring the config.env:

• Use your private stripe key for STRIPE_KEY
• Don't include the brackets

[theemack]

Such an awesome app, I am stuck on config1-step0.png of my install - followed the tutorial to the letter, but sadly stuck on uploading images...that next button wont continue, any chance this might have been resolved - if so how?

[ramakant7153]

Next Button is not working after you fill name & product details.