Develop Reference

Sending data in Laravel using Axios & Vue

I have been following the Stripe integration tutorial by Laracasts and it's become apparent to me that a lot has changed since Laravel 5.4 was released. I have been able to still find my way along but I have hit a bump trying to submit a payment form using Vue and Axios.
The product is being retrieved from a database and displayed in a select dropdown - this works. My issue is the data is not being properly sent to the store function in the PurchasesController. When I try to make a purchase the form modal appears fine, I fill it out with the appropriate test data and submit it, but in Chrome inspector I can see that /purchases returns a 404 error and when I check the network tab the error is: No query results for model [App\Product]
Here is the original Vue code:
<template>
<form action="/purchases" method="POST">
<input type="hidden" name="stripeToken" v-model="stripeToken">
<input type="hidden" name="stripeEmail" v-model="stripeEmail">
<select name="product" v-model="product">
<option v-for="product in products" :value="product.id">
{{ product.name }} — ${{ product.price /100 }}
</option>
</select>
<button type="submit" #click.prevent="buy">Buy Book</button>
</form>
</template>
<script>
export default {
props: ['products'],
data() {
return {
stripeEmail: '',
stripeToken: '',
product: 1
};
},
created(){
this.stripe = StripeCheckout.configure({
key: Laravel.stripeKey,
image: "https://stripe.com/img/documentation/checkout/marketplace.png",
locale: "auto",
token: function(token){
axios.post('/purchases', {
stripeToken: token.id,
stripeEmail: token.email
})
.then(function (response) {
alert('Complete! Thanks for your payment!');
})
.catch(function (error) {
console.log(error);
});
}
});
},
methods: {
buy(){
let product = this.findProductById(this.product);
this.stripe.open({
name: product.name,
description: product.description,
zipCode: true,
amount: product.price
});
},
findProductById(id){
return this.products.find(product => product.id == id);
}
}
}
</script>
And my PurchasesController.
<?php
namespace App\Http\Controllers;
use Log;
use App\Product;
use Illuminate\Http\Request;
use Stripe\{Charge, Customer};
class PurchasesController extends Controller
{
public function store()
{
Log::info("Product Info: " . request('product'));
Log::info("Stripe Email: " . request('stripeEmail'));
Log::info("Stripe Token: " . request('stripeToken'));
$product = Product::findOrFail(request('product'));
$customer = Customer::create([
'email' => request('stripeEmail'),
'source' => request('stripeToken')
]);
Charge::create([
'customer' => $customer->id,
'amount' => $product->price,
'currency' => 'aud'
]);
return 'All done';
}
}
I realise that product isn't being passed through to /purchases above so I have tried this:
axios.post('/purchases', {
stripeToken: token.id,
stripeEmail: token.email,
product: this.product
})
Unfortunately I still get the same No query results for model [App\Product] error even with that. Is there another/better way of passing data from Vue/Axios that I could use instead? If anyone is able to assist it would be much appreciated.
Thank you in advance.
Edit
The solution was to recast this to be a new variable and it started functioning again. Here is the relevant portion of the Vue Code that worked for me:
created(){
let module = this; // cast to separate variable
this.stripe = StripeCheckout.configure({
key: Laravel.stripeKey,
image: "https://stripe.com/img/documentation/checkout/marketplace.png",
locale: "auto",
token: function(token){
axios.post('/purchases', {
stripeToken: token.id,
stripeEmail: token.email,
product: module.product
})
.then(function (response) {
alert('Complete! Thanks for your payment!');
})
.catch(function (error) {
console.log(error);
});
}
});
},

Are you sure when assigning the product ID to data (using product: this.product) that this keyword is really your Vue instance? You might need to bind it manually calling .bind(this) on the .post(...) call.
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Braeintree Client Set Up with JS v3 - payment_method_nonce null and the form isn't submitting

I've tried to integrate Braintree in my Laravel 5.2 app and everything works fine with JS v2 client setup, but I would like to upgrade it to v3.
This is from the docs (I've customized a bit):
<form id="checkout-form" action="/checkout" method="post">
<div id="error-message"></div>
<label for="card-number">Card Number</label>
<div class="hosted-field" id="card-number"></div>
<label for="cvv">CVV</label>
<div class="hosted-field" id="cvv"></div>
<label for="expiration-date">Expiration Date</label>
<div class="hosted-field" id="expiration-date"></div>
<input type="hidden" name="payment-method-nonce">
<input type="submit" value="Pay">
</form>
<!-- Load the Client component. -->
<script src="https://js.braintreegateway.com/web/3.0.0-beta.8/js/client.min.js"></script>
<!-- Load the Hosted Fields component. -->
<script src="https://js.braintreegateway.com/web/3.0.0-beta.8/js/hosted-fields.min.js"></script>
<script>
var authorization = '{{ $clientToken }}'
braintree.client.create({
authorization: authorization
}, function (clientErr, clientInstance) {
if (clientErr) {
// Handle error in client creation
return;
}
braintree.hostedFields.create({
client: clientInstance,
styles: {
'input': {
'font-size': '14pt'
},
'input.invalid': {
'color': 'red'
},
'input.valid': {
'color': 'green'
}
},
fields: {
number: {
selector: '#card-number',
placeholder: '4111 1111 1111 1111'
},
cvv: {
selector: '#cvv',
placeholder: '123'
},
expirationDate: {
selector: '#expiration-date',
placeholder: '10 / 2019'
}
}
}, function (hostedFieldsErr, hostedFieldsInstance) {
if (hostedFieldsErr) {
// Handle error in Hosted Fields creation
return;
}
form.addEventListener('submit', function (event) {
event.preventDefault();
hostedFieldsInstance.tokenize(function (tokenizeErr, payload) {
if (tokenizeErr) {
// Handle error in Hosted Fields tokenization
return;
}
document.querySelector('input[name="payment-method-nonce"]').value = payload.nonce;
form.submit();
});
}, false);
});
});
</script>
But when I click the submit button, nothing happens.event.preventDefault() stops the submission and the payment_method_nonce token is generated, but I can't submit the form after that, because form.submit() isn't works
How can I submit the form after event.preventDefault()?
Or how can I send the payment_method_nonce token to my controller?
Thanks!

When I copied your snippet and tried to run the example, I got (index):69 Uncaught ReferenceError: form is not defined in the console. When I added
var form = document.getElementById('checkout-form');
it worked just fine.
Best guess, you just forgot to assign the form variable to reference the form dom element. If that's not the case, be sure to let me know.

Stripe.js - Cannot read property 'stripeToken' of undefined

I'm trying to integrate stripe.js into a web app I'm working on, however I'm being thrown the following error:
Cannot read property 'stripeToken' of undefined
The clientside is setting the hidden input of the token but for some reason, the server can't pull it this:
var stripeToken = request.body.stripeToken;
Any ides as to why this might be?
Client-side JS
jQuery(function($) {
$('#payment-form').submit(function(event) {
var $form = $(this);
// Disable the submit button to prevent repeated clicks
$form.find('button').prop('disabled', true);
Stripe.card.createToken({
number: $('.card-number').val(),
cvc: $('.card-cvc').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val()
}, stripeResponseHandler);
// Prevent the form from submitting with the default action
return false;
});
});
function stripeResponseHandler(status, response) {
// Grab the form:
var $form = $('#payment-form');
if (response.error) { // Problem!
// Show the errors on the form:
$form.find('.payment-errors').text(response.error.message);
$form.find('.submit').prop('disabled', false); // Re-enable submission
} else { // Token was created!
// Get the token ID:
var token = response.id;
// Insert the token ID into the form so it gets submitted to the server:
$form.append($('<input type="hidden" name="stripeToken">').val(token));
// Submit the form:
$form.get(0).submit();
}
};
jQuery(function($) {
$('[data-numeric]').payment('restrictNumeric');
$('.cc-number').payment('formatCardNumber');
$('.cc-exp').payment('formatCardExpiry');
$('.cc-cvc').payment('formatCardCVC');
$.fn.toggleInputError = function(erred) {
this.parent('.form-group').toggleClass('has-error', erred);
return this;
};
$('form').submit(function(e) {
e.preventDefault();
var cardType = $.payment.cardType($('.cc-number').val());
$('.cc-number').toggleInputError(!$.payment.validateCardNumber($('.cc-number').val()));
$('.cc-exp').toggleInputError(!$.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal')));
$('.cc-cvc').toggleInputError(!$.payment.validateCardCVC($('.cc-cvc').val(), cardType));
$('.cc-brand').text(cardType);
$('.validation').removeClass('text-danger text-success');
$('.validation').addClass($('.has-error').length ? 'text-danger' : 'text-success');
});
});
Server-side JS
app.post('/', function(req, res) {
var stripeToken = request.body.stripeToken;
var charge = stripe.charges.create({
amount: 1000, // amount in cents, again
currency: "usd",
source: stripeToken,
description: "Example charge"
}, function(err, charge) {
if (err && err.type === 'StripeCardError') {
// The card has been declined
}
});
});
Form (jade)
form(novalidate='', autocomplete='on', method='POST' id="payment-form")
.form-group
label.control-label(for='cc-number')
| Card number formatting
small.text-muted
| [
span.cc-brand
| ]
input#cc-number.input-lg.form-control.cc-number(type='tel', autocomplete='cc-number', placeholder='•••• •••• •••• ••••', required='')
.form-group
label.control-label(for='cc-exp') Card expiry formatting
input#cc-exp.input-lg.form-control.cc-exp(type='tel', autocomplete='cc-exp', placeholder='•• / ••', required='')
.form-group
label.control-label(for='cc-cvc') Card CVC formatting
input#cc-cvc.input-lg.form-control.cc-cvc(type='tel', autocomplete='off', placeholder='•••', required='')
button.btn.btn-lg.btn-primary(type='submit' class='submit') Submit
h2.validation

our request is in the variable req not request
this var stripeToken = request.body.stripeToken; should be var stripeToken = req.body.stripeToken;

How to add two inputs from the same forms in the same collection field in Meteor?

Im working on the tutorial meteor has for my first app. So i wanted to extend it a bit more and have two text boxes, one for comments and one for rating lets say.
The problem is that i cant get correctly the values from both forms (actually cant get the rating value at all) in order to save them in my database and furthermore the enter-submit feature stopped working.
My .js code for body events is:
Template.body.events({
"submit .new-task": function(event) {
// Prevent default browser form submit
event.preventDefault();
// Get value from form element
var text = event.target.text.value;
var rating = event.target.rating.value;
// Insert a task into the collection
Meteor.call("addTask", text, rating);
// Clear form
event.target.text.value = "";
}
});
For add task:
AddTask: function(text, rating) {
//.....
Tasks.insert({
text: text,
createdAt: new Date(),
owner: Meteor.userId(),
username: Meteor.user().username,
rating: rating
});
}
And my HTML:
<form class="new-task">
<h2>What is happening?</h2>
<input type="text" name="text" placeholder="Share your experience!" />
<h2>Rating:</h2>
<input type="text" name="rating" placeholder="insert your rating!" />
</form>
<template name="task">
<li class="{{#if checked}}checked{{/if}}">
{{#if isOwner}}
<button class="delete">×</button>
{{/if}}
<span class="text"><strong>{{username}}</strong> - {{text}}- {{rating}}</span>
</li>
</template>

Your Meteor method addTask is not defined. Call Meteor.call("AddTask", text, rating); instead, or rename your method to addTask.
For example:
if (Meteor.isClient) {
Template.hello.events({
'click button': function () {
Meteor.call("addTask", "1", 2, function(error){
if (error) alert(error.reason);
});
}
});
}
if (Meteor.isServer) {
Meteor.methods({
addTask: function (text, rating) {
check(text, String);
check(rating, Number);
console.log(text);
console.log(rating);
}
});
}

How to create inputs that you can keep adding to a collection in meteor

I am trying to figure out how to create a form that has a input field, as well as a "+" button to add another input field. I than want to take those inputs and insert them into a collection. Than output them as a list. Basically I want to give the option to add as many list items as possible. If there is a better way to do this instead of a "+" button to add input fields,I' open to any suggestions.
code so far
HTML
<template name="postsList">
<div class="posts">
{{#each posts}}
{{> postItem}}
{{/each}}
</div>
</template>
<template name="postItem">
<h2>{{service}}</h2>
<ul><li>{{task}}</li></ul>
</template>
<template name="postSubmit">
<form>
<label for="service">Add a Service</label>
<input name="service" type="text" value="" placeholder="Service Type"/>
<label for="task">Add a task (spaces between each kind)</label>
<input name="task" type="text" value="" placeholder="type or task for service"/>
<input type="submit" value="Submit" />
</form>
</template>
JS
Template.postSubmit.events({
'submit form': function(e) {
e.preventDefault();
var post = {
service: $(e.target).find('[name=service]').val(),
task: $(e.target).find('[name=task]').val()
};
Meteor.call('post', post, function(error, id) {
if (error)
return alert(error.reason);
Router.go('postPage', {_id: id});
});
}
});
Posts = new Meteor.Collection('posts');
Posts.allow({
update: ownsDocument,
remove: ownsDocument
});
Posts.deny({
update: function(userId, post, fieldNames) {
// may only edit the following two fields:
return (_.without(fieldNames, 'service', 'task').length > 0);
}
});
Meteor.methods({
post: function(postAttributes) {
var user = Meteor.user(),
postWithSameLink = Posts.findOne({url: postAttributes.url});
// ensure the user is logged in
if (!user)
throw new Meteor.Error(401, "You need to login to post new stories");
// ensure the post has a service
if (!postAttributes.service)
throw new Meteor.Error(422, 'Please fill in a service');
// ensure the post has a task
if (!postAttributes.task)
throw new Meteor.Error(422, 'Please fill in a task');
// check that there are no previous posts with the same link
if (postAttributes.url && postWithSameLink) {
throw new Meteor.Error(302,
'This link has already been posted',
postWithSameLink._id);
}
// pick out the whitelisted keys
var post = _.extend(_.pick(postAttributes, 'service', 'task'), {
userId: user._id,
author: user.username,
submitted: new Date().getTime()
});
var postId = Posts.insert(post);
return postId;
}
});
Template.postsList.helpers({
posts: function() {
return Posts.find({}, {fields: {service: 1, task: 1}}).map(function(post, index) {
return post;
});
}
});