As a major player in the online payments market, Stripe offers buyers worldwide a unique, hassle-free paying experience. Support for more than 150 currencies, various payment methods and models, and modern security levels speak a clear language. Sellers benefit from a powerful user interface – the dashboard –, web developers from versatile APIs and interfaces.

In this tutorial, we are going to add a StripeCheckoutWidget to the Scrivito Example App for letting visitors pay for goods or services using their credit or debit card. For having Stripe actually charge the customer, we’ll pass the card and product data to a Lambda function in which we will be talking with Stripe to have the amount in question transferred to our account.

Let us first spend a short moment on the general procedure when handling transactions online. All processes involving sensitive personal data, be it credit card numbers or email addresses, require a backend to hide this data from the client side and hence make it inaccessible to villains. Of course, in the serverless age, any secure computing service able to make outbound requests will do as a backend.

As we are focusing on the general working principle of online payment handling with Stripe, our StripeCheckoutWidget is limited to one-time payments and doesn’t include cart functionality, invoice generation and the like. However, it should be best suited as a starting point and will cover small e-commerce use cases. There are numerous React-based shopping carts out there, and using Stripe’s dashboard for concluding purchases in such a setting is not too bad an idea.

If you haven’t already set up your local Example App, just follow our Getting Started with Scrivito guide. For the backend part, an AWS Lambda function will be used. To spare you the effort of creating an AWS account and defining an API gateway for the Lambda, we’ll use Netlify Functions in combination with Netlify Lambda CLI, a great way to develop and test your remote functionality locally.

Of course, you will need an account at Stripe – it’s free. They’ll provide you with a pair of API keys (public and private) for testing purposes. By the way, in test mode, Stripe lets you use their APIs over HTTP so you don’t have to set up SSL for localhost.

Before you can set up Netlify Lambda for your local Example App, make sure that you’ve claimed your Scrivito site on Netlify. This can be done by clicking the corresponding button on the “Deployment” tab in your Scrivito dashboard.

Then, in your Example App’s project directory, create the source directory for the Lambda function and install the Netlify Lambda command line interface:

To make Netlify aware of the Lambda, add the functions key to the “netlify.toml” file so that it reads:

Next, in your project’s “package.json” file, add commands for building the Lambda and starting the local server, and adapt the overall build command so that it covers the Lambda:

The local Lambda server will listen on port 9000; accessing it needs to be permitted in the CSP. So, in your project’s “webpack.config.js” file, add a corresponding directive in the function that builds the CSP header:

Finally, add your Stripe keys as well as the Lambda’s endpoint to your environment:

Keep in mind that, before deploying, your stripe keys as well as the Lambda endpoint need to be made known in your site settings on Netlify.

As we are offering goods or services, the first thing to do is to specify what we are selling. We will let the editor who adds this widget to a page provide the product data via some attributes in the widget’s class definition.

As you can see, our product instances will have a name, a price, and a description. These are the facts we are going to hand over to Stripe in the checkout process. Additionally, for allowing editors to refine the product display, a widgetlist attribute, details, is made available so adding images, feature descriptions, etc., should be easy enough.

A widget’s editing configuration specifies what editors can change using the properties view of such a widget’s instance. Additionally, the configuration lets you initialize the attributes of new widgets. In our case, we’d like to make the product price and description editable, and also add some placeholder content to it:

Anticipating what a new StripeCheckoutWidget would look like when rendered by its component (which we don’t have yet), we would want it to include the preset content, arranged above and below the image widget in the middle:

Now, let’s make it happen and render our widget! We will be using a couple of packages, first and foremost react-stripe-checkout, the component that renders an overlay for collecting the payment details. In your project directory, execute:

We will use axios later to post the visitor’s payment details to our Lambda backend. In case you haven’t heard of react-toastify yet, it’s a versatile tool for displaying splash messages in your app. Here, it serves to notify us about the result of the checkout process.

Essentially, our StripeCheckoutWidget component produces what you’ve seen above: it presents the details of the product we are offering. The StripeCheckout component we are using in this widget represents the interface enabling the visitor to purchase the product.

After rendering the widget’s attributes, the StripeCheckoutWidgetComponent renders the StripeCheckout component, passing to it the relevant data as props: stripeKey, amount, currency, and token. stripeKey is our publishable test key, amount the total to charge (Stripe wants it in cents), the currency to use, and a callback for the token. StripeCheckout executes this callback and passes the token to it after having validated the payment details. We can then use this token in our Lambda backend to trigger the actual payment. Our above callback, handleToken, simply displays a notification; we’ll elaborate on that in a minute.

See the react-stripe-checkout documentation for other props available for configuring the checkout procedure.

Above, we’ve added a button element as a child to the StripeCheckout component so that we can style the trigger to our liking. As a default, the component renders its own “Pay With Card” button.

After a customer has entered their payment details and finally clicked the “Pay” button, the handleToken callback is executed. StripeCheckout passes two objects to it, token and addresses, we can now use as desired and forward to our backend. We are not using addresses here because the token object already includes the billing address. Instead, we are passing in the widget’s product price and name; the latter enables us to identify the product in our Stripe dashboard.

We are posting the data to our local Lambda backend, which can then request Stripe to execute the transaction. In the above callback, we are displaying a success or failure notification, but you should, of course, handle these statuses in a more explicit and customer-friendly way.

Our Node.js-based Lambda function requires dotenv (already included in the Example App), the uuid package and, of course, stripe:

Here’s the Lambda; we named the file “purchase.js”:

Our Lambda function first creates a Stripe customer object using parts of the incoming token. Then, it attempts to create a charge for this customer, based, again, on the token but also on the product. For details about other items that can be provided with charges, see the documentation.

The idempotency key that needs to be passed in ensures that the charge is not created several times in case you need to repeat the request due to a network error. See the documentation on error handling for further information.

Congratulations! You can now start accepting payments via Stripe on your website!

Note that we’ve used netlify-lambda here to serve our Lambda. Netlify recommends using Netlify Dev instead, however, at the time of writing, this development server is still beta.

You may want to make sure in your Lambda function that incoming requests are POST requests (event.httpMethod === "POST") and originate from your domain.

As sometimes, there’s potential for improvements. For example, you could make the currency (and other pieces of payment-related data) a property of the widget so that editors can specify it, and include it in the product data when calling the Lambda function.

After deployment and when running your site productively, don’t forget to use your real-life Stripe keys!