Ek | Stripe Developers | Page 1

blissful lynxBOT Feb 25, 2023, 12:55 AM

#

whole fractal Feb 25, 2023, 12:57 AM

#

Hi, can you add more details? What error are you seeing?

wet field Feb 25, 2023, 12:58 AM

#

(node:8684) UnhandledPromiseRejectionWarning: Error: You did not provide an API key. You need to provide your API key in the Authorization header, using Bearer auth (e.g. 'Authorization: Bearer YOUR_SECRET_KEY'). See https://stripe.com/docs/api#authentication for details, or we can help at https://support.stripe.com/. at res.toJSON.then.StripeAPIError.message (C:\Users\bkwok\Documents\Development Files\Web Development\HTML\Marketplace Modelling\Model3\node_modules\stripe\lib\RequestSender.js:95:31) at processTicksAndRejections (internal/process/task_queues.js:93:5) (Use node --trace-warnings ...to show where the warning was created) (node:8684) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag--unhandled-rejections=strict(see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1) (node:8684) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

#

As for the code I'm running

#

...

#

On index.js (where I execute node from)

app.post("/create-payment-intent", async (req, res) => { //Replace the amount key value with a variable extracting the amount from the price of product const paymentIntent = await stripe.paymentIntents.create({ amount: req.session.cart.totalPrice*100, currency: 'usd', automatic_payment_methods: { enabled: true } }) res.send({ clientSecret: paymentIntent.client_secret }) })

#

Then the payment page + boilerplate template
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MERCATUS</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<link rel="stylesheet" href="css/checkout.css" />
<link rel="stylesheet" href="css/navbar.css">
<script src="https://js.stripe.com/v3/"></script>
<script src="js/checkout.js" defer></script>

</head>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<script src='/js/validateForms.js'></script>

</body>

</html>
`

<% layout('layouts/stripeBoilerplate')%> <div class="row"> <div class="col-6 offset-3 mb-4"> <h1>Checkout</h1> <h4>Your Total: $<%=totalPrice %> </h4> <form id="payment-form"> <div id="link-authentication-element">  </div> <div id="payment-element">  </div> <button id="submit"> <div class="spinner hidden" id="spinner"></div> <span id="button-text">Pay now</span> </button> <div id="payment-message" class="hidden"></div> </form> <br> </div> </div>

#

And then the script

`
// This is your test publishable API key.
const stripe = Stripe("pk_test_51MVEeSLWZKtRzauzeP3Z0YoGS7a9d8i3Wt9U3uKC1OddUZ49sXePmm2WKhlBA1iikwfoZQJJuC7H7sfzw1R47ZHp00iPNuzJ86");

// The items the customer wants to buy
const items = [{ id: "xl-tshirt" }];

let elements;

initialize();
checkStatus();

document
.querySelector("#payment-form")
.addEventListener("submit", handleSubmit);

const appearance = {
theme: 'stripe',
};
elements = stripe.elements({ appearance, clientSecret });

const linkAuthenticationElement = elements.create("linkAuthentication");
linkAuthenticationElement.mount("#link-authentication-element");

linkAuthenticationElement.on('change', (event) => {
emailAddress = event.value.email;
});

const paymentElementOptions = {
layout: "tabs",
};

const paymentElement = elements.create("payment", paymentElementOptions);
paymentElement.mount("#payment-element");
}

`

#

Apologies if this is a bit long. I'm just having trouble understanding where the issue is with this code as it's taken directly from the Stripe site with little changes minus the HTML

whole fractal Feb 25, 2023, 1:06 AM

#

Are you setting your secret API key on top of your index.js file: https://stripe.com/docs/api/authentication?

wet field Feb 25, 2023, 1:07 AM

#

Yes

#

I have it declared as follows:
`
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY, {
apiVersion: '2020-08-27'
});

const dotenv = require("dotenv");
dotenv.config();
`

#

And the .env is present

`

whole fractal Feb 25, 2023, 1:09 AM

#

your Stripe secret key would start with sk_

wet field Feb 25, 2023, 1:10 AM

#

Ohh I see. Must have been a typo on my side. One moment while I check

#

Hmm... for some reason after changing the rk to an sk I'm still getting the same error

#

(node:31804) UnhandledPromiseRejectionWarning: Error: You did not provide an API key. You need to provide your API key in the Authorization header, using Bearer auth (e.g. 'Authorization: Bearer YOUR_SECRET_KEY'). See https://stripe.com/docs/api#authentication for details, or we can help at https://support.stripe.com/.

#

whole fractal Feb 25, 2023, 1:13 AM

#

On const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY, can you mnaually pass your secret key in there?

wet field Feb 25, 2023, 1:13 AM

#

Sure

whole fractal Feb 25, 2023, 1:13 AM

#

I'm wondering if it's manipulated somewhere

wet field Feb 25, 2023, 1:15 AM

#

No I see where the issue is now. I didn't realise there was a key rotation

#

What's the usual validity period of the key?

whole fractal Feb 25, 2023, 1:15 AM

#

Ah!

#

Unless you manually roll it, there should not be.

wet field Feb 25, 2023, 1:19 AM

#

Hmm... interesting. I haven't changed anything previously. Anyways, I'll make sure to keep an eye out for it next time. Also, one more quick question. Inside the checkout.js file (the script that runs when the html is loaded), for some reason whenever I set the public key to be process.env.PUBLIC_KEY, it comes up with an error. Could it be because of the invalid key or is there something that I'm missing here?

For instance
// This is your test publishable API key. const dotenv = require("dotenv"); dotenv.config(); const stripe = Stripe("pk_test_...)

whole fractal Feb 25, 2023, 1:21 AM

#

What error?

wet field Feb 25, 2023, 1:22 AM

#

There isn't an error per se but more of like the UI for the card details does not load as normal. This has been a common issue for me in the past few weeks.

#

The stuff inside the red box does not appear and it's just the button

whole fractal Feb 25, 2023, 1:23 AM

#

Have you created and mounted the element properly?

wet field Feb 25, 2023, 1:25 AM

#

This was taken from the site so I believe it should have been done correctly. The only changes that I made when I copied the code over was just the site URL in checkout.js. The same UI issue occurred when we were trying to troubleshoot the error that I reported earlier.

#

It's not too big of an issue if we can't figure it out today since I believe it's the end of the day already for your end. Just curious because it would make things easier for me when I upload my code to an online repo for go-live

whole fractal Feb 25, 2023, 1:26 AM

#

With Payment Element, if you do not create the Payment Intent and get the client_secret, the Payment Element won't render. I think the issue should be fixed now. Have you tried?

wet field Feb 25, 2023, 1:27 AM

#

For the current issue I was facing, yes it has loaded properly. It's once I set the string parameter to be process.env.PUBLISHABLE_KEY is when the issues started to occur so I had to hard code the API keys in

whole fractal Feb 25, 2023, 1:29 AM

#

Yeah, that you would need to debug on your end.

#Ek