#shazad_code
half lichenBOT
👋 Welcome to your new thread!
⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question. Thank you for your patience!
⏱️ We automatically close idle threads, which makes them read-only. Make sure you stick around to chat in realtime! If this thread is closed and you have another question you'll need to start a new thread.
🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1214157489503997962
📝 Have more to share? You can add more detail below, including code, screenshots, videos, etc.
gray heronBOT
Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
- shazad_api, 4 days ago, 7 messages
wind bolt
Hi
You are passing 500 as a plan ID
How are you accepting the payment ? can you share the code snippets behind that request Id ?
fathom badger
yes i will share, one min
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
paymentHandler: any = null;
constructor(private http:HttpClient,) { }
ngOnInit() {
this.invokeStripe();
}
makePayment(amount: any) {
const paymentHandler = (<any>window).StripeCheckout.configure({
key: ' ',
locale: 'auto',
token: function (stripeToken: any) {
console.log(stripeToken);
const requestId = stripeToken.id; // Assuming the ID is accessible as 'id'
console.log("Request ID:", requestId);
alert('Stripe token generated!');
},
});
paymentHandler.open({
name: 'Rateloc',
description: 'hello ',
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_51MbjLzKGy1jOUZ1djurBMx4j1L8iVDNJbL4uRyxBUf6dimhPP8R0RtdI9AQd5eXSxj61Ydd8Gmrxo8dfy2OYAIAy00WNdimQOm',
locale: 'auto',
token: function (stripeToken: any) {
console.log(stripeToken);
this.sendTokenToServer(stripeToken)
const requestId = stripeToken.id; // Assuming the ID is accessible as 'id'
console.log("Request ID:", requestId);
alert('Payment has been successfull!');
},
});
};
window.document.body.appendChild(script);
}
}
wind bolt
Could you please remove your private key pk_test... from the above message ?
fathom badger
done
wind bolt
OK, let's start from the beginning, what Stripe Product you want to use in order to accept payment ? Stripe Element, Checkout or embedded Checkout ?
fathom badger
Stripe element
wind bolt
Then you need to follow this guide step by step:
https://docs.stripe.com/payments/accept-a-payment?platform=web&ui=elements&client=react
Or this quickstart:
https://docs.stripe.com/payments/quickstart?platform=web&client=react&lang=node
pliant glacier
I have some technical questions but do not have PERMISSION TO SEND MESSAGES IN CHANNEL. why is that? can someone help!
pliant glacier
Please do. thanks
pliant glacier
In #help also I have the same issue. not able to write a message.
can you please invite
wind bolt
You need to read the weclome message and use one of the button according to your case
You can't send direct message
pliant glacier
I have selected "something else" and it takes me to "Contact Stripe support"
I already have contacted them and haven't found my solution for a technical issue
wind bolt
Use API or Code for example, and let's talk in your thread please
this is not yours.
Sorry @fathom badger
@fathom badger Let me know if there's any follow-up Qs I can answer!
gray heronBOT
fathom badger
Hello @wind bolt i hit request after reading the document, still same error: this is req id: req_QcbT7vo50c3Z35
i will also provide the code of the same, please tell what am i doing wrong
quiet sonnet
👋 taking over for my colleague. Let me catch up.
fathom badger
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'payment';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
paymentHandler: any = null;
constructor(private http:HttpClient,) { }
ngOnInit() {
this.invokeStripe();
}
makePayment(amount: any) {
const paymentHandler = (<any>window).StripeCheckout.configure({
key: 'pk_test_51MbjLzKGy1jOUZ1djurBMx4j1L8iVDNJbL4uRyxBUf6dimhPP8R0RtdI9AQd5eXSxj61Ydd8Gmrxo8dfy2OYAIAy00WNdimQOm',
locale: 'auto',
token: function (stripeToken: any) {
console.log(stripeToken);
const requestId = stripeToken.id; // Assuming the ID is accessible as 'id'
console.log("Request ID:", requestId);
alert('Stripe token generated!');
},
});
paymentHandler.open({
name: 'Rateloc',
description: 'hello ',
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: ' ',
locale: 'auto',
token: function (stripeToken: any) {
console.log(stripeToken);
this.sendTokenToServer(stripeToken)
const requestId = stripeToken.id; // Assuming the ID is accessible as 'id'
console.log("Request ID:", requestId);
alert('Payment has been successfull!');
},
});
};
window.document.body.appendChild(script);
}
}
sendTokenToServer(token: any) {
// Send the token to your server
this.http.post<any>('YOUR_SERVER_ENDPOINT', { token: token.id })
.subscribe(
response => {
console.log(response);
alert('Payment successful!');
// Handle success response from your server if needed
},
error => {
console.error('Error:', error);
alert('Payment failed. Please try again later.');
// Handle error response from your server if needed
}
);
}
}
<div>
<h1>{{ title }}</h1>
<button (click)="makePayment(10)">Pay $10</button>
</div>
and this is back end code:
@Value("${stripe.secret.key}")
private String stripeSecretKey;
@PostMapping("/payment")
public ResponseEntity<Object> payment(@RequestBody Map<String, Object> request) {
try {
Stripe.apiKey = stripeSecretKey;
PaymentIntentCreateParams params = PaymentIntentCreateParams.builder()
.setAmount(((Number) request.get("amount")).longValue())
.setCurrency("usd")
.putMetadata("integration_check", "accept_a_payment")
.build();
PaymentIntent paymentIntent = PaymentIntent.create(params);
Map<String, Object> response = new HashMap<>();
response.put("clientSecret", paymentIntent.getClientSecret());
return ResponseEntity.ok(response);
} catch (StripeException e) {
Map<String, String> response = new HashMap<>();
response.put("error", e.getMessage());
return ResponseEntity.status(500).body(response);
}
}
the code you shared is not relevant to the request you're having an issue with
in the request you shared you're passing the ID of the price as an amount
and you're creating it from the front-end
which is a bit weird to be honest
if you want to use Checkout Sessions then you need to take a look at this quickstart guide https://docs.stripe.com/checkout/quickstart
fathom badger
i referred the code from doc u sent: i got this as response in backend: {
"clientSecret": "cs_test_a1Mj4DdGgLO1fPWH99PUARO2WwiiT5nXBy1JbleSzywS57yS3NA3FMfzVa"
} what to do next?
fathom badger
@PostMapping("/payment")
public ResponseEntity<Object> payment(@RequestBody Map<String, Object> request) {
try {
Stripe.apiKey = stripeSecretKey;
String YOUR_DOMAIN = "http://localhost:5002";
SessionCreateParams params = SessionCreateParams.builder()
.setMode(SessionCreateParams.Mode.PAYMENT)
.setSuccessUrl(YOUR_DOMAIN + "/success.html")
.setCancelUrl(YOUR_DOMAIN + "/cancel.html")
.addLineItem(
SessionCreateParams.LineItem.builder()
.setQuantity(1L)
// Provide the exact Price ID (for example, pr_1234) of the product you want to sell
.setPrice("price_1OqZh3KGy1jOUZ1dyq6SFGkR")
.build())
.build();
Session session = Session.create(params);
Map<String, Object> response = new HashMap<>();
response.put("clientSecret", session.getId()); // Using session ID as clientSecret, modify as needed
return ResponseEntity.ok(response);
} catch (StripeException e) {
Map<String, String> response = new HashMap<>();
response.put("error", e.getMessage());
return ResponseEntity.status(500).body(response);
}
}
backend code
quiet sonnet
response.put("clientSecret", session.getId()); this is wrong
fathom badger
req passed in post: {
"paymentMethodId": "card_1OqZAnKGy1jOUZ1dI8s1FfbZ", // Replace with the actual payment method ID or token
"amount": 1000,
"confirm": true
}
quiet sonnet
you need to send the url to the frontend
and redirect your customer to the Checkout Session URL
fathom badger
okay i will try.....so nothing i have to do with this id which am currently getting
quiet sonnet
yes
fathom badger
Do we have any specific docs for angular integration?
I have installed ngx-stripe
also i passed uurl to frontend, but nothjing is showing on stripe dashboard now...no transaction of what i hit
vale citrus
We don't have an official angular library.
I'm taking over from my colleague. Would you mind summarising the latest question for me?
fathom badger
actually i did try the backend code which u asked me to go thru doc, and it gave me a checkout sesssion id, which i am not sure what to do about it.....i am myself a backend developer, i alsso hav frontend dveloper with me, can u tell me what am supposed to do now? i also provided his code above
vale citrus
@PostMapping("/payment")
public ResponseEntity<Object> payment(@RequestB...
I am a bit confused on whether you're trying to use Stripe Checkout or Payment Elements. What kind of integration are you trying to build?
fathom badger
What's the difference between stripe checkout and payment elements?
vale citrus
Stripe Checkout is Stripe-hosted payment page. Payment Elements is a frontend component that you can add to your own website to accept payments.
What kind of guides are you following?
fathom badger
Is it possible, that we can have a meeting over it to discuss?
We are trying to integrate it from last 2 weeks, but we are been able to come to conclusion...neither are we understanding is it something to do with backend or frontend
So if possible can u arrange a meeting with us, so we will share our screen and and code simultanously to understand problem in depth
vale citrus
Is it possible, that we can have a meeting over it to discuss?
My team only uses Discord to provide support. You can reach out to Stripe Support for 1x1 interaction: https://support.stripe.com/?contact=true
I suggest you to go through the docs again, and start with this guide:
https://docs.stripe.com/payments/accept-a-payment?platform=web&ui=checkout
fathom badger
can i give you backend and frontend code? will u be able to figure out the problem?
vale citrus
`response.put("clientSecret", session.getId());` this is wrong
My colleague has suggested where the issue is. Also I you carefully go through the doc that I shared you will see where is the problem.
I suggest you to start from scratch and follow the doc closely.
fathom badger
i did that @PostMapping("/payment")
public ResponseEntity<Object> payment(@RequestBody Map<String, Object> request) {
try {
Stripe.apiKey = stripeSecretKey;
String YOUR_DOMAIN = "http://localhost:5002";
SessionCreateParams params = SessionCreateParams.builder()
.setMode(SessionCreateParams.Mode.PAYMENT)
.setSuccessUrl(YOUR_DOMAIN + "/success.html")
.setCancelUrl(YOUR_DOMAIN + "/cancel.html")
.addLineItem(
SessionCreateParams.LineItem.builder()
.setQuantity(1L)
// Provide the exact Price ID (for example, pr_1234) of the product you want to sell
.setPrice("price_1OqZh3KGy1jOUZ1dyq6SFGkR")
.build())
.build();
Session session = Session.create(params);
Map<String, Object> response = new HashMap<>();
response.put("url", session.getUrl()); // Using session ID as clientSecret, modify as needed
// Session session = Session.create(params);
return ResponseEntity.ok(response);
} catch (StripeException e) {
Map<String, String> response = new HashMap<>();
response.put("error", e.getMessage());
return ResponseEntity.status(500).body(response);
}
}
What you really need to do is redirect the users to the Session URL, rather than return it to the frontend.
half lichenBOT
fathom badger
it worked...it is giving me a url now....which if i click gives me a page where i have to fill card details
this is the code: @PostMapping("/payment")
public ResponseEntity<Object> createCheckoutSession() {
try {
Stripe.apiKey = stripeSecretKey;
String YOUR_DOMAIN = "http://localhost:4242";
SessionCreateParams params =
SessionCreateParams.builder()
.setMode(SessionCreateParams.Mode.PAYMENT)
.setSuccessUrl(YOUR_DOMAIN + "/success.html")
.setCancelUrl(YOUR_DOMAIN + "/cancel.html")
.addLineItem(
SessionCreateParams.LineItem.builder()
.setQuantity(1L)
// Provide the exact Price ID (for example, pr_1234) of the product you want to sell
.setPrice("price_1OqZh3KGy1jOUZ1dyq6SFGkR")
.build())
.build();
Session session = Session.create(params);
return ResponseEntity.ok(session.getUrl());
} catch (StripeException e) {
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(e.getMessage());
}
}
severe herald
Perfect, let me know if you've any further questions. Otherwise I'm going to close this thread
fathom badger
no no
i wantt
what is the next step
after i get url
how will i enter the payment...like currently it is autofilled
severe herald
it worked...it is giving me a url now....which if i click gives me a page where ...
I think you just answered that yourself?
severe herald
It's there on the left side of the page
fathom badger
this is url generated...in this if u see on left there is 1 pound written
but i never entered one pound
its automatically entered
severe herald
The total is automatically computed from the line items yes
severe herald
SessionCreateParams.LineItem.builder()
.setQuantity(1L)
// Provide the exact Price ID (for example, pr_1234) of the product you want to sell
.setPrice("price_1OqZh3KGy1jOUZ1dyq6SFGkR")
.build())
.build();```
That part of your code. The line items you add there, Checkout will total up the amounts and charge thatYou can't set a custom amount with Checkout like you can if you're using a Payment Intent directly
fathom badger
i have to enter amount from customer so that i can book hotel
i think i will have to change code then
right?
severe herald
i have to enter amount from customer so that i can book hotel
As explained, you can't do that with Checkout. The total on the page reflects the amount of all the line items on the session
fathom badger
where will i get line items on the session
severe herald
You set them in the code you shared above
I'm going to close this thread out now and recommend you take a step back. We've been helping you for almost 3 hours now, and most of your questions can be answered in the documentation
You need to understand what it is you're trying to build exactly and how Stripe can enable the flow you need. The doc here is a good starting point that outlines the different kind of payment APIs and UIs we have, and how they differ
