Accepting Payments With Express And Stripe: A Quick Guide

by Team 58 views
Accepting Payments with Express and Stripe: A Quick Guide

So, you're looking to integrate Stripe payments into your Express application? Awesome! You've come to the right place. In this guide, we'll walk you through the process step-by-step, making it as straightforward and easy to understand as possible. We'll cover everything from setting up your Stripe account to creating your Express server and handling those crucial payment requests. Let's dive in!

Getting Started with Stripe and Express

Before we even touch any code, let's get the groundwork laid. First things first, you'll need a Stripe account. Head over to the Stripe website and sign up. Once you're in, grab your API keys – the publishable key and the secret key. Keep that secret key safe! You'll use it on your server to process payments, and you don't want anyone else getting their hands on it. Store these keys securely; environment variables are your friend here. Avoid hardcoding them directly into your application. Seriously, don't do it!

Next, you'll need Node.js and npm (or yarn) installed on your machine. If you don't have them already, go download them from the official Node.js website. Once you've got Node.js and npm ready, create a new directory for your project and initialize it with npm init -y. This will generate a package.json file, which will keep track of your project's dependencies. Now, let's install the necessary packages. You'll need Express for creating your server and the Stripe library for interacting with the Stripe API. Run the following command in your terminal:

npm install express stripe dotenv cors

Here's a breakdown of what each package does:

  • express: This is a fast, unopinionated, minimalist web framework for Node.js. It simplifies the process of building web applications and APIs.
  • stripe: This is the official Stripe library for Node.js. It provides convenient methods for interacting with the Stripe API.
  • dotenv: This is a zero-dependency module that loads environment variables from a .env file into process.env. This is essential for keeping your API keys and other sensitive information out of your code.
  • cors: Stands for Cross-Origin Resource Sharing. It's a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options. This is crucial for allowing your frontend to communicate with your backend server.

With the tools installed and your Stripe API keys ready, you're all set to start building your Express server!

Building Your Express Server for Stripe Payments

Now for the fun part – coding! Let's create a basic Express server that can handle Stripe payments. Create a file named server.js (or whatever you prefer) in your project directory and open it in your favorite code editor. First, you'll need to import the necessary modules and configure your server.

Start by requiring the installed modules:

const express = require('express');
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
const dotenv = require('dotenv');
const cors = require('cors');

dotenv.config(); // Load environment variables from .env file

const app = express();
const port = process.env.PORT || 3000;

app.use(express.json()); // Parse JSON request bodies
app.use(cors()); // Enable CORS for all routes

Here's what this code does:

  • It imports the express, stripe, dotenv, and cors modules.
  • It initializes the Stripe library with your secret key from the environment variables.
  • It creates an Express application instance.
  • It defines the port your server will listen on.
  • It uses the express.json() middleware to parse JSON request bodies. This is crucial for receiving payment information from your client-side application.
  • It enables CORS using the cors() middleware. This allows your frontend (running on a different domain or port) to make requests to your backend.

Next, let's create a route that will handle payment requests. This route will receive the payment information from your client-side application, create a charge using the Stripe API, and return a response indicating whether the payment was successful.

app.post('/create-payment-intent', async (req, res) => {
  try {
    const { amount, currency } = req.body;

    // Create a PaymentIntent with the order amount and currency
    const paymentIntent = await stripe.paymentIntents.create({
      amount: amount,
      currency: currency,
      automatic_payment_methods: {
        enabled: true,
      },
    });

    res.send({
      clientSecret: paymentIntent.client_secret,
    });
  } catch (error) {
    return res.status(400).send({ error: { message: error.message } });
  }
});

Payment Intents with Stripe: When dealing with online payments, security is paramount. Stripe's Payment Intents API provides a secure and reliable way to handle transactions. A Payment Intent is an object that represents your intent to collect payment from a customer. It tracks the lifecycle of the payment process, from initiation to completion, ensuring that all necessary steps are taken to authenticate the customer and authorize the payment.

Creating a Payment Intent: To create a Payment Intent, you'll typically send a request to your server with details about the transaction, such as the amount and currency. Your server then uses the Stripe API to create a Payment Intent object. Stripe returns a client secret, which you'll pass to your client-side code. This client secret is used to securely confirm the payment with Stripe. By using Payment Intents, you can ensure that your payment processing is secure, compliant, and optimized for conversion. It handles complex scenarios like 3D Secure authentication and card network requirements, reducing the risk of fraud and increasing the likelihood of successful payments.

Finally, let's start the server:

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

This code starts the Express server and listens for incoming requests on the specified port. Now, save your server.js file and run the server using the following command in your terminal:

node server.js

You should see a message in your console indicating that the server is running. You now have a basic Express server that can handle Stripe payments!

Handling Payments on the Client-Side

Now that you have your Express server set up, you'll need to create a client-side application that can collect payment information from the user and send it to your server. You can use any frontend framework or library you prefer, such as React, Vue.js, or Angular. For simplicity, let's use plain HTML and JavaScript.

Create an index.html file in your project directory and add the following code:

<!DOCTYPE html>
<html>
<head>
  <title>Stripe Payment</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://js.stripe.com/v3/"></script>
</head>
<body>
  <form id="payment-form">
    <div id="payment-element"></div>
    <button id="submit">Pay</button>
    <div id="payment-message" class="hidden"></div>
  </form>
  <script src="script.js"></script>
</body>
</html>

This HTML file includes the Stripe.js library, a payment form, and a JavaScript file (script.js) that will handle the payment processing. Now, let's create the script.js file and add the following code:

const stripe = Stripe('YOUR_PUBLISHABLE_KEY');

const appearance = {
  theme: 'stripe',
};
const elements = stripe.elements({ appearance });

const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');

const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const { error } = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: "https://localhost:3000/success.html",
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer.
    const messageContainer = document.querySelector('#payment-message');
    messageContainer.classList.remove('hidden');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

Stripe.js and Payment Element: Stripe.js is the foundational JavaScript library that enables you to securely collect payment information from your customers. It provides tools to create payment forms, tokenize sensitive data, and handle various payment methods. The Payment Element is a pre-built UI component within Stripe.js that simplifies the process of collecting payment details. It dynamically adapts to different payment methods and handles the complexities of securely capturing card numbers, expiry dates, and other sensitive information. By using the Payment Element, you can significantly reduce the amount of code you need to write and ensure that you're following best practices for security and compliance.

Important Considerations: Always handle sensitive payment information with care. Use HTTPS to encrypt data in transit, and never store raw credit card details on your servers. Regularly update your Stripe.js library to benefit from the latest security enhancements and features. Additionally, be mindful of PCI DSS compliance requirements if you're handling cardholder data directly.

Testing: To test your Stripe integration, use Stripe's test mode. This allows you to simulate successful and failed payments without actually charging any real money. You can find test card numbers and other testing resources in the Stripe documentation.

This JavaScript code does the following:

  • It initializes the Stripe.js library with your publishable key.
  • It creates a Stripe Element for the payment form.
  • It handles the form submission and creates a payment method using the Stripe API.
  • It redirects the user to the Stripe website to complete the payment.

Make sure to replace YOUR_PUBLISHABLE_KEY with your actual Stripe publishable key. Also, replace `