Menu
I am trying to implement Stripe with AngularJS. In a html a introduced their code snippet for checkout:
<form>
<script src="https://checkout.stripe.com/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.com#/
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.
563
Stripe offers a "custom integration" of Stripe Checkout. This allows you to launch checkout from javascript and get the token back in checkout.
183
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.com/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 complete the checkout processing
};
$scope.onStripe = function(apiKey, userEmail) {
var handler = StripeCheckout.configure({
key: apiKey,
image: 'https://stripe.com/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!
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
