My site: https://14-day-filmmaker.netlify.app/
I am trying to integrate a custom payment flow in Stripe so I can customize the checkout form. I can’t get my head around how to transform the below Stripe express server example into a Lamda function call.
I have the Netlify Dev server running, and access my environmental variables, and can run a simple Hello World world function, etc. Just suffering from newbness syndrome.
Any guidance would be greatly appreciated!
Stripe’s server. js example:
const express = require("express");
const app = express();
// This is your real test secret API key.
const stripe = require("stripe")("sk_test_51J085aDDSnMNt7v1ZO3n5fxobP6hhEhf1uC2SDmkHGIX8fCnxFiSMrxITKu06ypYUHYAMHVZ1lhc5Fqm7UoVa6dx00XvV5PZzG");
app.use(express.static("."));
app.use(express.json());
const calculateOrderAmount = items => {
// Replace this constant with a calculation of the order's amount
// Calculate the order total on the server to prevent
// people from directly manipulating the amount on the client
return 1400;
};
app.post("/create-payment-intent", async (req, res) => {
const { items } = req.body;
// Create a PaymentIntent with the order amount and currency
const paymentIntent = await stripe.paymentIntents.create({
amount: calculateOrderAmount(items),
currency: "usd"
});
res.send({
clientSecret: paymentIntent.client_secret
});
});
app.listen(4242, () => console.log('Node server listening on port 4242!'));
Hi there, @JohnnyK
Thanks for your patience here-- it looks like your thread has been a bit quiet since you last wrote in. Are you still experiencing this issue? If so, please let us know. If not, please share what solution you found
Hi @JohnnyK,
What have you tried till now except Hello world? Did you try to run the above code in Netlify Functions and get an error? Your current description of the question is very vague and I’m failing to understand what you’re really asking.
1 Like
Thank you for your response. I’ve had my head down working. I posted in StackOverflow and a fellow got me headed in the right direction.
I’m running this from Netlify dev. I haven’t monkeyed with getting it up and running yet on Netlify. This is just a bare-bones implementation. Now I’m adding all the error handling etc. But I’ll put my noobness on full display for fellow noobs.
So I created this Lamda function I called payment-intent.js
exports.handler = async function (event, context, callback) {
console.log("I'm inside the payment-intent function.")
const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
const { amount, currency } = JSON.parse(event.body);
try {
console.log(`Requesting a paymentIntent.`)
const paymentIntent = await stripe.paymentIntents.create({
amount: amount,
currency: currency
})
console.log(`Successfully created the paymentIntent.`)
return {
statusCode: 200, // http status code
body: JSON.stringify({
paymentIntent
}),
}
} catch (err) {
// handle errors
console.log(`PaymentIntent failed. Here's the error: ${err}`)
}
}
And called it from my CheckoutForm:
import React from "react"
import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js"
const CheckoutForm = e => {
const stripe = useStripe()
const elements = useElements()
const handleSubmit = async event => {
event.preventDefault()
// Ultimately grab this from the form
const profile = {
email: "johnny@lovelife.com",
}
// PROCEED WITH CARD PROCESSING
try {
// Get the Payment Intent
console.log(`Retrieving the payment intent.`)
const intent = await fetch("/.netlify/functions/payment-intent", {
method: "POST",
body: JSON.stringify({
amount: 4800,
currency: "usd",
}),
})
const { paymentIntent } = await intent.json()
console.log(`Successfully retrieved the payment intent.`)
// Confirm the Card Payment
console.log(`Confirming Card Payment`)
await stripe.confirmCardPayment(paymentIntent.client_secret, {
payment_method: {
card: elements.getElement(CardElement),
billing_details: {
email: profile.email,
},
},
})
console.log(`Card Payment Successful`)
} catch (err) {
console.log(err)
}
}
return (
<form onSubmit={handleSubmit}>
<CardElement />
<button type="submit" disabled={!stripe}>
Pay
</button>
</form>
)
}
export default CheckoutForm
And that did the trick.
Noobie as heck, but my Dad always said: better shame than pain Johnny.
Thank you for checking in Hillary. I just posted my solution in the forum.
Now I’m struggling with getting faunaDB recognized and working in my Lamda functions.
Have an. outstanding weekend!
Sincerely,
John
I got the faunaDB working. I didn’t want you to waste any time in case you were gonna sling me some articles.
Have an outstanding weekend!
John