I am trying to implement Stripe with AngularJS. In a html a introduced their code snippet for checkout:
<form>
<script src=".js" class="stripe-button"
data-key="<pk_key>"
data-amount="100"
data-name="name"
data-description="description"
data-image="img.png"
data-locale="auto">
</script>
</form>
Now, after submiting the checkout form, I expect a token. The checkout form changes my url to something like this:
<path>/?stripeToken=tok_17VlKKLZ8lYIAVgOX7viLFlm&stripeTokenType=card&stripeEmail=mihai.t.pricop%40gmail#/
I need this angular to trigger a scope function with this token when the form is submited. How can I achieve something like this ?
$scope.checkout = function(token) {
<do stuff with the token>
}
Thank you.
I am trying to implement Stripe with AngularJS. In a html a introduced their code snippet for checkout:
<form>
<script src="https://checkout.stripe./checkout.js" class="stripe-button"
data-key="<pk_key>"
data-amount="100"
data-name="name"
data-description="description"
data-image="img.png"
data-locale="auto">
</script>
</form>
Now, after submiting the checkout form, I expect a token. The checkout form changes my url to something like this:
<path>/?stripeToken=tok_17VlKKLZ8lYIAVgOX7viLFlm&stripeTokenType=card&stripeEmail=mihai.t.pricop%40gmail.#/
I need this angular to trigger a scope function with this token when the form is submited. How can I achieve something like this ?
$scope.checkout = function(token) {
<do stuff with the token>
}
Thank you.
Share Improve this question asked Jan 21, 2016 at 16:37 ashcrokashcrok 2443 silver badges16 bronze badges 1- I don't know enough Angular to answer your question, but wouldn't it be simpler to use an existing wrapper such as this one: github./tobyn/angular-stripe-checkout? – Ywain Commented Jan 21, 2016 at 17:27
2 Answers
Reset to default 7Stripe offers a "custom integration" of Stripe Checkout. This allows you to launch checkout from javascript and get the token back in checkout.
I just wrote a blog article about this with all the necessary details.
Here's a simple way to use angularJS to integrate Stripe Checkout into your web page.
First, in your HTML add the Stripe script reference inside the head tag:
<head>
[angularJS includes here]
<script type="text/javascript" src="https://checkout.stripe./checkout.js"></script>
</head>
Next, in the body declare a link or button with an ng-click handler to invoke a method in your controller:
<a href="" ng-click="onStripe('<%= StripeConstants.PUBLIC_API_KEY %>', '<%= request.getAttribute("email") %>')">Stripe Checkout via angularjs</a>
*Note: My page is a JSP and since my user is already signed in I know the email so I push it in to the request object and pull it into my JSP page. Likewise, I load my Stripe public key (encrypted) from a properties file located on my server. Again, I pull that into my JSP and then pass both the user's email and the Stripe public key in to the click handler in my controller.
That's it for the HTML page. Now on to the controller.
You'll need two functions - the click handler to invoke Stripe Checkout and a function to handle the Stripe callback with the token representing the payment details.
// stripe will call this once it has successfully created a token for the payment details
$scope.onToken = function(token) {
console.log(token);
// now call a service to push the necessary token info to the server to plete the checkout processing
};
$scope.onStripe = function(apiKey, userEmail) {
var handler = StripeCheckout.configure({
key: apiKey,
image: 'https://stripe./img/documentation/checkout/marketplace.png',
locale: 'auto',
token: $scope.onToken
});
handler.open({
panelLabel : 'Subscribe',
amount : 4995,
name : 'My Product Name here',
description : '$49.95 Monthly Subscription',
email : userEmail,
zipCode : true,
allowRememberMe : false
});
};
That's it!