K5 PlaygroundのショッピングアプリにPayPalを使ってペイメント機能を追加する

K5 Playgroundのアプリに、PayPalを使ったペイメント機能を追加する方法を説明します。PayPalを使うことで、クレジットカード決済のような複雑で難易度の高い機能を自分で実装することなくショッピングサイトを作れます。

概要

材料

• テンプレート: Simple Search
• APIロジック: PayPal Payments API, MongoDB

機能

• 商品の一覧・詳細表示
• ショッピングカート
• PayPalによるクレジットカードでの支払い

アプリの作成

K5 Playgroundにアクセスします。

Frontend

1. K5 PlaygroundでSimple Searchテンプレートを選択します。

Backend

1. POST payment エンドポイントを選択します。

   1. Create Paypal Parameters APIロジックを修正します。

      redirect_urls: {
        return_url: 'https://[フロントエンドのドメイン]/payment',
        cancel_url: 'https://[フロントエンドのドメイン]/',
      },

2. アプリケーションをダウンロードします。

アプリのカスタマイズ

Frontend

特に修正する必要はありません。

Backend

config.jsにMongoDBやPayPalの接続情報を入力します。

• PayPalのmodeは'sandbox'とします。

アプリのデプロイ

MongoDBへのデータ投入

1. FrontendDBという名前のDBを作成します。
2. その中にsample_productというコレクションを作成します。

3. 次のようなキーを持つ商品情報を複数件insertします。

   {
     "category" : "文房具",
     "name" : "万年筆",
     "description" : "詳細情報",
     "image_url" : "画像のURL",
     "price" : "100"
   }

Backend

cd backend
cf push [APP_NAME]

Frontend

cd frontend
set API_URL=[Backend URL] # for Windows
export API_URL=[Backend URL] # for Mac/Linux
npm run build
cf push [APP_NAME] -p public

ダウンロード

• Sample Application

Version

• Simple Search Template: v1.0.0