ユーザーの顧客情報入力なしで購入！LINE Checkoutを試してみた #LINE_API

はじめに

こんにちは、中村です。

「LINE Checkout」の提供を開始いたしましたにて紹介されていますが、LINE Payのオンライン加盟店向けにLINE IDによる認証およびLINE Profile+に登録したデータを活用できるようになりました。ユーザーはLINE Profile+に情報を登録している場合、加盟店サイトにて新たに情報入力せずに買い物をすることができます。

LINE Profile+

LINE Profile+は、ユーザーがあらかじめLINE上で登録した情報を、ユーザー同意に基づき外部サイト等で利用できる機能です。そのため外部サイト等で入力させる手間を省くことができます。

Profile+には、下記の手順でアクセスができます。

1. LINEアプリトップ上部にある歯車マークをタップ
2. プロフィールをタップ
3. 最下部のLINE Profile+をタップ
4. 情報を登録、確認

情報が入力された場合このような画面が表示されます。

今回は後ほど確認するために、住所を弊社本社にしています。

LINE Checkoutを試してみた

今回は、コーヒー豆の注文をチャット上で行います。想定しているフローは下記です。

1. 公式アカウントと友だちになる
2. リッチメニューを押下 or 「メニュー」をテキスト送信で商品一覧を表示される
3. 購入する商品をタップする
4. LINE Payへのリンクをタップし決済する
5. Thanksメッセージが送信される

構成図

Webhookは、公式アカウント用（HTTP POST）・LINE Pay決済承認後遷移用（HTTP GET）・LINE Pay決済キャンセル後後遷移用（HTTP GET）の3つを用意します。全てAPI Gateway・Lambdaで構築します。

メッセージ送信は黄色線、LINE Payへのリクエストは青緑線、LINE, LINE Payからのリクエストは灰色線で表しています。メッセージ送信には、LINE Messaging API SDK for Node.js を利用しています。

構築が完了したら、公式アカウント用WebhookをLINEの開発者コンソールで設定しましょう。

ソースコード

cm-nakamura-yuki/sample-linepay-checkout-bot
下記の情報が必要です。LINE開発者コンソール、LINE Payコンソール、API Gatewayの各種URLからメモしておいてください。

• 公式アカウントのチャネルアクセストークン
• 公式アカウントのチャネルシークレット
• LINE Pay決済承認後遷移URL
• LINE Pay決済キャンセル後遷移URL
• LINE PayチャネルID
• LINE Payチャネルシークレット

公式アカウント用

functions/botが公式アカウント用のコードです。下記の箇所にメモした情報を入力してください。

• 公式アカウントのチャネルアクセストークン(L4)
• 公式アカウントのチャネルシークレット(L5)
• LINE Pay決済承認後遷移URL(L6)
• LINE Pay決済キャンセル後遷移URL(L7)
• LINE PayチャネルID(L8)
• LINE Payチャネルシークレット(L9)

今回のサンプルは、配送費を0円（固定）としていますがInquiry ShippingMethods APIを実装することで郵便番号を元に配送可否、配送方法、送料照会が可能となります。Inquiry ShippingMethods APIを利用する場合は、Request APIのリクエストに"shipping.feeInquiryType"としてCONDITIONを使用します。

決済承認後遷移用Lambda

functions/confirmが公式アカウント用のコードです。下記の箇所にメモした情報を入力してください。

• 公式アカウントのチャネルアクセストークン(L4)
• LINE PayチャネルID(L5)
• LINE Payチャネルシークレット(L6)

クエリパラメータについたorderId, transactionIdを元にConfirm APIのリクエスト、メッセージの送信を行なっています。
今回は全商品1円なので1円で決済されるようになっていますが、実際にはorderIdで購入する情報を取得する必要があると思います。

決済キャンセル後遷移用Lambda

functions/cancelが公式アカウント用のコードです。下記の箇所にメモした情報を入力してください。

• 公式アカウントのチャネルアクセストークン(L2)

テスト

それでは決済を試してみます。決済承認画面に遷移するとProfile+に登録した住所が表示されました。電話番号・メールアドレスについてはマスクしていますが正しくデータが取得できました。

またLINE Pay決済承認後遷移WebhookにはProfile+の情報が送信されてきていました。

{
    "returnCode": "0000",
    "returnMessage": "Success.",
    "info": {
        "transactionId": 2019111230263388200,
        "orderId": "xxxxxxxxxx_1573537508507",
        "payInfo": [
            {
                "method": "BALANCE",
                "amount": 1
            }
        ],
        "packages": [
            {
                "id": "xxxxxxxxxx_1573537508507",
                "amount": 1,
                "userFeeAmount": 0,
                "products": [
                    {
                        "name": "Brazil",
                        "quantity": 1,
                        "price": 1
                    }
                ]
            }
        ],
        "shipping": {
            "feeAmount": 0,
            "address": {
                "postalCode": "1010025",
                "state": "東京都",
                "city": "千代田区神田佐久間町1-11",
                "detail": "産報佐久間ビル8階",
                "recipient": {
                    "firstName": "優輝",
                    "lastName": "中村",
                    "firstNameOptional": "ユウキ",
                    "lastNameOptional": "ナカムラ",
                    "phoneNo": "",
                    "email": ""
                },
                "country": "JP"
            }
        }
    }
}

これを利用することにより、ECシステムとも連携が可能になると思います。

まとめ

今回は、簡単なボットを利用してLINE Checkoutを実装しました。LINE Checkoutはユーザーによる新規で自身の情報入力をせずに、会員登録・決済・配送までをカバーすることができます。まだまだLINE Profile+の利用はこれからですが、利用するユーザーが増えれば増えるほど様々なECサイトでの実装がなされると思います。