#asbeyy_41838
zealous cape
👋 happy to help
rustic talon
Hello!
zealous cape
would you mind sharing some request IDs to compare?
rustic talon
sure do
req_q2wqWv6pcnN607
Basically, untill yesterday i was using another test account for the app my team is developing. Everything was working fine, also 3D secure as we enforce it
We switched keys, now when paying, it creates the payment intent (i see it on the dashboard) and as per usual i pass the response and the clientSecret to validate the payment, Now it doesnt validate, it says 'no such payment intent'
any idea?
zealous cape
sorry still looking please give me a second
rustic talon
No worries, thank you
rustic talon
please allow me a second to send you the ID of the one that is working, im waiting from our PM
rustic talon
req_lLih53zbJvMzNt
rustic talon
are you using the correct publishable key on the front end?
yes
zealous cape
the publishable key needs to be the from the same account where the PI was created from
rustic talon
they are
zealous cape
acct_1OjU6SExZhngRow0
rustic talon
im using both sk and pk from the same account
zealous cape
please double check again
zealous cape
would you mind sharing your front end code?
zealous cape
pasted code would be better
rustic talon
"use client";
import Arrow_back_title from "@/components/global/arrow_back_title";
import Cards_list from "@/components/pages/settings/settings_payments_cc_list";
import React from "react";
import "../../../globals.css";
import Bottom_selector from "@/components/global/bottom_selector";
type Card = {
id: string;
object: string;
card: {
brand: string;
};
exp_month: number;
exp_year: number;
last4: string;
};
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import Loader from "@/components/global/loader";
import { useTranslations } from "next-intl";
const stripePromise = loadStripe(
"pk_test_51OjU6SExZhngRow0EscdVsZZysph702MDgzFZGL61bN2ilcv0Bnz230kUIZdUauz0k68MhbQmSFgsxAN4QEv1iIj00anwSmCNt"
//"pk_test_Z7cv2UejV7scM3wJVONkVrtt00YhEF2fjY"
);
function Page() {
const t = useTranslations("settings.profile.payment.form");
return (
<Elements stripe={stripePromise}>
<main className="mobile_viewport">
<Loader />
<Arrow_back_title title={t("title")} />
<Cards_list hideLoader={hideLoader} />
<Bottom_selector />
</main>
</Elements>
);
}
export default Page;
This is the page that initializes stripe
const handlePurchaseClick = () => {
const selectorPaymentMethods = document.querySelector(
".selector-payment-methods-modal"
) as HTMLSelectElement;
if (selectorPaymentMethods.value === "") {
console.error("Chose a payment method");
return;
}
if (paymentStatus === "loading") return;
//change the payment status to prevent furter clicks
setPaymentStatus("loading");
fetch(`${env_settings.api_url}/stripe/create-payment-intent`, {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + localStorage.getItem("tournify_token"),
},
body: JSON.stringify({
package_id: props.select._id,
payment_method_id: selectorPaymentMethods.value,
}),
})
.then((response) => response.json())
.then((data) => {
if (data.error) {
return;
}
//Get the client secret from payment intent
let clientSecret = data.clientSecret;
if (!stripe || !elements) return;
stripe
.confirmCardPayment(clientSecret, {
payment_method: selectorPaymentMethods.value,
})
.then(function (result) {
if (result.error) {
console.log(result.error.message);
setPaymentStatus("failed");
} else {
if (result.paymentIntent.status === "succeeded") {
fetch(${env_settings.api_url}/stripe/finalize-payment, {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization:
"Bearer " + localStorage.getItem("tournify_token"),
},
body: JSON.stringify({
package_id: props.select._id,
payment_id: result.paymentIntent.id,
}),
})
.then((response) => response.json())
.then((data) => {
if (data.error) {
setPaymentStatus("failed");
return;
}
if (data.success) {
setPaymentStatus("success");
//close modal
//props.doSelect(null)
//update balance
fetch(`${env_settings.api_url}/balance`, {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization:
"Bearer " + localStorage.getItem("tournify_token"),
},
})
.then((response) => response.json())
.then((data) => {
localStorage.setItem(
"tournify_balance",
data.balance
);
});
setTimeout(() => {
location.href = `/${locale}/home`;
}, 3000);
}
});
}
}
});
});
};
zealous cape
and what do you get as an error on the front end?
is there a public URL where I can test your app?
rustic talon
No such payment_intent: 'pi_3Omx2qExZhngRow018Tf8bZ9'
live_dev is down because of this problem
let me tourn it back on for you
zealous cape
maybe the code hasn't been correctly published
in all cases, I don't recommend using hardcoded publishable and secret keys
zealous cape
let me tourn it back on for you
yes please
rustic talon
we use env variables for backend, but since we are having troubles im testing like this, thanks for the heads up
rustic talon
maybe the code hasn't been correctly published
locally also gives this problem
its a PWA so its better if you emulate mobile view
you already have a test card / payment method saved into your account,
to purchase click the coins amount/logo on top right corner in homepage
then proceed to pruchase a package
rustic talon
no worries, thank you for the incredible support you are bringing
dusty hullBOT
rustic talon
indeed that corresponds to the old pk...
but im not using it
allow a moment to verify
no, im using the new one.
\
as you can see its commented right now
timid wadi
cool, so does it work now?
rustic talon
no, still the same issue
rustic talon
you may be right... let me check]
timid wadi
https://tournify-fe-29a72d114a8d.herokuapp.com/en/settings/payments/add still uses the old key, but https://tournify-fe-29a72d114a8d.herokuapp.com/en/settings/payments does use the new one
if you use Visual Studio Code press cmd-shift-f to search the whole project folder for the old key