I have recently been running into some issues using stripe within Meteor and this community has always been a great help to me so here goes!
I am trying to create a simple website allowing users to create posts paying for a pre-determined fee. $20 per month, $30 for 2 months etc. I have the entire skeleton of the site built i now just need to enable users to pay. While searching around for any information on my scenario i cam across a tutorial.
https://themeteorchef.com/recipes/payments-with-stripe-checkout/
This was a very helpful and informative tutorial. However i ran into some issues along the way. My paths are almost all the exact same however in a few instances i had to change them due to where my pre-existing code was. I cannot find out why this code wont work and i'm hoping a second set of eyes just catches something i missed.
My settings.json file located in directory directly alongside .meteor file:
{
"public": {
"stripe": "pk_test_jdsoajdanotrealhasodahsd"
},
"private": {
"stripe": "sk_test_hfsd83totallyreal39u03fda",
"CLOUDINARY_API_SECRET": "9847934f937ForSureReal49849f"
},
"CLOUDINARY_API_KEY": "fdnk84894wy7f7sdffake8494g",
"CLOUDINARY_CLOUD_NAME": "CompanyName"
}
My Meteor autofom HTML LOCATED IN:/CLIENT/PAGES/POSTS
<template name="insertPostForm">
{{#autoForm collection="Posts" id="insertPostForm" type="insert"}}
<div class="form-group">
<h4>Length of Post <small></small></h4>
{{> afFormGroup name="expiryDate" options=expiryOptions}}
<h3>Information <small></small></h3><hr>
<div class="col-sm-12 col-md-6">
{{> afQuickField name='address'}}
</div>
<div class="col-sm-12 col-md-6">
{{> afQuickField name='status' options='allowed'}}
</div>
<h3>Details <small></small></h3><hr>
<div class="col-sm-12 col-md-6">
{{> afQuickField name='squareFoot'}}
</div>
<div class="col-sm-12 col-md-6">
{{> afQuickField name='yearBought'}}
</div>
{{#unless processing}}
<p class="alert alert-info">Please select your prefered months of posting time</p>
<ul class="list-group price-list">
<li class="list-group-item clearfix">
<p class="pull-left"><strong>$32</strong> — 1 Month</p>
<a href="#" data-service="1Month" type="submit" class="btn btn-primary">Buy Now</a>
</li>
<li class="list-group-item clearfix">
<p class="pull-left"><strong>$50</strong> — 2 Months</p>
<a href="#" data-service="2Months" type="submit" class="btn btn-primary">Buy Now</a>
</li>
<li class="list-group-item clearfix">
<p class="pull-left"><strong>$75</strong> — 3 Months</p>
<a href="#" data-service="3Months" type="submit" class="btn btn-primary">Buy Now</a>
</li>
</ul>
{{else}}
<p class="alert alert-warning"><i class="fa fa-refresh fa-spin"></i> Processing payment...</p>
{{/unless}}
<button type="submit" class="btn btn-primary">Add Listing</button>
</div>
{{/autoForm}}
</template>
My service.js file LOCATED IN: CLIENT/PUBLIC/SERVICES.JS
Template.services.onCreated( () => {
let template = Template.instance();
template.selectedService = new ReactiveVar( false );
template.processing = new ReactiveVar( false );
template.checkout = StripeCheckout.configure({
key: Meteor.settings.public.stripe,
locale: 'auto',
token( token ) {
let service = template.selectedService.get(),
charge = {
amount: token.amount || service.amount,
currency: token.currency || 'usd',
source: token.id,
description: token.description || service.description,
receipt_email: token.email
};
Meteor.call( 'processPayment', charge, ( error, response ) => {
if ( error ) {
template.processing.set( false );
Bert.alert( error.reason, 'danger' );
} else {
Bert.alert( 'Success!' );
}
});
},
closed() {
template.processing.set( false );
}
});
});
Template.services.helpers({
processing() {
return Template.instance().processing.get();
},
paymentSucceeded() {
return Template.instance().paymentSucceeded.get();
}
});
Template.services.events({
'click [data-service]' ( event, template ) {
const pricing = {
'1Month': {
amount: 3200,
description: "1 Month"
},
'2Monthes': {
amount: 5000,
description: "2 Monthes"
},
'3Monthes': {
amount: 7500,
description: "3 Monthes"
}
};
let service = pricing[ event.target.dataset.service ];
template.selectedService.set( service );
template.processing.set( true );
template.checkout.open({
name: 'Posting Service',
description: service.description,
amount: service.amount,
bitcoin: true
});
}
});
My Stripe.JS file LOCATED IN: /SERVER/STRIPE.JS
let Stripe = StripeAPI(Meteor.settings.private.stripe);
Meteor.methods({
processPayment( charge ) {
check( charge, {
amount: Number,
currency: String,
source: String,
description: String,
receipt_email: String
});
let handleCharge = Meteor.wrapAsync( Stripe.charges.create, Stripe.charges ),
payment = handleCharge( charge );
return payment;
}
});
after integrating this code from tutorial into my project whenever i go into command line and type "meteor --settings settings.json"
the first line i get in response is
"ReferenceError : StripeAPI is not defined" "at server/Stripe.js : 1 : 14"
if i change the first line of my Stripe.js code to (Meteor.private.Stripe) my error changes to
"TypeError : Cannot read property 'stripe' of undefined"
""
I have just been going crazy over here trying to figure this out and thought i might see if one of you fine individuals would be able to assist me in this matter. If you have read this far you have already done me a service, and for that i thank you!
Meteor.wrapAsyncon Stripe functions because stripe functions return a promise. - corvid