I am trying to integrate the stripe checkout sessions in my React app. In order to create the session I have a node/express server running in the background that has a "/billing" post.
When I try to hit it using fetch I get a 400 bad request from my chrome console.
Here's the function in my frontend:
const submitReq = () =>{
const price = {price: "price_1HmAziJIQLh7k5Y65s1Hyupc"};
fetch("http://localhost:8282/billing", {
method: "POST",
redirect: "follow",
headers:{
"Content-Type": "application/json"
},
body: JSON.stringify(price),
}).then(response => {
if(response.ok){
console.log(response);
response.json()}
else{ throw Error(`Request rejected with status ${response.status}`);}
})
.then(price =>{
console.log('success:', price);
})
.catch((error)=>{
console.error("error:", error);
});
}
Then in the node/express I have the "/billing" post which looks like this
app.options("/billing", cors(corsConfig));
app.post("/billing", async (req, res) => {
const {priceId} = req.body;
console.log(priceId);
try {
const session = await stripe.checkout.sessions.create({
mode: "subscription",
payment_method_types: ["card"],
line_items: [
{
price: priceId,
quantity: 1,
},
],
success_url: 'https://example.com/success.html',
cancel_url: 'https://example.com/canceled.html',
});
res.send({
sessionId: session.id,
});
} catch (e) {
res.status(400);
return res.send({
error: {
message: e.message,
}
});
}
});
Related
I am using react.js as frontend and nodejs for the backend. My client-side code is
export const updatePaymentDetails = (userId, token, paymentDetails) => {
return fetch(`${API}/user/${userId}`, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: `Bearer ${token}`
},
body: JSON.stringify(paymentDetails)
})
.then(response => {
console.log(response);
return response.json();
})
.catch(err => console.log(err));
};
And My server-side code is
exports.updateUser = (req, res) => {
User.findByIdAndUpdate(
{_id: req.profile._id},
{$set: req.body},
{new: true, useFindAndModify: false},
(err, user) => {
if(err) {
return res.status(400).json({
error: "You are not authorized to update this user"
});
}
user.salt = undefined;
user.encry_password = undefined;
user.createdAt = undefined;
user.updatedAt = undefined;
console.log(user);
return res.json(user);
}
);
};
Front-end output
In the server-side code, you can see that I am returning the res.json. but On the client-side, I am not getting the value that I have returned from the server.
Please, can anyone help me?
You need to add one more then(). when you call response.json() it also returns a promise apply a then call when you return response.json()
I'm trying to scrape some data from truepush website, but first it needs to be authenticated. So here is what I'm doing:
const loginUrl = 'https://app.truepush.com/api/v1/login'
let loginResult = await axios.get(loginUrl)
.then(({ headers }, err) => {
if (err) console.error(err);
return headers['set-cookie'][0];
})
.then((cookie, err) => {
if (err) console.error(err);
const splitByXsrfCookieName = cookie.split("XSRF-TOKEN=")[1]
return splitByXsrfCookieName.split(';')[0];
}).then(xsrfToken => {
return axios.post(loginUrl, {
headers: {
"Content-Type": "application/json",
"X-XSRF-TOKEN": xsrfToken
}
})
}).then(res => console.log(res))
It throws xrsfToken on second then response and when I try to login in third response with that xsrf token, it shows me this error:
{
"status_code": "XSRF-ERROR",
"status": "ERROR",
"message": "Cross domain requests are not accepting to this endpoint. If you cleared the cookies, please refresh your browser."
}
I'm not sure what wrong I'm doing :(
The main issue is that the call also requires the original cookie to be sent. You need to keep the original cookie your get from set-cookie header and pass it in cookie header in the second call like cookie: originalCookie. Also in your code, there is no body sent in the POST call.
The following code reproduces the login :
const axios = require("axios");
const originalUrl = 'https://app.truepush.com';
const loginUrl = 'https://app.truepush.com/api/v1/login';
const email = "your-email#xxxxxx";
const password = "your-password";
(async () => {
await axios.get(originalUrl)
.then(({ headers }, err) => {
if (err) console.error(err);
const cookie = headers['set-cookie'][0];
return {
cookie: cookie,
xsrfToken: cookie.split("XSRF-TOKEN=")[1].split(";")[0]
};
})
.then((data, err) => {
if (err) console.error(err);
return axios.post(loginUrl, {
"email": email,
"password": password,
"keepMeLoggedIn": "yes"
}, {
headers: {
"X-XSRF-TOKEN": data.xsrfToken,
"cookie": data.cookie
}
})
})
.then(res => console.log(res.data))
})();
Output:
{
status_code: 'SUCCESS',
status: 'SUCCESS',
message: 'Login Successful',
data: {
id: 'xxxxxxxxxxxxxxxxxxx',
name: 'xxxxx',
email: 'xxxxxxx#xxxxxx'
}
}
Note that both cookie and xsrfToken are consumed by the second promise
I'm trying to test the process of creating a checkout session for a stripe subscription. However I get this error on the client: IntegrationError: stripe.redirectToCheckout: You must provide one of lineItems, items, or sessionId.
Here is my code on the front end:
var priceId = "price_1IGpOIFE3UXETakjtSs1Wq6x";
var createCheckoutSession = function(priceId) {
return fetch("https://us-central1-streamline-14fc8.cloudfunctions.net/createCheckoutSession", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
priceId: priceId
})
}).then(function(result) {
return result.json();
});
};
document
.getElementById("checkout")
.addEventListener("click", function(evt) {
createCheckoutSession(priceId).then(function(data) {
// Call Stripe.js method to redirect to the new Checkout page
console.log(data);
stripe
.redirectToCheckout({
sessionId: data.sessionId
})
.then(handleResult);
});
});
Then my code in Firebase Functions:
//stripe checkout
exports.createCheckoutSession = functions.https.onCall(async (req, res) => {
const {
priceId
} = req.body;
// See https://stripe.com/docs/api/checkout/sessions/create
// for additional parameters to pass.
try {
const session = await stripe.checkout.sessions.create({
mode: "subscription",
payment_method_types: ["card"],
line_items: [{
price: priceId,
// For metered billing, do not pass quantity
quantity: 1,
}, ],
// {CHECKOUT_SESSION_ID} is a string literal; do not change it!
// the actual Session ID is returned in the query parameter when your customer
// is redirected to the success page.
success_url: 'https://example.com/success.html?session_id={CHECKOUT_SESSION_ID}',
cancel_url: 'https://example.com/canceled.html',
});
res.send({
sessionId: session.id,
});
} catch (e) {
res.status(400);
return res.send({
error: {
message: e.message,
}
});
}
})
this is my code :
Express Routes:
router.route('/block')
.post(controller.ticketBlocking);
Express Controller:
const axios = require('axios');
const OAuth = require('oauth-1.0a');
const crypto = require('crypto');
const ticketBlocking = (req, res) => {
const data = JSON.stringify({
source = req.body.source
});
const oauth = OAuth({
consumer: {
key: '....', //Hided the key
secret: '....', //Hided the secret
},
signature_method: 'HMAC-SHA1',
hash_function(base_string, key) {
return crypto.createHmac('sha1', key).update(base_string).digest('base64');
}
});
const request_data = {
url: 'http://link.vvv/blockTicket',
method: 'post',
};
axios({
method: request_data.method,
url: request_data.url,
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
...oauth.oauth.toHeader(oauth.oauth.authorize(request_data)),
},
data : data
})
.then((response) => {
console.log(JSON.stringify(response.data));
})
.catch(function (error) {
if (error.response) {
console.log(error.response.data);
console.log(error.response.status);
} else if (error.request) {
console.log(error.request);
} else {
console.log('Error', error.message);
}
console.log(error.config);
});
};
the npm package which am using is - "oauth-1.0a"
The problem am facing is, when i use GET method with different end point, i get an output but when ever i use POST method am getting an empty error with status code 500
I dont know where is the mistake, am using oauth1.0a for authorization, please help !
I created stripe payment page using gatsby react and aws lambda. But this code not create customer data like ( shipping address, email etc. )
Lamdba Code
const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
module.exports.handler = (event, context, callback) => {
console.log("creating charge...");
// Pull out the amount and id for the charge from the POST
console.log(event);
const requestData = JSON.parse(event.body);
console.log(requestData);
const amount = requestData.amount;
const token = requestData.token.id;
// Headers to prevent CORS issues
const headers = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "Content-Type"
};
return stripe.charges
.create({
// Create Stripe charge with token
amount,
source: token,
currency: "usd",
description: "Tshirt"
})
.then(charge => {
// Success response
console.log(charge);
const response = {
headers,
statusCode: 200,
body: JSON.stringify({
message: `Charge processed!`,
charge
})
};
callback(null, response);
})
.catch(err => {
// Error response
console.log(err);
const response = {
headers,
statusCode: 500,
body: JSON.stringify({
error: err.message
})
};
callback(null, response);
});
};
Gatsby Payment Code
Code is working , payment is working. but shipping details not working.
openStripeCheckout(event) {
event.preventDefault();
this.setState({ disabled: true, buttonText: "WAITING..." });
this.stripeHandler.open({
name: "Demo Product",
amount: amount,
shippingAddress: true,
billingAddress: true,
description: "",
token: (token, args) => {
fetch(`AWS_LAMBDA_URL`, {
method: "POST",
body: JSON.stringify({
token,
args,
amount,
}),
headers: new Headers({
"Content-Type": "application/json",
}),
})
.then(res => {
console.log("Transaction processed successfully");
this.resetButton();
this.setState({ paymentMessage: "Payment Successful!" });
return res.json();
})
.catch(error => {
console.error("Error:", error);
this.setState({ paymentMessage: "Payment Failed" });
});
},
});
}
I want to see customer data , shipping address etc.
Thanks for helping.
The billing and shipping address are both available in the args-argument of the token callback you're collecting.
https://jsfiddle.net/qh7g9f8w/
var handler = StripeCheckout.configure({
key: 'pk_test_xxx',
locale: 'auto',
token: function(token, args) {
// Print the token response
$('#tokenResponse').html(JSON.stringify(token, null, '\t'));
// There will only be args returned if you include shipping address in your config
$('#argsResponse').html(JSON.stringify(args, null, '\t'));
}
});