带有条纹的电子商务:A如何指导
#javascript #stripe #ecommerce #medusa

在当今的数字时代,对企业建立无缝且安全的支付系统至关重要。使用能够集成第三方付款提供商(如Stripe)的电子商务平台将简化客户的付款过程并增强整体购物体验,从而增加销售额。

Stripe是一个广泛使用的付款网关,提供一套付款API,以帮助企业在线接受付款。使用Medusa等灵活的电子商务平台来设置您的电子商务网站可能会改变游戏规则。

美杜莎(Medusa)提供了具有必要组件的电子商务系统的构建块,包括处理付款和使用其他高级功能处理客户数据。

在本教程中,您将探索使用Stripe和Medusa的好处,并学习如何建立带有Stripe和Medusa的完整电子商务商店。

什么是条纹?

Stripe是支持美国和全球数千家企业的最大付款提供商之一。它为企业处理在线付款提供了一个平台。 Stripe为企业提供工具和服务,以接受客户付款,包括付款网关,付款处理器和一套开发人员友好的API。

Stripe支持各种付款方式,包括信用卡,借记卡,Apple Pay,Google Pay,Microsoft Pay,AfterPay/ClearPay,Aripay和ACH付款。此外,Stripe具有欺诈检测工具,可以管理订阅和经常性付款。

Image description

Stripe在中小型企业(中小型企业),开发人员和在线市场中特别受欢迎。对于希望在本地和国际上出售的电子商务平台来说,这是一个不错的选择。它提供了用于管理和分析交易的工具,以及与其他软件和服务集成的能力。

为什么使用条纹?

  • 简单集成:Stripe提供与网站和移动应用程序的简单集成,使企业可以快速,轻松地开始在线接受付款。
  • 安全性:Stripe符合行业安全标准和法规,为客户提供了安全可靠的付款经验。
  • 开发人员友好的API:Stripe以其开发人员友好的API和强大的文档而闻名,使其成为各种规模和行业的企业和开发人员之间的流行选择。
  • 全球承保范围:Stripe支持135多种货币的付款,可在40多个国家/地区使用,使企业可以轻松扩展到新市场并接受全球客户的付款。

什么是美杜莎?

Medusa是一个开源,基于node.ja,composable commerce引擎。它的API可以与前端工具集成以创建可扩展的电子商务商店。

美杜莎(P)允许开发人员无缝构建复杂的商业系统。对于想要完全控制开发过程的开发人员来说,这是很棒的。美杜莎(Medusa)有三个主要组件:headless服务器,the admin panel和用于增强速度的店面。

Image description

美杜莎是一个高度可定制的平台,可与各种第三方服务无缝集成。这使用户可以利用不同领域可用的最佳解决方案,最大化效率并优化其工作流程。

它具有多种功能,包括多个付款选项,购物车,multi-currency feature和第三方付款集成。默认情况下,美杜莎商业引擎带有手动付款提供商。

为什么要使用美杜莎?

  • 高级电子商务功能:美杜莎(Medusa)提供了一些高级电子商务功能,例如多货币,自动化RMA流量和销售渠道。
  • 开发人员友好的功能:Medusa具有开发人员克隆的预构建的开源代码库。它具有已经内置的高级电子商务的所有功能。
  • 灵活的后端:美杜莎使用Node.js backend;它的建造方式使开发人员可以轻松地研究,理解和编写有关他们打算实现的新代码。
  • 第三方集成:MEDUSA通过插件支持与其他服务集成,从而为平台添加了新功能和功能。此类服务的一些示例是SegmentContentfulPayPalAlgolia等。

先决条件

要有效地遵循本教程,请确保您有以下内容:

如何用条纹建立美杜莎电子商务

对于本教程,您将使用美杜莎商业引擎来建造电子商务商店;这将使您能够利用Medusa的所有预构建功能来轻松开发过程。您将使用Medusa服务器,Medusa Admin和Medusa店面。

创建Medusa服务器项目

要创建新的美杜莎项目,请按照以下步骤:

安装美杜莎CLI工具

美杜莎CLI准备好您的计算机,可以在本地运行MEDUSA代码库。您可以在下面运行此命令以安装它:

npm install @medusajs/medusa-cli -g

创建新的Medusa服务器

创建一个新的美杜莎项目很简单;在下面运行命令:

medusa new my-medusa-store --seed

my-medusa-store是项目文件夹的名称,因此您可以根据需要进行编辑。如果您已经成功完成了上述步骤,请切换到新项目:

cd my-medusa-store

接下来,使用以下命令启动Medusa服务器:

medusa develop

Medusa默认情况下在9000端口上运行。您可以导航到localhost:9000/store/products/查看您的商店产品。

如何安装美杜莎条纹插件

Stripe插件是MEDUSA中的包装,可在项目上付款。在Medusa项目的根部,运行以下命令以安装Stripe插件:

npm install medusa-payment-stripe

接下来,在您的.env文件中,添加下面的代码段:

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

在上面的代码段中,将<STRIPE-API-KEY><STRIPE-WEBHOOK-SECRET>替换为Stripe dashboard的钥匙。

如何在美杜莎服务器中配置条纹

首先,在medusa-config.js中,在plugins数组的末尾添加以下内容:

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

创建美杜莎管理员

美杜莎管理员是Medusa的一个组成部分,允许商人处理所有管理职能,包括产品管理,订单管理,客户管理,折扣,货币,区域,价格,设置等。

以下步骤将指导您创建Medusa管理员:

  1. 克隆美杜莎管理员存储库,然后将目录切换到新创建的文件夹:

    git clone https://github.com/medusajs/admin medusa-admin
    cd medusa-admin
    
  2. 运行下面的命令以安装所有必要的依赖项:

    npm install
    
  3. 测试它。在测试Medusa管理员之前,请确保您的美杜莎商店服务器正在运行。

    npm start
    

默认情况下,Medusa管理员在7000端口上运行;导航到localhost:7000

Image description

美杜莎(Medusa)具有默认的管理员登录详细信息:admin@medusa-test.com作为电子邮件地址,将supersecret作为密码。添加默认管理凭据是因为您在安装Medusa服务器时使用了--seed选项。

如何在区域启用条纹

在您可以在店面结帐过程中使用Stripe作为付款选项之前,您需要将其作为付款提供商添加到商店中的每个地区。美杜莎地区用于控制商店经营的市场。它支持多个国家,付款方式和货币。

按照下面的步骤在Medusa区域中添加条纹:

  • 在您的Medusa管理仪表板上,转到设置区域

Image description

  • 单击要从区域进行编辑的区域 。这使您可以编辑与该地区有关的不同信息和数据。

Image description

  • 单击所选区域右上方的三点图标。从下拉菜单中选择编辑区域详细信息。这打开了一个新窗口,您可以在其中编辑该地区的详细信息。

Image description

  • 选择条纹作为付款提供商输入字段的唯一付款方式。

Image description

  • 完成后,单击保存并关闭按钮。

您也可以重复上述其他区域的步骤。

创建美杜莎店面

美杜莎(Medusa)在两个框架中预先建立了店面:Next.jsGatsby。本教程将重点介绍与Next.js和Stripe作为付款提供商建立工作店面。

要创建美杜莎店面,请按照以下步骤操作:

  • 使用Medusa starter template创建一个新的Next.js项目。

    npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefront
    
  • 切换到新创建的目录my-medusa-storefront,并重命名模板环境变量文件以使用开发中的环境变量:

    cd my-medusa-storefront
    mv .env.template .env.local
    

在美杜莎店面配置条纹

在您的.env.local文件中(或您用于环境变量的文件),添加以下变量:

NEXT_PUBLIC_STRIPE_KEY=<YOUR_PUBLISHABLE_KEY>

确保用您的Stripe Publishable Key替换<YOUR_PUBLISHABLE_KEY>

测试条纹付款

在店面测试条纹付款之前,请确保您的美杜莎服务器正在运行。运行下面的命令以启动您的店面:

npm run dev

运行上述命令后,导航到localhost:8000测试您的店面。

Image description

您可以尝试在购物车和结帐中添加产品;您应该能够用条纹付款。

Image description

从管理员那里捕获付款

当客户从您的店面成功付款时,付款将被授权但未捕获。您需要从管理面板中获取付款。

按照以下步骤捕获付款:

  • 在管理员中,转到订单 - 选择特定顺序。

Image description

  • 向下滚动页面以付款卡,然后单击捕获付款。

Image description

  • 捕获付款后,付款状态将自动转向付款。接下来,您可以检查条纹仪表板以查看付款。

Image description

结论

本文解释了什么是电子商务。它强调了条纹和美杜莎的功能和好处,并展示了使用Medusa电子商务与Stripe的分步指南。

您可以将以下集成添加到您的商店:

  • 用于高级分析和跟踪的Segment插件,
  • Mailchimp用于向您的电子商务商店添加新闻通讯,
  • Contentful用于富含CMS功能,例如内容,本地化,版本控制等的双向同步。

您可以从Medusa Documentation中了解更多信息。

如果您有与美杜莎有关的任何问题或问题,请随时通过Discord与Medusa团队联系。