#oguzbilir-Elements

1 messages · Page 1 of 1 (latest)

glad zodiac
#

Hi there! Are you seeing any error in your console?

errant pawn
#

I see this 🙂 https://labtors.com/payment

Labtors || homepage

Labtors is a Marketplace for researchers and scientists. We are changing the way of how research project is done and giving everyone in the world a chance to access precious test labs.

#

Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

#

Uncaught (in promise) IntegrationError: Invalid value for elements(): clientSecret should be a client secret of the form ${id}secret${secret}. You specified: .

#

These are the errors ı see in consolle.

glad zodiac
#

Okay so let's start with the client secret... how are you retrieving that from your server?

errant pawn
#

AS in below; const [clientSecret, setClientSecret] = useState("");

useEffect(() => {
// Create PaymentIntent as soon as the page loads
fetch("/create-payment-intent", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ items: [{ id: "xl-tshirt" }] }),
})
.then((res) => res.json())
.then((data) => setClientSecret(data.clientSecret));
}, []);

const appearance = {
theme: 'stripe',
};
const options = {
clientSecret,
appearance
};

glad zodiac
#

Okay can you log out data there and run it again

#

And let me know what it outputs?

errant pawn
#

It doesnt log. I tried an alert function, that doesnt work either. I think fetching is the problem

glad zodiac
#

Yep sounds like it

#

So next step is to add logs on your server

#

And find out if you are actually hitting the endpoint at all

#

Are you testing locally?

errant pawn
#

Problem is I am not a backend developer 🙂 So, the entire server code in below

#

const functions = require("firebase-functions");
const express = require("express");
const cors = require("cors");
const stripe = require("stripe")('sk_test_51KVrgDFxgzzZ1Krm30dEiiQOlPS7QSmNQw4uvZ6510fthbvCTz1qzaAP1GUPZeHNaTxAWr0xIdDhZbeYYIQSWOOX00ITXHqZRk');

// API

// App config
const app =express();
// Middleware
app.use(express.static("public"));
app.use(express.json());

const calculateOrderAmount = (items) => {
// Replace this constant with a calculation of the order's amount
// Calculate the order total on the server to prevent
// people from directly manipulating the amount on the client
return 1400;
};

app.post("/create-payment-intent", async (req, res) => {
const { items } = req.body;

// Create a PaymentIntent with the order amount and currency
const paymentIntent = await stripe.paymentIntents.create({
  amount: calculateOrderAmount(items),
  currency: "usd",
  automatic_payment_methods: {
    enabled: true,
  },
});

res.send({
  clientSecret: paymentIntent.client_secret,
});

});

// Listen command

exports.api = functions.https.onRequest(app);

glad zodiac
#

Please edit that to remove your secret key

#

And then you should roll your API key

#

Even exposing your testmode secret key can allow other folks to gain access to your account

#

What directory is your server file in? Is it in the public directory?

errant pawn
#

It is in the functions, I am using firebase functions

glad zodiac
#

Ah okay yeah I'm not familiar with firebase. You are using Express above though?

errant pawn
#

yep

glad zodiac
#

Ah okay didn't actually realize you could use these together

#

Can you try changing public to .

errant pawn
#

In this part ? =>

#

app.use(express.static("public"));

glad zodiac
errant pawn
#

I will try a few things and then we can talk about it. Normally I use the card element without problem, I send a post request and instantly get the cliend_secret. However, this one need client_secret before a post request.

glad zodiac
#

Yes with Payment Element you need client secret to render the Element

#

However, accessing the client secret should be no different than however you were doing this previously.

#

Just need it on load instead of on pay

errant pawn
#

Exactly, I will try to make it async function and employ axios.

#

Quick question: can ı use payment element as embedded in in page just like card element ? Or is it have to be a full page

glad zodiac
#

No you can embed it just like card element

#

You just need a div to mount it

#

Oh you are using React

#

Same idea

#

Just a component

#

And you can build around it

#

We will just insert an iframe just like card Element

errant pawn
#

Ok, thanks a lot.