Skip to content

Commit 57e3597

Browse files
simalexansimalexan
authored
Merge pull request #26 from claudiajs/feat/stripe-checkout-payment-claudia
Add a serverless Stripe Checkout payment service example with Claudia.js on AWS Lambda
2 parents 24b1bf4 + 2c8268a commit 57e3597

File tree

4 files changed

+138
-0
lines changed

4 files changed

+138
-0
lines changed

‎stripe-checkout-payment/README.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# Stripe Checkout Payment Serverless API
2+
3+
This simple example shows how to implement a Stripe Checkout to create charge serverless function with AWS Lambda, and charge your users credit cards.
4+
5+
Stripe allows your application to create and execute payments.
6+
7+
## NOTE!
8+
You need to have proper a front-end implementation. A very basic, simple example implementation in vanilla JavaScript (no frameworks) has been provided. In case you're copying the code, the HTML file **MUST** be removed before your serverless function deployment.
9+
10+
## Prerequisites
11+
12+
1. Create a Stripe account
13+
2. Set your AWS credentials locally
14+
3. Replace with your Stripe secret key variable STRIPE_SECRET_KEY value in the `package.json` `create` script.
15+
4. Setup a frontend site to send data in the format expected by the service (stripeToken, amount, currency)
16+
17+
## How to run it
18+
19+
1. Run `npm install` to grab all the dependencies
20+
2. Run `npm run create` to set up a Lambda function with the `STRIPE_SECRET_KEY` environment variable.
21+
2. Run `npm run update` to update your Lambda function if needed.
22+
23+
24+
That's it.
25+
26+
## How does it work
27+
28+
The code is in the [index.js](index.js).
29+
30+
The frontend part is in the [index-REMOVE-BEFORE-UPLOADING-TO-LAMBDA.html](index-REMOVE-BEFORE-UPLOADING-TO-LAMBDA.html). It **MUST** be removed before deploying your serverless payment Stripe function.
31+
32+
1. Type in the amount you want to charge, and click pay.
33+
2. Type in a test card (4111 1111 1111 1111, EXP: 11/19, CCV: 1111, ZIP: 111111) and your email and click pay.
34+
3. The request is sent to Stripe - Stripe verifies, handles the data and gives your application the Stripe Token, valid for a few minutes to initiate a charge.
35+
4. Your frontend application then needs to pack the stripe ID along with the same amount (but in cents) and make a request to your Lambda function on the `/create-payment` endpoint.
36+
5. Your serverless Lambda function received the data and makes a Stripe charge and returns a response or an error to your frontend app.
37+
6. That's it!
38+
39+
40+
## More information
41+
42+
Check out the [Stripe Checkout Docs](https://stripe.com/docs/checkout) for more information on Stripe Checkout.

‎stripe-checkout-payment/index-REMOVE-BEFORE-UPLOADING-TO-LAMBDA.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<html>
2+
<head>
3+
</head>
4+
<body>
5+
<h2>Front-end part for the Stripe Checkout Payment with Claudia.js</h2>
6+
7+
<form id="myForm">
8+
<input title="Amount" type="text" id="amount" />
9+
</form>
10+
<button id="customButton">Purchase</button>
11+
12+
<script>
13+
window.addEventListener('DOMContentLoaded', function() {
14+
var amount,
15+
currency = 'eur';
16+
var handler = StripeCheckout.configure({
17+
key: 'YOUR STRIPE PUBLISHABLE KEY',
18+
image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
19+
locale: 'auto',
20+
token: function (token) {
21+
fetch('https://your-api-endpoint/create-payment', {
22+
method: 'POST',
23+
headers: { 'Accept': 'application/json', 'Content-Type': 'application/json'},
24+
body: JSON.stringify({
25+
stripeToken: token.id,
26+
stripeEmail: token.email,
27+
amount: amount,
28+
currency: currency
29+
})
30+
}).then( (response) => {
31+
console.log(response);
32+
alert('payment processed');
33+
});
34+
}
35+
});
36+
37+
document.getElementById('customButton').addEventListener('click', function(e) {
38+
amount = parseFloat(document.getElementById('amount').value);
39+
amount = amount * 100;
40+
handler.open({
41+
name: 'Stripe + Claudia',
42+
description: 'Test Payment',
43+
zipCode: true,
44+
currency: currency,
45+
amount: amount
46+
});
47+
e.preventDefault();
48+
});
49+
// Close Checkout on page navigation
50+
window.addEventListener('popstate', function() {
51+
handler.close();
52+
});
53+
});
54+
</script>
55+
56+
<script src="https://checkout.stripe.com/checkout.js" type="text/javascript"></script>
57+
58+
59+
</body>
60+
</html>

‎stripe-checkout-payment/index.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
'use strict';
2+
const ApiBuilder = require('claudia-api-builder');
3+
const api = new ApiBuilder();
4+
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
5+
6+
module.exports = api;
7+
8+
api.post('/create-payment', request => {
9+
return stripe.charges.create({
10+
source: request.body.stripeToken,
11+
amount: request.body.amount,
12+
currency: request.body.currency,
13+
description: 'Stripe Charge Description'
14+
}).then(charge => {
15+
return { message: 'Payment Initiated!', charge: charge };
16+
}).catch((err) => {
17+
return { message: 'Payment Initialization Error', error: err };
18+
});
19+
});

‎stripe-checkout-payment/package.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "stripe-checkout-payment",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"create": "claudia create --api-module index --region us-east-1 --set-env STRIPE_SECRET_KEY=Your-Stripe-Secret-Key",
8+
"update": "claudia update"
9+
},
10+
"keywords": [],
11+
"author": "Aleksandar Simovic <alexander.simovic@gmail.com>",
12+
"license": "MIT",
13+
"dependencies": {
14+
"claudia-api-builder": "^2.5.1",
15+
"stripe": "^5.3.0"
16+
}
17+
}

0 commit comments

Comments
 (0)