当前位置: 首页 > 开发杂谈 >

[Day 27] - Gatsby feat. EC ( 上 )

这边的 EC 指的是 Electronic Commerce,也就是所谓的电子商务,我们将用一到两章节的篇幅来介绍如何用 Gatsby 来建立一个基础的电子商务网站,并串接 Stripe 来做付款的测试,但我们为什麽要用 Gatsby 来做电商?

因爲 Gatsby 拥有静态网站的特点,安全性、性能提高、方便部署等优势。

什麽是 Stripe

Stripe 是一项付款处理服务,可以让我们安全且方便地处理客户的付款资讯,我们非用它不可吗?没有,像是在台湾就蛮多家电商有提供这样的服务,例如大家耳熟能详的绿界、蓝新、红阳等等,只是便於此次文章测试,所以我们采用的是 Stripe。

Stripe 为我们处理了结帐这部分的功能,我们不需要建立任何的後端,我们只需要在 Stripe 提供的 Dashboard 上设定产品、SKUs 及我们订阅的计画,就可以轻易地使用这项服务。

在我们开始之前,记得先到 Stripe 注册,以便後续我们能使用测试 API。

专案环境设置

同样的,我们先在终端机上用 Gatsby CLI 来快速建置一个专案

gatsby new ecommerce-gatsby-tutorial

在专案建置完毕後,我们到专案目录下执行以下指令来安装 Stripe 套件

npm install gatsby-plugin-stripe

套件成功安装完毕後,我们开启 gatsby-config.js 来引入 Stripe,其他像是gatsby-plugin-react-helmet 或 gatsby-source-filesystem 等套件都是预设安装的,我们只要在阵列最下方加入 gatsby-plugin-stripe 即可。

plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    "gatsby-plugin-stripe"
  ],

设定完毕後,我们打开开发服务器看看有没有成功添加套件。

开启後,我们连入 http://localhost:8000 中,会看到以下预设画面,这时我们搜寻套件帮我们加载的 Script,如下图右侧红框处,就代表我们成功的载入套件了。

<script src="https://js.stripe.com/v3/"></script>

https://ithelp.ithome.com.tw/upload/images/20201012/20109495jOka2OWtXx.png

完成後,我们连到 Stripe 的 Dashboard,并且点击右侧的开发者 -> API Key,这时你的右侧应该会如下图般,我们待会会需要用到 Public Key 与 Private Key 来通过 API 的验证。

Private Key 非常重要,需要读者们保管好,如果让其他人拿到这组 Key ,他们可以查看你所发出的任何请求、费用与购买相关的资讯,甚至能退款给客户,所以这组 Key 不应该会放到 GitHub 或前端的程序码中。

https://ithelp.ithome.com.tw/upload/images/20201012/20109495RF5UvNViFD.png

取得 Key 後,我们点击产品栏位并快速的新增一个商品,因为我们会需要产品的 SKU 且我们在送需求给 API 时,API 也会验证我们的资讯是否正确。

新增完产品後,我们开启 src/components 目录,并在目录下新增一支 checkout.js ,里面我们建置一个结帐元件,如下方程序码。

import React from "react"

// 给结帐按钮设定样式
const buttonStyles = {
  fontSize: "13px",
  textAlign: "center",
  color: "#fff",
  outline: "none",
  padding: "12px 60px",
  boxShadow: "2px 5px 10px rgba(0,0,0,.1)",
  backgroundColor: "rgb(255, 178, 56)",
  borderRadius: "6px",
  letterSpacing: "1.5px",
}

// 使用 Class Component 的方式来建立元件
const Checkout = class extends React.Component {
  // 在页面第一次载入 DOM 的时间点时,初始化 Stripe
  componentDidMount() {
    // 这边会设定我们的 Key
    this.stripe = window.Stripe("pk_test_jG9s3XMdSjZF9Kdm5g59zlYd")
  }

	// 验证我们的资讯,成功便发出请求,失败也会做错误的处理
  async redirectToCheckout(event) {
    event.preventDefault()
    const { error } = await this.stripe.redirectToCheckout({
      // 放置 sku
      items: [{ sku: "sku_DjQJN2HJ1kkvI3", quantity: 1 }],
      successUrl: `http://localhost:8000/page-2/`,
      cancelUrl: `http://localhost:8000/`,
    })

    if (error) {
      console.warn("Error:", error)
    }
  }

  render() {
	  // 回传对应的 JSX 结构
    return (
      <button
        style={buttonStyles}
        onClick={event => this.redirectToCheckout(event)}
      >
        购买
      </button>
    )
  }
}

export default Checkout

关於生命周期,有兴趣的读者可以参考 Life Cycle - Ian Chu 这篇,另外如果对於 Functional Component 的生命周期写法有兴趣的读者,则可以参考 useEffect Hook - React 这篇

我们新增完结帐按钮後,接着我们要到首页中去引用它,来测试我们的成果,
打开 pages 目录下的 index.js ,并引入以下程序码

import Checkout from "../components/checkout"

接着我们将 Checkout 元件放置在任意位置上,然後我们重启开发服务器,你会看到画面中有个黄色抖大的购买按钮,点击下去後

https://ithelp.ithome.com.tw/upload/images/20201012/20109495QxVFRc6M2N.png

我们应该能看到以下结帐画面

https://ithelp.ithome.com.tw/upload/images/20201012/20109495ZROhVUE3oj.png

今天我们初步的完成了一个结帐的流程,但还记得吗?我们上面有提到不要将 Key 放在前端或 GitHub 上分享,而目前,我们将 Key 的资讯都放在了 CheckOut 的元件当中,所以明天我们会用其他方式来解决这个不安全的问题,各位读者,我们明天见!

参考资料

Gatsby E-commerce Tutorial - Gatsby


相关文章:

  • Day 4 - 破解骇客的思考模式
  • Day22-Vuex简介
  • 亚马逊卖家关于移除差评的一些事儿
  • [想试试看JavaScript ] 资料型态 数字 布林 undefined null
  • Day4-Go Go Go!第一只 golang!
  • Day 8 - Plus One
  • Azure Developer Course
  • Lazada卖家怎样联系客服快速解决问题呢?
  • [想试试看JavaScript ] 阵列一些操作阵列好用的方法
  • Unity - VR - Step运用
  • TailwindCSS 从零开始 - 自订 addBase 套件
  • [Cmoney 菁英软件工程师战斗营] IOS APP 菜鸟开发笔记(7)----自定义弹出视窗
  • Facebook CAPI相对Pixel有什么优势?
  • Day21 Vue data属
  • 亚马逊新手卖家运营中踩雷避坑大盘点
  • 教程/Directory Lister逗比魔改版 Github开源(个人云)
  • Monzo Bank教程:英国银行卡申请教程【教你国内注册申请欧洲银行卡】
  • 数字人民币是什么?什么是数字人民币
  • DGCHOST稳定吗?现在还可以购买DGCHOST的服务器VPS吗
  • 移动怎么开通香港电话号码
  • 苹果手机Apple美国区账号无信用卡购买教程【Apple ID美国区绑定PayPal教程】
  • 最新虚拟信用卡无限开卡渠道大全
  • Android让系统信任用户证书的方法
  • Git是什么?
  • Jungle Scout选品工具中文版好用吗?亚马逊选品为什么要用JungleScout
  • 2021年10个全球电子商务趋势[信息图] ,所有电商人员都该了解一下
  • 美国花旗银行虚拟信用卡申请教程【国内怎么申请美国信用卡】
  • vultr.com怎么申请退款教程和方法
  • Akaxin:开源社交软件/加密聊天/打造你自己的社交产品
  • WordPress SEO怎么做?如何优化WordPress提升流量