カテゴリー
サインイン 新規登録
学習時間 20時間
難易度 中級
質問投稿
価格 ¥1,980

StripeとAWSを利用して、オンラインでの商品購入・定期課金契約ページを開発しよう

AWSとStripeを使ったオンライン決済本格入門!AWSでのwebアプリ開発に欠かせないAWS Amplifyの設定からデプロイまでを徹底解説。また、Stripeの基本的操作やAPIキー管理、シンプルなアプリ組込方法まで紹介します。

0
最終更新 2022/9
Hidetaka Okamoto

Stripe + AWSではじめる、簡単・安全なオンライン決済システム入門

昨今Webサイト上での決済は、オンラインビジネスに欠かせないものとなっております。一方で、決済機能の構築は、セキュリティ等の観点で安全性が求められます。

そこで本教材では、ECサイトを用いながら決済機能の実装方法と、AWSを使った安全な運用方法について学びます。

オンライン決済サービス「Stripe」が提供する決済ページ提供機能 Stripe Checkout を使用し、ユーザーが入力するクレジットカード情報を安全に取り扱うことができるようになります。

また、AWSが提供するWebアプリケーションホスティングサービスである AWS Amplify についても体験することで、StripeのAPIキーを安全に管理する方法デプロイ・公開方法などについても知ることができます。

Stripeを使ったオンライン決済をより身近に感じてもらうため、No Codeで決済URLを発行する方法や、メールで請求書を送付する方法など、Stripeの基本的な活用方法についても紹介します。

本教材は、オンラインでの決済機能を開発したい人やStripeでのオンライン決済の流れを理解したい人におすすめです。

学習内容

本教材では、「AWS Amplify」と「Stripe」の2サービスを軸に進行します。

  • AWSでのwebアプリ開発に関わる知識
    • AWSを利用して、webアプリケーションを作成・公開する方法
    • AWS AmplifyをCLIから操作する方法と公開までの流れ
    • AWS Amplifyを利用したREST APIの作成・公開方法
    • AWS Amplifyを利用したReactアプリの作成・公開方法
    • ReactからAWSサービスにアクセスする方法
  • Stripeを使ったクレジットカード決済機能の設定方法
    • Stripeでの商品登録・管理方法
    • Stripe APIキーを利用したアプリとStripeの連携方法
    • Stripe Checkoutを用いた安全なカード決済画面の設定方法
    • ReactからStripe APIにアクセスする方法

また関連するノウハウとして、以下についても簡単に解説します。

  • AWSでの安全なアクセスキー / APIキー管理
  • Express.jsを利用したREST API開発
  • ReactでのBootstrap導入方法
  • AWS Lambdaでの環境変数の取り扱い

作成物のイメージ

Stripe Checkoutを利用した決済ページ:
Image from Gyazo

Stripeの商品データとReactを利用した商品一覧ページ:
Image from Gyazo

教材の対象者

  • オンライン上で決済できるシステムを構築してみたい人
  • Stripe / AWSを利用したモバイルアプリケーション開発に興味がある人
  • Reactを触ったことがある。アプリケーションを構築したいと思っている人

受講における必要条件

  • AWSアカウントが開設済みであること
  • AWSアカウントのルートユーザーまたはAdministratorAccessポリシーを持つユーザーのログイン情報を所有していること
  • 簡単なコマンドラインの知識
    • 教材内で紹介しているコマンドを入力して実行できること
    • cd / ls / pwd / npm installなどの簡単なコマンドが実行できること
  • JavaScriptを利用したプログラムを少なくとも一度は書いたことがあること
  • React(できればFunctional Component)を少なくとも一度は触ったことがあること

教材で学ばないこと

  • AWS AmplifyのCLIとREST API、Hosting以外の機能・サービス
  • AWS Amplify以外のAWSサービス
  • StripeのCheckout / Payment Links以外の機能・サービス
  • 独自のマークアップ・スタイルを設定した決済フォームの実装方法
    • ※本教材では、Stripeが提供する決済フォーム(Checkout)を利用します
  • クレジットカード以外の決済方法(Alipay / WeChat Payなど)の詳細な実装方法
  • CSSの調整やReactの基本的な使い方
  • TypeScript

本教材の対応バージョン

※すべてマイナーバージョンは省略しています。

  • Node.js: 12.13
  • npm: 6.13
  • React: 17.0
  • Amplify cli: 4.5
  • Amplify sdk: 3.3
  • Stripe.js: 8.145
  • Stripe API: 2020-08-27
  • macOS: Catalina以降
  • Git: 2.31

本教材で質問対応可能なOSや環境

macOS

カリキュラム

Section 0 はじめに
Section 1 AWSで動くReactアプリを作ろう
  • 1-1 Create React Appでアプリをセットアップしよう
  • 1-2 Bootstrapで見た目を整えよう
  • 1-3 Amplify CLIとAmplify SDKを使って、ReactアプリとAWSを連携しよう
  • 1-4 AWS Amplify CLIで簡単なREST APIをAWSにデプロイしよう
  • 1-5 APIがエラー を返した時の対処法
Section 2 Stripeアカウントを作成し、アプリと連携しよう
  • 2-1 Stripeアカウントを作成しよう
  • 2-2 Stripe Payment Linksを使ってノーコードで決済URLをつくってみよう
  • 2-3 StripeのAPIキーを作成しよう
  • 2-4 公開可能キーとStripe JavaScript SDKをReactアプリに設定しよう
  • 2-5 制限付きキーとStripe Node.js SDKをAWS Amplifyのサーバー側アプリに設定しよう

講師のプロフィール

教材のレビュー

0.0
0件の評価
0%
0%
0%
0%
0%