We Keep Coding

Stripe Payment Element and one page checkout - what is the correct payment flow?

I want to upgrade my simple Stripe one-page checkout to use the new Payment Element that unifies a lot of different payment methods under one component. By simple I mean, the customer chooses between a few variants of one product, provides needed info and submits the order. Collect money, send emails, fulfil the order etc. Just vanilla HTML/CSS/JS and a bit of PHP. Using Payment Intents API to process the payments, was on Charges API before.
I love the premise of this unified element so I decided to give it a go. It turns out I have trouble understanding what to do with both stripe.confirmPayment method and return_url parameter.
I guess the return_url should be my checkout page? Also, is there a way to redirect without hard refresh? Ideally, I would be able to do some server-side stuff before redirect happens, but it seems that stripe.confirmPayment automatically redirects if resolved successfully.
Here is my code. I am a designer btw, so guess I am missing something obvious as always.
// init Stripe elements
fetch('/config.php', {
method: 'get',
headers: {
'Content-Type': 'application/json'
}
})
.then((response) => {
return response.json();
})
.then((response) => {
return setupElements(response.publishableKey)
})
var setupElements = function (publishableKey) {
stripe = Stripe(publishableKey);
// create payment intent to setup payment element
fetch('/setup-elements.php', {
method: 'POST',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(order)
})
.then(function (response) {
return response.json()
})
.then(function (data) {
const appearance = {
theme: 'none',
labels: 'floating',
// etc.....
};
elements = stripe.elements({
clientSecret: data.clientSecret,
fonts: [{
cssSrc: 'https://use.typekit.net/hly2qug.css'
}, ],
appearance
});
const paymentElement = elements.create("payment", {
fields: {
billingDetails: {
email: 'never',
address: {
line1: 'never',
city: 'never',
state: 'never',
country: 'never',
postalCode: 'never'
}
}
}
});
paymentElement.mount("#payment-element");
})
}
form.addEventListener('submit', function (e) {
e.preventDefault();
var isFormValid = validate.validateAll(form);
if (isFormValid.length < 1) {
loading(true);
collectFormInfo();
confirmPayment();
}
})
var confirmPayment = function () {
stripe.confirmPayment({
elements,
confirmParams: {
return_url: 'checkout-page?',
payment_method_data: {
billing_details: {
email: order.customer.email,
address: {
line1: order.delivery.address,
city: order.delivery.city,
state: order.delivery.state,
country: order.delivery.country,
postal_code: order.delivery.postcode
}
}
}
}
})
.then(function (result) {
// This is where I get stuck. How to do stuff after
// payment is confirmed
// and not get redirected immediately? If
//redirected, where to and is it
// possible to do so asynchronously?
if (result.error.type === "card_error" || result.error.type === "validation_error") {
showMessage(result.error.message);
} else {
// get client secret
const clientSecret = new URLSearchParams(window.location.search).get(
"payment_intent_client_secret"
);
// bail if no client secret
if (!clientSecret) {
return;
} else {
stripe.retrievePaymentIntent(clientSecret).then(function (response) {
switch (response.paymentIntent.status) {
case "succeeded":
showMessage("Payment succeeded!");
break;
case "processing":
showMessage("Your payment is processing.");
break;
case "requires_payment_method":
showMessage("Payment failed. Please try another payment method.");
break;
default:
showMessage("Something went wrong.");
break;
}
});
}
}
})
}
Nudge in the right direction is all I need, at least I hope so

Yes the return_url should be your own page that Stripe will automatically redirect after your customer completed the Payment: Stripe Doc. 'checkout-page?' doesn't look like a valid URL. Normally you would want something like 'http://localhost:4242/success'
This action is done automatically on client and you can't intercept it. Any action you want to perform on server should be handled via webhook, at Step 6 "Handle post-payment events" at the same article above.

Braintree Node.js cannot get transaction.sale to work

I am building a reactjs app that among others will include Braintree Dropin UI integration. So far, I have managed to make the UI show up and send a payload to the back end. However, I cannot get the gateway.transaction.sale() part to work. Here is my code's relevant parts:
When the user clicks the pay button, this is fired:
instance.requestPaymentMethod().then(function (payload) {
console.log(payload);
completePayment(amount, payload.nonce, userId, sessionId).then((result) => {
console.log( result );
});
}).catch(function (err) {
alert(err.message);
});
And this is the code that should handle the transaction:
return gateway.transaction.sale({
amount: amount,
paymentMethodNonce: nonce,
customFields: {
session_id: sessionId,
user_id: userId
},
options: {
submitForSettlement: true
}
}).then(function (result) {
if (result.success) {
console.log('Transaction ID: ' + result.transaction.id);
} else {
console.error(result.message);
}
}).catch(( error ) => {
alert(error);
});
Every time this function is fired, I get this error from catch:
TypeError: can't assign to property "success" on :not an object
Can anyone point me in the right direction?
Please note that I am not very familiar with react, node etc so my code may not be the best thing around...

Check these points:
make sure you assigned your environment to the sandbox (braintree.Environment.Sandbox);
double check (merchantId, publicKey, and privateKey).

MERN Stack: How to prevent a User from registering (being added to an array) multiple times?

Semi-new developer building a project using the MERN stack.
The app has two models, one for Users and one for Tournaments. Tournament model has an attribute called participants which is an array.
I wrote an Express backend route so that a User can register for Tournaments.participants[].
This looks like:
router.post('/:id', (req, res) => {
Tournament.findById(req.params.id)
.then(tournament => {
tournament.participants.push(req.body);
return tournament.save();
})
.then(savedTournament => res.json(savedTournament))
.catch(err => res.json(err));
});
However, a User can just keep clicking Sign Up and I'd have a bunch of duplicate users, so I'm trying to write a conditional that will disable Sign Up if the user is already in Tournament.participants[].
I tried writing a conditional inside the Express route using Array.includes(req.body) but couldn't hack it.
Looked something like
Tournament.findById(req.params.id)
.then(tournament => {
if (tournament.participants.includes(req.body) {
return res.status(400).json({ msg: "This user already signed up for this tournament" });
} else {
tournament.participants.push(req.body);
return tournament.save();
}
})
.then(savedTournament => res.json(savedTournament))
.catch(err => res.json(err));
I tried different variations as well, like if (tournament.participants.includes(!req.body)) then push(req.body), etc.
And I also tried just rendering a different button if the participants.includes(user) but I believe this should be done on the backend anyway.. I'm open to suggestions.
Can anyone help me out?

In general, you can't use the native comparison operators with objects, includes included:
const foo = { id: 1 };
const bar = [{ id: 1 }];
console.log(bar.includes(foo)); // outputs `false`
You should use some kind of item id in order to check if its already exists:
function isIdIncluded(arr, id) {
return arr.some(x => x.id === id)
}
const foo = { id: 1 };
const bar = [{ id: 1 }];
console.log(isIdIncluded(bar, 1)); // outputs `true`

I assume you are keeping the users's _id in the participants array, and your tournament schema is similar to this:
const tournamentSchema = new mongoose.Schema({
name: String,
participants: Array,
});
Now if you send a request with this body:
{
"user": "5e97255a342f395774f30162" //the user id who wants to participate
}
You can use this code (I just changed the req.body to req.body.user)
Tournament.findById(req.params.id)
.then((tournament) => {
if (tournament.participants.includes(req.body.user)) {
return res.status(400).json({ msg: "This user already signed up for this tournament" });
} else {
tournament.participants.push(req.body.user);
return tournament.save();
}
})
.then((savedTournament) => res.json(savedTournament))
.catch((err) => res.status(500).json(err));
Now when a user first time participates a tournament, the document will be like this:
{
"participants": [
"5e97255a342f395774f30162"
],
"_id": "5e97255a342f395774f30161",
"name": "Chess Tournament"
}
And when the same user tries, the response will be like this with a 400 status code.
{
"msg": "This user already signed up for this tournament"
}
Also please note that, the user id shouldn't be send in the request body, but it must be the user's id who is logged in.

Meteor user helper hangs off after update

I have this helper:
agreed: function (){
if (Meteor.users.findOne({_id: Meteor.userId(), profile: {agreedTermsOfUse: 'true'}}))
return true;
}
On the page where I check it I have this:
{{#unless agreed}}
agree form
{{else}}
Create item form.
{{list of item}}
{{/unless}}
So far, all goes well. The user signs up then he can create an item and it renders on the list of items..
Now, I've added another Meteor.call, which when getting the success call back on the client, for the creating item, it adds the item id to the users' profile.hasItems.
Then after getting succes for that method, "unless" returns false, and I have to submit the agree to form again.
What am I missing? Thanks.
"submit .create_restaurant": function (event) {
event.preventDefault();
var text = event.target.create_restaurant.value;
Meteor.call('CreateRest', Meteor.userId(), text, function(error, result){
if(error){
}else{
console.log(result, Meteor.userId());
Meteor.call('userRestaurants', result, Meteor.userId(), function (error, result) {
if (error) {
alert(123);
} else {
console.log(result);
}
})
}
}
);
event.target.create_restaurant.value = "";
}
methods:
'CreateRest': function(user_id, title) {
check(title, String);
check(user_id, String);
return callback = Restaurants.insert({
createdBy: user_id,
createdAt: new Date(),
title: title
});
},
'userRestaurants': function(rest_id, createdBy) {
var restId = checkHelper(rest_id, createdBy);
if(restId)
console.log(rest_id, createdBy);
{
var callback = Meteor.users.update(
createdBy,
{$addToSet: {'profile.hasRestaurants': restId}}
);
return callback;
}
}

I don't know why you're seeing the behaviour that you are, but I do know that you have other problems to sort out first :)
You have a huge security hole - you're passing the user id through to the method from the client. That means that anyone can simply open the browser console and create a restaurant with any user id they like as the owner. Instead, use this.userId in the method to get the id of the caller.
Why the round trip to the server? Just have the first method update the client.
So, something like this (untested, written by hand here):
"submit .create_restaurant": function (event) {
event.preventDefault();
var text = event.target.create_restaurant.value;
Meteor.call('CreateRest',text, function(error, result){
if(error){
alert(123);
}else{
console.log(result);
}
});
event.target.create_restaurant.value = "";
}
and:
'CreateRest': function(user_id, title) {
check(title, String);
check(this.userId, String);
userId = this.userId;
Restaurants.insert({
createdBy: userId,
createdAt: new Date(),
title: title
}, function(err, restId) {
if (err) throw new Meteor.Error(err);
Meteor.users.update(
userId,
{$addToSet: {'profile.hasRestaurants': restId}},
function (err, res) {
if (err) throw new Meteor.Error(err);
return restId;
}
);
});
Once that's implemented properly it might start working. If it doesn't then the issue isn't related to the code you're posting.
Finally note that from a schema perspective it's really odd that that you have profile.hasRestaurants. To find the restaurants that a user has you should just do a find on the Restaurants collection.

Creating a Stripe Customer Using Parse

I'm trying to create a stripe customer using parse but can't seem to get the customer.id value from the response.
var newCustomer;
Stripe.Customers.create(
card: request.params.cardToken,
email: request.params.email
//These values are a success but below is where I have an issue.
).then(function(customer){
newCustomer = customer.id;
//newCustomer never gets set to the id, it's always undefined.
}, function(error){
});

Here is a way to create a new customer in parse cloud code using parse stripe module api.
Parse Reference: http://parse.com/docs/js/symbols/Stripe.Customers.html
Be sure you have stored your publish api key
var Stripe = require('stripe');
Stripe.initialize('sk_test_***************');
Parse.Cloud.define("createCustomer", function(request, response) {
Stripe.Customers.create({
account_balance: 0,
email: request.params.email,
description: 'new stripe user',
metadata: {
name: request.params.name,
userId: request.params.objectId, // e.g PFUser object ID
createWithCard: false
}
}, {
success: function(httpResponse) {
response.success(customerId); // return customerId
},
error: function(httpResponse) {
console.log(httpResponse);
response.error("Cannot create a new customer.");
}
});
});