Forem: justinakingsley

Ecommerce with Stripe: A How to guide

justinakingsley — Wed, 22 Feb 2023 16:47:00 +0000

In today's digital age, it's crucial for businesses to have a seamless and secure payment system in place. Using an ecommerce platform that enables the integration of third-party payment providers like Stripe will simplify the payment process for customers and enhance the overall shopping experience, thereby increasing sales.

Stripe is a widely-used payment gateway that offers a suite of payment APIs to help businesses accept payments online. Using a flexible ecommerce platform like Medusa to set up your ecommerce site could be a game changer.

Medusa provides the building blocks to create an ecommerce system with the necessary components, including processing payments and handling customer data with other advanced features that come with it.

In this tutorial, you will explore the benefits of using Stripe and Medusa, and learn how to set up a complete ecommerce store with Stripe and Medusa.

What is Stripe?

Stripe is one of the biggest payment providers supporting thousands of businesses in the United States and globally. It provides a platform for businesses to process online payments. Stripe offers tools and services for businesses to accept customer payments, including a payment gateway, a payment processor, and a suite of developer-friendly APIs.

Stripe supports a variety of payment methods, including credit cards, debit cards, Apple Pay, Google Pay, Microsoft Pay, Afterpay/Clearpay, Alipay, and ACH payments. Additionally, Stripe has fraud detection tools and can manage subscriptions and recurring payments.

Stripe is particularly popular among SMEs (Small and Medium-Sized Enterprises), developers, and online marketplaces. It is a good choice for ecommerce platforms looking to sell both locally and internationally. It provides tools for managing and analyzing transactions, as well as the ability to integrate with other software and services.

Why Use Stripe?

Easy Integration: Stripe offers easy integration with websites and mobile apps, allowing businesses to quickly and easily start accepting payments online.
Security: Stripe is compliant with industry security standards and regulations, providing customers with a secure and reliable payment experience.
Developer-Friendly API: Stripe is known for its developer-friendly API and robust documentation, making it a popular choice among businesses and developers of all sizes and industries.
Global Coverage: Stripe supports payments in over 135+ currencies and can be used in over 40 countries, allowing businesses to easily expand to new markets and accept payments from customers around the world.

What is Medusa?

Medusa is an open source, Node.ja-based, composable commerce engine. Its APIs can be integrated with frontend tools to create a scalable ecommerce store.

Medusa allows developers to build sophisticated commerce systems seamlessly. It’s great for developers who want full control over their development process. Medusa has three main components: the headless server, the admin panel, and the storefront for speed enhancement.

Medusa is a highly customizable platform that allows for seamless integration with various third-party services. This allows users to utilize the best solutions available in different areas, maximizing efficiency and optimizing their workflow.

It has various features, including multiple payment options, a shopping cart, a multi-currency feature, and third-party payment integration. Medusa commerce engine comes with a manual payment provider by default.

Why Use Medusa?

Advanced Ecommerce Features: Medusa provides some advanced ecommerce features such as multi-currency, automated RMA flows, and sales channels.
Developer-Friendly Features: Medusa has a pre-built open source codebase that developers clone. It has every feature of advanced ecommerce already built into it.
Flexible Backend: Medusa uses Node.js backend; it is built in such a way that developers can easily study, understand, and write new code for what they intend to achieve.
Third-Party Integration: Medusa supports integration with other services through plugins, which add new features and functionality to the platform. Some examples of such services are Segment, Contentful, PayPal, Algolia, and more.

Prerequisites

To follow through this tutorial effectively, ensure you have the following:

Node.js version 14 or later
Stripe Account with API keys ready

How to Set up Medusa Ecommerce with Stripe

For this tutorial, you will use the Medusa commerce engine to build an ecommerce store; this will enable you to utilize all prebuilt features of Medusa for an easy development process. You’ll use the Medusa Server, Medusa Admin, and Medusa Storefront.

Create a Medusa Server Project

To create your new Medusa project, follow the steps below:

Install the Medusa CLI Tool

Medusa CLI gets your computer ready to run the Medusa codebase locally. You can run this command below to install it:

npm install @medusajs/medusa-cli -g

Create a New Medusa Server

Creating a new Medusa project is simple; run the command below:

medusa new my-medusa-store --seed

my-medusa-store is the name of the project folder, so you can edit it as you wish. If you have completed the above step successfully, switch to your new project:

cd my-medusa-store

Next, start your Medusa server with the command below:

medusa develop

Medusa runs by default on port 9000. You can navigate to localhost:9000/store/products/ to see your store products.

How to Install Medusa Stripe Plugin

The Stripe plugin is a package in Medusa that enables Stripe payment on your project. In the root of your Medusa project, run the following command to install the Stripe plugin:

npm install medusa-payment-stripe

Next, in your .env file, add the code snippet below:

STRIPE_API_KEY=<STRIPE-API-KEY>
STRIPE_WEBHOOK_SECRET=<STRIPE-WEBHOOK-SECRET>

In the above code snippet, replace <STRIPE-API-KEY> and <STRIPE-WEBHOOK-SECRET> with keys from your Stripe dashboard.

How to Configure Stripe in Medusa Server

Firstly, in medusa-config.js, add the following at the end of the plugins array:

const plugins = [
  // ...
  {
    resolve: `medusa-payment-stripe`,
    options: {
      api_key: process.env.STRIPE_API_KEY,
      webhook_secret: process.env.STRIPE_WEBHOOK_SECRET,
    },
  },
]

Create Medusa Admin

Medusa Admin is a component of Medusa that allows merchants to handle all administrative functions which include product management, order management, customer management, discounts, currencies, regions, prices, settings, and more.

The steps below will guide you in creating Medusa Admin:

Clone the Medusa Admin repository and switch the directory to the newly created folder:
```
git clone https://github.com/medusajs/admin medusa-admin
cd medusa-admin
```
Run the command below to install all necessary dependencies:
```
npm install
```
Test it. Before you test the Medusa Admin, make sure your Medusa store server is running.
```
npm start
```

By default, Medusa Admin runs on port 7000; navigate to localhost:7000.

Medusa has default admin login details: admin@medusa-test.com as the email address and supersecret as the password. The default admin credentials are added because you used the --seed option while installing the Medusa server.

How to Enable Stripe in a Region

Before you can use Stripe as a payment option during the checkout process of your storefront, you need to add it as a payment provider to every region in your store. Medusa Region is used to control the market in which your store operates. It supports multiple countries, payment options, and currencies.

Follow the steps below to add Stripe in Medusa Region:

On your Medusa Admin dashboard, go to Settings → Regions.

Click on the region you want to edit from the Regions section. This enables you to edit different information and data related to the region.

Click on the three-dot icon at the top right of the selected region. Select Edit Region Details from the dropdown. This opens a new window where you can edit the region's details.

Select Stripe as the only payment method from the Payment Provider input field.

Once done, click the Save and close button.

You can repeat the steps above for other regions as well.

Creating Medusa Storefront

Medusa has prebuilt storefronts in two frameworks: Next.js and Gatsby. This tutorial will focus on setting up a working storefront with Next.js and Stripe as its payment providers.

To create a Medusa Storefront, follow the steps below:

Create a new Next.js project using the Medusa starter template.

npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefront

Switch to the newly created directory, my-medusa-storefront, and rename the template environment variable file to use environment variables in development:
```
cd my-medusa-storefront
mv .env.template .env.local
```

Configure Stripe in Medusa Storefront

In your .env.local file (or the file you’re using for your environment variables), add the following variable:

NEXT_PUBLIC_STRIPE_KEY=<YOUR_PUBLISHABLE_KEY>

Make sure to replace <YOUR_PUBLISHABLE_KEY> with your Stripe Publishable Key.

Test Stripe Payment

Before you test Stripe payment in your storefront, ensure your Medusa server is running. Run the command below to start your storefront:

npm run dev

After running the above command, navigate to localhost:8000 to test your storefront.

You can try adding products to your shopping cart and checkout; you should be able to pay with Stripe.

Capturing the Payment from the Admin

When a payment is successfully made by a customer from your storefront, the payment is authorized but not captured. You’ll need to capture the payment from your admin panel.

Follow the steps below to capture payments:

In the admin, go to Orders ⇒ Select the particular order.

Scroll down the page to Payment Card and click on Capture Payment.

Once you capture the payment, the payment status will automatically turn to Paid. Next, you can check your Stripe dashboard to view the payment.

Conclusion

This article explained what ecommerce is. It highlighted the features and benefits of Stripe and Medusa and showed a step-by-step guide to using Medusa ecommerce with Stripe.

You can add the following integrations to your store:

Segment plugin for advanced analytics and tracking,
Mailchimp for adding a newsletter subscription to your ecommerce store, and
Contentful for rich CMS functionalities such as two-way sync for the content, localization, versioning, and more.

You can learn more from Medusa Documentation.

Should you have any issues or questions related to Medusa, feel free to reach out to the Medusa team via Discord.

How to use Webpack for Frontend asset Management and Optimization

justinakingsley — Mon, 20 Feb 2023 12:54:14 +0000

Webpack is a powerful asset management and build tool that has become a staple in modern frontend development. It allows developers to easily manage and optimize the various assets that make up a web application, including JavaScript files, CSS, images, and more. In this tutorial, we will cover the basics of using Webpack to improve the asset management and build process for your frontend projects.

Brief Overview of Webpack

Webpack is a module bundler for JavaScript applications. It takes in your application's code and dependencies and outputs a single, optimized bundle that can be loaded into a web browser. By using Webpack, you can manage your assets in a more efficient and organized manner, and optimize your application for faster performance.

Explanation of the Benefits of Using Webpack

There are several benefits to using Webpack in your frontend projects.

First, it provides a unified and organized way to manage your assets, making it easier to maintain and update your code over time.

Second, Webpack offers a wide range of optimization techniques that can significantly improve the performance of your application, such as minification, compression, code splitting, and more.

Finally, Webpack is highly customizable and can be easily integrated with other tools and libraries, making it a versatile and essential tool for frontend development.

Getting Started

To get started with using Webpack, follow the steps below:

Installing Webpack

To get started with Webpack, you first need to install it using npm. Simply run the following command in your terminal:

npm install webpack --save-dev

Setting up a Basic Webpack Configuration

Next, you will need to create a Webpack configuration file. This file tells Webpack how to process your assets and what outputs to generate.
To create a basic configuration file, simply create a new file called webpack.config.jsin the root of your project and add the following code:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Adding Your First File to the Webpack Build Process

With your Webpack configuration file set up, you can now add your first file to the build process. In this example, we will add a simple
JavaScript file called index.js. To do this, create a new directory called src in your project and create a new file inside that directory called index.js. Add the following code to the file:

console.log('Hello, Webpack!');

Managing Assets

Aside from installing and configuring Webpack on your project, you need to learn how to manage Webpack also.

Loading Different File Types

One of the great benefits of using Webpack is that it can handle a wide range of file types, including JavaScript, CSS, images, and more. To load different file types in Webpack, you will need to use loaders. Loaders are small modules that tell Webpack how to process specific file types.

For example, to load CSS files, you can use the style-loader and css-loader modules. To install these loaders, run the following command in your terminal:

npm install style-loader css-loader --save-dev

Using Loaders to Process Files Before They Are Included in the Build

Once you have installed the necessary loaders, you need to configure Webpack to use them. This is done in the Webpack configuration file. In the following example, we will add support for loading CSS files in Webpack:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
};

Configuring Webpack to Output Optimized Files

By default, Webpack will output your assets as is, without any optimization. To take advantage of Webpack's optimization capabilities, you need to configure it to output optimized files. For example, to minify your JavaScript files, you can use the terser-webpack-pluginmodule. To install this plugin, run the following command in your terminal:

npm install terser-webpack-plugin --save-dev

Optimizing the Build Process

Next, optimizing webpack build process is very important.

Minifying and Compressing Files

To minify your JavaScript files, you can use the terser-webpack-plugin module that you installed in the previous section. To use this plugin, add the following code to your Webpack configuration file:

const TerserJSPlugin = require('terser-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimizer: [new TerserJSPlugin()],
  },
};

Splitting the Build into Multiple Chunks for Faster Loading

Webpack also allows you to split your build into multiple chunks, which can be loaded in parallel for faster performance. This is especially useful for large applications with many assets. To split your build into chunks, you can use the splitChunksconfiguration in Webpack:

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

Using Source Maps to Debug Production Builds

Finally, Webpack also supports generating source maps, which can be used to debug your application in production. To generate source maps, add the following code to your Webpack configuration file:

module.exports = {
  // ...
  devtool: 'source-map',
};

Advanced Features

You can also look into Webpack advanced features.

Integrating Webpack with Other Tools

Webpack can also be integrated with other tools and libraries to enhance its functionality. For example, you can use Babel to transpile your JavaScript code, ESLint to enforce coding standards, and more. To integrate these tools with Webpack, you will need to use loaders and plugins.

Using Plugins to Extend Webpack's Functionality

In addition to loaders, Webpack also supports plugins, which are modules that add additional functionality to Webpack. For example, you can use the copy-webpack-plugin to copy files from your source directory to your output directory. To use this plugin, install it using npm, and then add the following code to your Webpack configuration
file:

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: 'src/assets', to: 'assets' },
      ],
    }),
  ],
};

Hot Module Replacement (HMR)

Hot Module Replacement (HMR) is a feature that allows you to update your application's code and see the changes in real-time, without having to refresh the page. HMR is especially useful during development, as it saves you time and makes the development process more efficient. To enable HMR in Webpack, add the following code to your Webpack configuration file:

module.exports = {
  // ...
  devServer: {
    hot: true,
  },
};

Conclusion

In this article, you have covered the basics of Webpack and how to use it to build and optimize your web applications. From loading assets to splitting your build into multiple chunks, to integrating with other tools, Webpack provides a powerful and flexible platform for building modern web applications. Whether you are a beginner or an experienced developer, Webpack is a tool that you should have in your toolkit.