I am trying to create a charge for Stripe using node.js. So I have followed Firebase method to see if I could get this working:
For clarity, I have left out the polymer elements imports. Assume all is well.
/charge.html:
<dom-module id="stripe-charge">
<template>
<script>
var firebaseStripe = new Firebase('https://blahblah.firebaseio-demo.com/');
firebaseStripe.set({
var stripe = require("stripe")("sk_test_blahblah");
var stripeToken = request.body.stripeToken;
var charge = stripe.charges.create({
amount: 1000, // amount in cents, again
currency: "gbp",
source: stripeToken,
description: "Example charge"
}, function(err, charge) {
if (err && err.type === 'StripeCardError') {
// The card has been declined
}
});
</script>
</template>
<script>
Polymer({
is: 'stripe-charge',
});
</script>
</dom-module>
index:
<section data-route="charge">
<stripe-charge></stripe-charge>
</section>
routing.html:
page('/charge', function () {
app.route = 'charge';
});
page({
hashbang: true
});
form:
<form is="iron-form" id="myForm" action="http://localhost:3000/#!/charge" method="post">
<input type="hidden" is="iron-input" id="amount" name="amount" bind-value="{{total}}">
<input type="hidden" id="stripeToken" name="stripeToken"/>
<input type="hidden" is="iron-input" id="stripeEmail" name="stripeEmail" bind-value="{{emailInput}}"/>
</form>
<paper-button class="fullBtn" id="customButton" on-click="stripe">
<iron-icon icon="icons:credit-card"></iron-icon>
Pay
</paper-button>
When I press the pay button, fill out card details etc, then hit the Strip pay button, I get the green but when it goes to the charge page, I get POST http://localhost:3000/ 404 (Not Found) Somehow it's not going to the page. Any ideas? I feel there will be more errors but for now, I want to get that page. Firebase issue?
Change your url be a true path, not a hash location:
<form is="iron-form" id="myForm" action="http://localhost:3000/charge" method="post">
You need to run a server that accepts the post and then makes a call to Stripe with your private key, you cannot run Stripe as a pure client-only process.
The first step in the browser calls stripe and packages up the supplied credit card information, but then you need to provide that token to your server. Otherwise anyone could submit charges on your behalf, including refunds!
Related
Currently I'm working on a project based on Meteor as back end and React as front end. I really enjoyed simplicity untill I removed insecure package and have to deal with Meteor methods. Right now I need to perform a basic insert operation and I'm just stucked!
I have a form as component (in case eventually I'd like to use this form not only for inserting items but for editing those items as well) and here's my code for this form:
AddItemForm = React.createClass({
propTypes: {
submitAction: React.PropTypes.func.isRequired
},
getDefaultProps() {
return {
submitButtonLabel: "Add Item"
};
},
render() {
return (
<div className="row">
<form onSubmit={this.submitAction} className="col s12">
<div className="row">
<div className="input-field col s6">
<input
id="name"
placeholder="What"
type="text"
/>
</div>
<div className="input-field col s6">
<input
placeholder="Amount"
id="amount"
type="text"
/>
</div>
</div>
<div className="row">
<div className="input-field col s12">
<textarea
placeholder="Description"
id="description"
className="materialize-textarea">
</textarea>
</div>
</div>
<div className="row center">
<button className="btn waves-effect waves-light" type="submit">{this.props.submitButtonLabel}</button>
</div>
</form>
</div>
);
}
});
This chunk of code is used as a form component, I have a prop submitAction which I use in let's say add view:
AddItem = React.createClass({
handleSubmit(event) {
event.preventDefault();
const
name = $('#name').val(),
amount = $('#amount').val(),
description = $('#description').val();
Items.insert(
{
name: name,
range: range,
description: description,
createdAt: new Date(),
ownerId: Meteor.userId()
},
function(error) {
if (error) {
console.log("error");
} else {
FlowRouter.go('items');
};
}
);
},
render() {
return (
<div className="row">
<h1 className="center">Add Item</h1>
<AddItemForm
submitButtonLabel="Add Event"
submitAction={this.handleSubmit}
/>
</div>
);
}
});
As you can see I directly grab values by IDs then perform insert operation which works absolutely correct, I can even get this data displayed.
So now I have to remove insecure package and rebuild the whole operation stack using methods, where I actually stucked.
As I understand all I should do is to grab same data and after that perform Meteor.call, but I don't know how to pass this data correctly into current method call. I tried considering this data right in the method's body which doesn't work (I used the same const set as in AddItem view). Correct me if I'm wrong, but I don't think this method knows something about where I took the data (or may be I don't really get Meteor's method workflow), so by this moment I ended up with this code as my insert method:
Meteor.methods({
addItem() {
Items.insert({
name: name,
amount: amount,
description: description,
createdAt: new Date(),
ownerId: Meteor.userId()
});
}
});
and this is how I changed my handleSubmit function:
handleSubmit(event) {
event.preventDefault();
const
name = $('#name').val(),
amount = $('#amount').val(),
description = $('#description').val();
Meteor.call('addItem');
},
Also I tried declaring method like this:
'addItem': function() {
Items.insert({
// same code
});
}
but it also didn't work for me.
Again, as I understand the problem isn't about data itself, as I wrote before it works just right with insecure package, the problem is how the heck should I get this data on the server first and right after that pass this to the client using methods (also console gives no even warnings and right after I submit the form, the page reloads)?
I've already seen some tutorials and articles in the web and didn't find desicion, hope to get help here.
You can add your data as parameters in your Meteor call function. You can also add a callback function to check on the success of the call.
handleSubmit(event) {
event.preventDefault();
const
name = $('#name').val(),
amount = $('#amount').val(),
description = $('#description').val();
Meteor.call('addItem', name, amount, description, function(err, res) {
if (err){
console.log(JSON.stringify(err,null,2))
}else{
console.log(res, "success!")
}
});
},
In your Meteor methods:
Meteor.methods({
addItem(name, amount, description) {
var Added = Items.insert({
name: name,
amount: amount,
description: description,
createdAt: new Date(),
ownerId: Meteor.userId()
});
return Added
}
});
Going through Your First Meteor Application and I'm stuck. I'm in Chapter 9 "Forms" at the section titled "The Event Object, Part 1."
I can't get anything to log to the console.
Here's where I'm at via MeteorPad:
Source code (I've made a comment saying "THIS IS WHERE I'M STUCK" on line 46 of common.js)
You are missing the <form> tag.
This is how the insert event should look.
Template.addPlayerForm.events({
'submit form': function(event,template){
event.preventDefault();
PlayersList.insert({
name:template.$('#newPlayer').val(),
score:8,
})
return false;
}
});
And the HTML.
<template name="addPlayerForm">
<form>
<input type="text" name="playerName" id="newPlayer">
<input type="submit" value="Add Player">
</form>
</template>
Here is the same meteorpad but with the above changes.
I have an action which is showing a form for some user input. The inputs are plain text field. I wonder how can I pre fill the input field.
All the tutorials and blog posts I found are quite old and all of them are taking into account only one field. It is my understanding that I need a custom .ftl with a call to a web script in it.
<field id="myprop">
<control template="/org/alfresco/components/form/controls/mycustomfield.ftl"/>
</field>
The problem in my case is that I will end up doing at least six call to the same web script. Because that's the number of fields I currently have in my form.
Well I guess it could be implemented by using a form filter as well. Maybe not the nicest solution, but it should get the job done. https://wiki.alfresco.com/wiki/Forms_Developer_Guide#Form_Filter
There is only one better way... You don't need to use Share Form Engine. Take a look at "create site" dialog, this form doesn't use share form engine
You need to create custom share component that will return form with filled parameters and initialize this form in your front-end js that is executed while clicking on the action.
You can add new component to Share by the following way:
1) Create new descriptor my-form.get.desc.xml in web-extension/site-webscripts/com/pizdez/form
<webscript>
<shortname>my-form</shortname>
<description>Get HTML form</description>
<url>/pizdec/components/form</url>
</webscript>
2) Create new controller my-form.get.js in the same folder where you can call alfresco to get all needed information
var connector = remote.connect("alfresco");
var response = connector.get("/my/alfresco/webscript");
if (response.status == 200)
{
// Create javascript objects from the repo response
var obj = eval('(' + response + ')');
if (obj)
{
model.param1 = obj.param1;
}
}
3) Create ftl template my-form.get.html.ftl in the same folder
<#markup id="css" >
<#-- CSS Dependencies -->
<#link href="${url.context}/res/components/form/my.css" />
</#>
<#markup id="js">
<#script src="${url.context}/res/components/form/my.js" />
</#>
<#markup id="widgets">
<#createWidgets/>
</#>
<#markup id="html">
<#uniqueIdDiv>
<#assign el=args.htmlid?html>
<div id="${el}-dialog">
<div class="hd">TITLE</div>
<div class="bd">
<form id="${el}-form" method="POST" action="">
<div class="yui-gd">
<div class="yui-u first"><label for="${el}-title">Title:</label></div>
<div class="yui-u"><input id="${el}-title" type="text" name="title" tabindex="0" maxlength="255"/> *
</div>
</div>
<div class="yui-gd">
<div class="yui-u first"><label for="${el}-param1">Param1:</label></div>
<div class="yui-u"><input id="${el}-param1" type="text" name="title" tabindex="0" maxlength="255" value="${param1}"/> *
</div>
</div>
<div class="bdft">
<input type="submit" id="${el}-ok-button" value="${msg("button.ok")}" tabindex="0"/>
<input type="button" id="${el}-cancel-button" value="${msg("button.cancel")}" tabindex="0"/>
</div>
</form>
</div>
</div>
</#>
</#>
4) After that you need to get this component from ui js
var myForm = new Alfresco.module.SimpleDialog(this.id + "-dialog");
myForm.setOptions(
{
width: "50em",
templateUrl: Alfresco.constants.URL_SERVICECONTEXT + "/pizdec/components/form",
actionUrl: null,
destroyOnHide: true,
doBeforeDialogShow:
{
fn: doBeforeDialogShow,
scope: this
},
onSuccess:
{
fn: function (response)
{
},
scope: this
},
onFailure:
{
fn: function(response)
{
},
scope: this
}
}).show();
I just wanted to show you direction to research
I am a newbie in AdobeCQ5. I am facing some trouble in posting form. Here is my Structure -
/apps/<myproject>/components/mytestcomponent
mytestcomopnent.jsp has following code -
<form id="myForm" action="<%=resource.getPath()+".html" %>">
<input type="text" id="t1" class="input-small" placeholder="Temprature F" />
<input type="text" id="t2" class="input-small" placeholder="Temprature C" readonly/>
<button type="button" id="cbtn" class="btn">Convert</button>
</form>
<script>
$(document).ready(function() {
$('#cbtn').click(function () {
var URL = $("#myForm").attr("action");
alert(URL);
var t1=$("#t1").val();
var t2=$("#t2").val();
$.ajax({
url: URL,
data:{'t1':t1},
type:"post",
success: function(data, status) {
$("#t2").val(data);
},
error: function( xhr, txtStat, errThrown ) {
alert("ajax error! " + txtStat + ":::" + errThrown);
}
});
});
});
</script>
This is giving my response code 200 (Success) but the output is not desired. My mycomponent.POST.jsp has following code -
<%
// TODO add you code here
String t1=request.getParameter("t1");
%>
<%= t1 %>
It gives the following output
Content modified /content/imobile/en/jcr:content/social.html
Status
200
Message
OK
Location /content/imobile/en/_jcr_content/social.html
Parent Location /content/imobile/en/_jcr_content
Path
/content/imobile/en/jcr:content/social.html
Referer http://example.comt:4502/content/imobile/en.html
ChangeLog
<pre></pre>
Go Back
Modified Resource
Parent of Modified Resource
Please help to resolve this.
The JSP file handling the POST method for your component should be named POST.jsp rather than mycomponent.POST.jsp.
Please notice that if you intercept all POST requests to your component, you won't be able to edit it on the author instance using a dialog (as the dialog simply POSTs data to the component URL). To avoid it, consider using a custom selector (like form). Your form should look be declared like this:
<form id="myForm" action="${resource.path}.form.html">
and the script handling POST request should be called form.POST.jsp.
The second important thing is that you should use Java classes rather than JSP files to store business logic. In this case it means that the form.POST.jsp script can be replaced with a Sling servlet declared as follows:
#SlingServlet(
resourceTypes="myproject/components/mytestcomponent",
methods="POST",
selectors="form")
I'm working on a intern document-sharing project for a small company. I want to do this with meteor. I'm very common with html/javascript but not with databases.
My problem is to handle the users. Because of my researches here I'm not sure if it's already possible to create users on client side. The official documentation shows some methodes how to deal with users but no examples.
I tried to create a list on server side like this:
Users = new Meteor.Collection("users");
Then I want to insert a user on startup like this:
//on Client side
if (Meteor.isClient) {
var username = "My Name";
Meteor.call("create_user", username, function(error, user_id) {
Session.set("user_id", user_id);
});
}
//on Server side
if(Meteor.is_server) {
Meteor.methods({
create_user: function(username) {
console.log("CREATING USER");
var USER_id = Users.insert({name: username});
return user_id;
},
});
}
But reading the username in the html template doesn't work...
Are there any good examples with a register and login?
Cheers
Adding the accounts functionality is very easy in Meteor.. may it be simple email, password, or by using facebook connect/twitter etc..
do the following to get a simple meteor app with user accounts set up..
meteor create simpleapp
cd simpleapp
add the accounts-ui and accounts-password packages
meteor add accounts-ui
meteor add accounts-password
you simply add other accounts related packages for implementing facebook/twitter/github/google login etc
to list other available meteor packages use this command
meteor list
now edit your simpleapp.html file to this to add login buttons etc..
<head>
<title>simpleapp</title>
</head>
<body>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click" />
{{loginButtons}}
</template>
I simply added {{loginButtons}} to the default html file to add the default login buttons..
now run the meteor app and go to localhost:3000
meteor
you implemented the login functionality without doing much work. 4-5 lines of code, it even takes care of things like forgot password, registering new user etc
next thing is you need to display a particular html when the user is signed in.
you do this using the {{currentUser}} global
you implement it accordingly
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click" />
{{loginButtons}}
{{#if currentUser}}
{{> loggedInTemplate}}
{{else}}
{{> loggedOutTemplate}}
{{/if}}
</template>
<template name="loggedInTemplate">
<!-- user is logged in -->
</template>
<template name="loggedOutTemplate">
<!-- user is logged out -->
</template>
You don't need to create a user system manually. Just use the accounts package:
The Meteor Accounts system builds on top of the userId support in publish and methods. The core packages add the concept of user documents stored in the database, and additional packages add secure password authentication, integration with third party login services, and a pre-built user interface.
Your code should work, though. But you're not exposing the username property to the client, so maybe that's why you can't see it in your template.
Ok thank you, that's easy. But so I can not modify the loggedInTemplate or the loggedOutTemplate.
I show you what I've got:
//the html
<head>
<title>myApp | documents</title>
</head>
<body>
<div id="headerBox">
{{> header}}
</div>
<div id="sideBox">
{{> side}}
</div>
<div id="contentsBox">
{{> contents}}
</div>
</body>
<template name="header">
<h1>Company name</h1>
</template>
<template name="contents">
{{#if currentUser}}
<p>Welcome to documents</p>
{{else}}
<h3>Hello! Please log in!</h3>
<p><input type="text" id="username" placeholder="Username"><input type="text" id="password" placeholder="Password"><input type="button" value="log me in!"></p>
{{/if}}
</template>
<template name="side">
<p>Hello {{ activeUser }}</p>
<p><input type="button" value="Create New Document" onclick="createPage()"></p>
<h3>Documents:</h3>
</template>
and
//client.js
Pages = new Meteor.Collection("pages");
Meteor.startup(function() {
Session.set("activeUser", "please log in!");
});
Template.side.activeUser = function() {
return Session.get("activeUser");
};
and
//server.js
Meteor.startup(function() {
Accounts.createUser({username: "MyName", email: "me#example.com", password: "123456"});
});
and I'm searching for a manual way to log this user created on startup in. And of course later to allow this user to create new users...
The problem is adding
// Returns an event_map key for attaching "ok/cancel" events to
// a text input (given by selector)
var okcancel_events = function (selector) {
return 'keyup '+selector+', keydown '+selector+', focusout '+selector;
};
// Creates an event handler for interpreting "escape", "return", and "blur"
// on a text field and calling "ok" or "cancel" callbacks.
var make_okcancel_handler = function (options) {
var ok = options.ok || function () {};
var cancel = options.cancel || function () {};
return function (evt) {
if (evt.type === "keydown" && evt.which === 27) {
// escape = cancel
cancel.call(this, evt);
} else if (evt.type === "keyup" && evt.which === 13) {
// blur/return/enter = ok/submit if non-empty
var value = String(evt.target.value || "");
if (value)
ok.call(this, value, evt);
else
cancel.call(this, evt);
}
};
};
Template.contents.events = {};
Template.contents.events[okcancel_events('#password')] = make_okcancel_handler({
ok: function (text, event){
var usernameEntry = document.getElementById('username');
var passwordEntry = document.getElementById('password');
Meteor.loginWithPassword({usernameEntry, passwordEntry});
event.target.value = "";
}
});
to the client doesn't work...