#SAjomi
frail ore
unique prairie
Hello there
We can't re-open threads but happy to chat further if you'll summarize your question
turbid fog
ye nice thanks
export class StripeService {
private stripeAPIKey = 'sk_test_XXXX';
constructor(private http: HttpClient) {}
createCheckoutSession(price: number): Observable<any> {
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': Bearer ${this.stripeAPIKey},
});
const body = {
payment_method_types: ['card'],
line_items: [
{
price_data: {
currency: 'usd',
product_data: {
name: 'My Product',
},
unit_amount: price * 100,
},
quantity: 1,
},
],
mode: 'payment',
success_url: 'http://localhost:4200/dashboard', // Replace with your success URL
cancel_url: 'http://localhost:4200/dashboard', // Replace with your cancel URL
};
return this.http.post<any>('https://api.stripe.com/v1/checkout/sessions', body, { headers });
}
can you please tell me if i am filling to body wrong way ?
unique prairie
Looks fine to me overall from a quick spot check. Best thing to do is just test it out though
turbid fog
yea i cant i get error 400 and i dont what can cause it but i do it like this
createCheckoutSession(price: number): Observable<any> {
const headers = new HttpHeaders({
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': Bearer ${this.stripeAPIKey},
});
const body = new URLSearchParams();
body.set('payment_method_types[]', 'card');
body.set('line_items[0][price_data][currency]', 'usd');
body.set('line_items[0][price_data][product_data][name]', 'My Product');
body.set('line_items[0][price_data][unit_amount]', (price * 100).toFixed(0));
body.set('line_items[0][quantity]', '1');
body.set('mode', 'payment');
body.set('success_url', 'http://localhost:4200/dashboard'); // Replace with your success URL
body.set('cancel_url', 'http://localhost:4200/dashboard'); // Replace with your cancel URL
return this.http.post<any>('https://api.stripe.com/v1/checkout/sessions', body.toString(), { headers });
}
i will get this on photo so im assuming the problem is with body somehow
unique prairie
Okay so that error isn't an issue with the Checkout Session creation but the actual redirection or the state of the Session. Can you provide the Checkout Session ID related to that? How are you redirecting the Session URL?
turbid fog
something like this
export class CheckoutComponent {
constructor(private stripeService: StripeService) {}
initiateCheckout(): void {
this.stripeService.createCheckoutSession(10.99).subscribe(
(response) => {
// Handle successful response
console.log(response);
// Redirect to Stripe checkout if necessary
if (response && response.id) {
this.redirectToStripeCheckout(response.id);
}
},
(error) => {
// Handle error
console.error(error.message);
}
);
}
async redirectToStripeCheckout(sessionId: string): Promise<void> {
const stripe = await loadStripe('pk_test_XXX'); // Replace with your actual Stripe publishable key
if (stripe) {
stripe.redirectToCheckout({ sessionId })
.then((result: any) => {
if (result.error) {
// Handle error
}
});
} else {
// Handle the case when Stripe is not available
}
}
Can you provide me the Checkout Session ID for the screenshot above? It should look like cs_test_xxxxx and be at the beginning of the URL
turbid fog
unique prairie
Yeah that works
Can you double check that you are using the correct Publishable key and that it matches the account with the secret key you are using?
Another way to fix the issue is to not use redirectToCheckout at all. We actually recommend redirecting server-side.
turbid fog
give me minute problam is i dont have server
unique prairie
You can see examples of a server-side redirect in our quickstart guide: https://stripe.com/docs/checkout/quickstart
Well you have to have a server
You can only create a Checkout Session from a backend API
Which I can see you are doing successfully.
Are you using Next.JS?
turbid fog
im using angular it is for my bachelor project but thanks mate after double check the key it works i dont why it was change but thanks
unique prairie
Ah okay glad you got it figured out!