#Max4637-local-404
spice glacier
Hello 👋
404 usually suggest that the path you're requesting, doesn't exist. I'd double check that. Also, the ask isn't really related to a Stripe API.
versed turret
Branch is yemen6
Check the cart component html and ts files, and also the server.JS file
carmine igloo
@versed turret You're going to need to be more specific about the exact problem you're encountering. We're not able to checkout your entire repository and review. Where are you encountering this error, exactly?
What request are you making?
It appears like it's a client request to a local back end server that isn't running. Do you expect that this endpoint should be available?
versed turret
Server.JS
unique thorn
👋 taking over with @runic kiln
versed turret
cart.component.ts
unique thorn
@versed turret can you send non pictures of code? You can copy paste the real code as text, it will be formatted if you wrap it in 3 ` before after
versed turret
Sure
You can also refer to my GitHub. My secret key will be rolled soon
It’s also on test
const stripe = require('stripe')('sk_test_51KB4AqHzyheHHaqUvBTsbgzymrNbpsSON0CRTtBAehhr5T3EnuVZTQmEB7FVdoeMAk9WGonE8KGThs7nCiEOzZ8D00hceShXui');
const express = require('express');
const app = express();
app.use(express.static('public'));
const YOUR_DOMAIN = 'http://localhost:4200';
app.post('/create-checkout-session', async (req, res) => {
// @ts-ignore
const session = await stripe.checkout.sessions.create({
line_items: [
{
// Provide the exact Price ID (for example, pr_1234) of the product you want to sell
/* price_data: {
currency: "usd",
product_data: {
name: "baby clothes",
}
unit_amount: 1,
}*/
price: 1,
quantity: 1,
},
],
mode: 'payment',
success_url: ${YOUR_DOMAIN}/success.html,
cancel_url: ${YOUR_DOMAIN}/cancel.html,
});
res.redirect(303, session.url);
});
app.listen(4200, () => console.log('Running on port 4200'));
Server.JS
Cart.component.ts
import { Component, OnInit } from '@angular/core';
import { CardsModule } from 'angular-bootstrap-md';
//import { Server } from 'http';
import { CartService } from 'src/app/service/service.service';
import { CheckoutService } from 'src/app/service/checkout.service';
@Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.scss']
})
export class CartComponent implements OnInit {
public products : any = [];
public grandTotal !: number;
paymentHandler: any = null;
success: boolean = false;
failure: boolean = false;
//invokeStripe: any;
constructor(private cartService : CartService, private checkout: CheckoutService) { }
ngOnInit(): void {
this.cartService.getProducts()
.subscribe(res=>{
this.products = res;
this.grandTotal = this.cartService.getTotalPrice();
})
this.invokeStripe()
}
totalItemPayment(quantity: number, price: number){
return quantity * price;
}
removeItem(item: any){
this.cartService.removeCartItem(item);
}
emptycart(){
this.cartService.removeAllCart();
}
makePayment(amount:number){
const paymentHandler = (<any>window).StripeCheckout.configure({
key:
'pk_test_51KB4AqHzyheHHaqUxDultJvUHaZMnbUS1s7KBJM176xaU0Wyk0HLZeLJnBAPRWw8mpZSX7GsagJAgf1sxP4CdcE500cZ37DCeY',
locale: 'auto',
token: function(stripeToken: any){
console.log(stripeToken.card);
paymentstripe(stripeToken.card);
alert("Stripe Token Generated!");
},
});
const paymentstripe = (stripeToken: any) => {
this.checkout.makePayment(stripeToken).subscribe((data: any) => {
console.log(data);
if (data.data === "success") {
this.success = true
}
else {
this.failure = true
}
});
};
paymentHandler.open({
name: 'Payment',
description: 'Please use your credit/debit card to pay for your item(s)',
amount: amount * 100,
});
}
invokeStripe(){
if (!window.document.getElementById('stripe-script')) {
const script = window.document.createElement('script');
script.id = 'stripe-script';
script.type = 'text/javascript';
script.src = "https://checkout.stripe.com/checkout.js";
script.onload = () => {
this.paymentHandler = (<any>window).StripeCheckout.configure({
key: 'pk_test_51KB4AqHzyheHHaqUxDultJvUHaZMnbUS1s7KBJM176xaU0Wyk0HLZeLJnBAPRWw8mpZSX7GsagJAgf1sxP4CdcE500cZ37DCeY',
locale: 'auto',
token: function (stripeToken: any) {
console.log(stripeToken)
//alert('Payment has been successfull!');
// reduce the quantity of the item by 1 once the buyer's card went through
// the buyer should recieve an email to notify that they have paid
// the buyer should have the option in their email to cancel their payment, bringing the quantity back
}
});
}
window.document.body.appendChild(script);
}
}
}
Let me try server.JS again
unique thorn
We need you to format the code please
versed turret
‘’’ const stripe = require('stripe')('sk_test_51KB4AqHzyheHHaqUvBTsbgzymrNbpsSON0CRTtBAehhr5T3EnuVZTQmEB7FVdoeMAk9WGonE8KGThs7nCiEOzZ8D00hceShXui');
const express = require('express');
const app = express();
app.use(express.static('public'));
const YOUR_DOMAIN = 'http://localhost:4200';
app.post('/create-checkout-session', async (req, res) => {
// @ts-ignore
const session = await stripe.checkout.sessions.create({
line_items: [
{
// Provide the exact Price ID (for example, pr_1234) of the product you want to sell
/* price_data: {
currency: "usd",
product_data: {
name: "baby clothes",
}
unit_amount: 1,
}*/
price: 1,
quantity: 1,
},
],
mode: 'payment',
success_url: ${YOUR_DOMAIN}/success.html,
cancel_url: ${YOUR_DOMAIN}/cancel.html,
});
res.redirect(303, session.url);
});
app.listen(4200, () => console.log('Running on port 4200')); ‘’’
unique thorn
you have to wrap it in 3 ` before and after like I explain
versed turret
How do I format
unique thorn
and you really need to remove your API key when you copy paste please
Ultimately the error is quite simple so we can stop with the code I saw the issue
versed turret
Server.JS?
unique thorn
your server-side code sends res.redirect() so you redirect to Checkout but your client-side code expects a JSON response as it must do a fetch
you're just mixing up the programming styles here
unique thorn
Not really, sorry you seem to be mixing up a lot of the concepts here
res.redirect is Node.js saying to your browser "please go to that page".
But that's not what your client-side code wants.
You haven't shared the code that makes the request to your server.
you also are still using the wrong symbol, it's a backtick, the `
it's not a single quote
it's three `
versed turret
I’ll give you cart.component.html
unique thorn
you're also completely mixing up the JS by using a deprecated Stripe Checkout approach that has nothing to do with your normal code
the whole this.paymentHandler = (<any>window).StripeCheckout.configure({ shouldn't even exist
versed turret
<td>
<button (click)="removeItem(item)" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
<tr>
<td colspan="4"></td>
<td><button (click)="emptycart()" class="btn btn-danger">Empty Cart</button></td>
<td><button routerLink="/products" class="btn btn-primary">Shop More</button></td>
<td>
<form action="/create-checkout-session" method="POST">
<button (click)="makePayment(grandTotal)" type="submit" class="btn btn-success">Checkout</button>
</form>
</td>
<td><strong>Grand Total : ${{grandTotal}}</strong></td>
<div *ngIf="success">
<h1>Your Payment is complete successfully</h1>
</div>
<div *ngIf="failure">
<h1>Some Error is taken place inside the payment</h1>
</div>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="products.length ==0">
<div class="container">
<div class="card">
<h5 class="card-title">My Cart</h5>
</div>
<div class="center">
<img src="./assets/empty_cart-1200x900.jpg" alt="" style="max-width: 50%;">
<h6>Add item to it now</h6>
<button routerLink="/products" class="btn btn-primary">Shop Now</button>
</div>
</div>
</ng-container> ```Let me be more specific
<tr>
<td colspan="4"></td>
<td><button (click)="emptycart()" class="btn btn-danger">Empty Cart</button></td>
<td><button routerLink="/products" class="btn btn-primary">Shop More</button></td>
<td>
<form action="/create-checkout-session" method="POST">
<button (click)="makePayment(grandTotal)" type="submit" class="btn btn-success">Checkout</button>
</form>
</td>
<td><strong>Grand Total : ${{grandTotal}}</strong></td>
<div *ngIf="success">
<h1>Your Payment is complete successfully</h1>
</div>
<div *ngIf="failure">
<h1>Some Error is taken place inside the payment</h1>
</div>
</tr>```The “makePayment(grandTotal)” and the “<form action …” is what would open the pop up
unique thorn
what pop up are you even thinking of, there's no popup at all
if you see a popup you are using Legacy Checkout that we deprecated well over 3 years ago now
versed turret
That’s probably what it is. I see it when I click “inspect”
The pop up came from Legacy Checkout I think
unique thorn
yeah so there's no popup and any code using Legacy Checkout needs to be removed
versed turret
To migrate, would I need to change ```
makePayment(amount:number){
const paymentHandler = (<any>window).StripeCheckout.configure({
key:
'pk_test_51KB4AqHzyheHHaqUxDultJvUHaZMnbUS1s7KBJM176xaU0Wyk0HLZeLJnBAPRWw8mpZSX7GsagJAgf1sxP4CdcE500cZ37DCeY',
locale: 'auto',
token: function(stripeToken: any){
console.log(stripeToken.card);
paymentstripe(stripeToken.card);
alert("Stripe Token Generated!");
},
});
Or even delete it?
unique thorn
you definitely need to delete that and anything related to it
versed turret
Is it the server.JS that handles it?
unique thorn
not really
I'm sorry, you really seem lost 😦
Checkout is a product that lets you redirect your customers to us to pay for a specific service
What's your flow? Are they paying for a specific product/price?
versed turret
Do we code the checkout, or does stripe give us that API?
unique thorn
We own the entire Checkout experience. HAve you look at our docs?
versed turret
I’m paying for a selected product and price
If you can share the checkout docs, that would help?
.
unique thorn
versed turret
Thank you
versed turret
By the way, I emailed Stripe checkout just in case
unique thorn
what do you mean "I emailed Stripe checkout"?