By
—

EC システムサイドでクレカ番号を扱う必要なく、優れた UX を提供するウィジェットタイプの Komoju Multipay の導入方法の紹介

皆さん、決済してますか。今回は、弊社が開発/運営している決済サービス Komoju に関する記事です。皆さんが Komoju を導入する方法は3つあります。

  • ホストページ: 決済に必要な情報(クレカ番号等)は Komoju ドメインのページに遷移し、決済を行う方法。クレカ等の個人情報を EC サイト自身で扱う必要がない
  • API 経由: 決済に必要な情報のページは EC サイト自身で用意し、入力された情報を使って、Komoju の API を呼出して決済を行う方法。クレカ等の個人情報は一度は EC サイト上で取得する必要がある
  • Multipay (マルチペイ): Komoju が用意する決済ウィジェットを EC サイト上で表示し、そこで決済に必要な情報を入力し、トークンを取得し、それを使って Komoju の API を呼出して決済を行う方法。クレカ等の個人情報を EC サイト自身で扱う必要がない

この中で自由度が一番高いのは「API経由」です。この方法では、UI の作成は EC サイト側に任されます。そのため、ページの構成や遷移方法は自由に設計できます。しかし、その分だけ開発の負担は大きくなります。特に、決済処理は直接お金に関連する情報を扱うため、セキュリティ面を十分考慮する必要があります。

逆に、安全性が高く開発の負担が少ないのは「ホストページ」経由の決済です。この方法だと、決済情報の入力は Komoju の中で行います。よって、EC サイト側は特段のクレカ番号のセキュリティ等を考慮をすることなく、顧客、そして EC サイトにとって安全な形で決済機能を導入できます。

一方、「Multipay（マルチペイ）」は安全性と柔軟性をあわせ持った利用方法です。この方法は「ホストページ」と同様、決済情報は Komoju 側で処理されますが、その処理はウィジェット内の iframe で行われます。顧客から見ると、外部サイトに飛ばされることなく、EC サイト内で処理が完結するように見えます。

個人情報の流出はあってはならないことですが、決済に関する情報は、多重防護の安全策を取ることが必要です。「ホストページ」や「マルチペイ」を使っていれば、万が一 EC サイト側からの情報流出があっても、クレジットカード番号や CVV などの重要な情報は含まれていませんので、顧客に与える被害を限定することができます。

今回はマルチペイの概要と利用に向いているストアや導入方法を説明していきます。


Komoju Multipay とは

Komoju Multipay(マルチペイ) は Komoju の決済ウィジェットです。これを使うと、以下のようなウィジェットが EC サイト内でポップアップ表示され、Komoju のドメインに移行することなく、決済を行うことができます。

利用する利点

マルチペイは、ホストページのように、決済情報入力フォームを EC ストア自身で用意する必要がなく、API 経由のように Komoju ドメインに遷移することなく決済が行えます。よって、ユーザーからは EC サイト内で決済が行えているという UX と、クレジットカード情報などの個人情報を EC ストア自体で扱うことなく、決済が行えるという利点があります。

なぜ Komoju Multipay ウィジェットだと安全なのか

Multipay ウィジェットは、iFrame を使って Komoju が用意したドメイン上で決済情報を入力するフォームを提供します。よって、見た目は EC サイト上にいるように見えますが、実際の入力フォームは直接 Komoju と通信するため、EC サイト自身では決済フォームで入力された情報は扱いません。よって、決済に関する情報のセキュリティ等を気にする必要はありません。

特に2018年3月を目処に EC サイト上で商品を販売し、クレジットカード情報を保持する場合や、保持しなくてもカード情報を扱う場合は PCI DSS に準拠することが義務付けらます。よって、マルチペイはドメインを遷移することなく、手軽に決済を提供したいストアに向いている利用方法と言えます。

利用に向いているストア

  • クレジットカード決済を導入したいが、PCI DSS 要件を満たしていなくかつ、ドメイン遷移はしたくない(ユーザー体験を損ないたくない）場合
  • 決済手段毎の入力フォームの作成コストを抑えて、なるべく多くの決済手段を手軽に導入したい場合


Komoju Multipay の導入手順

では、具体的に導入手順を説明していきます。

その前に、Komoju アカウントを持っていることを前提とします。まだ Komoju アカウントを持っていない場合はこちらから数分で作成できます。

マルチペイの処理フローは以下のようになります。

Multipay ウィジェットでは、決済に必要な情報(クレジットカード情報等）を入力し、トークンを取得します。次に、Komoju の決済 API を取得したトークンを使って、実際の決済を行います。このように2段階で決済を行います。よって、決済は、Multipay ウィジェットだけで完結するわけでなく、サーバーサイド側で決済 API を呼び出す処理を実装する必要があります。(Multipay ウィジェットを使わない場合は、EC サイト内で Komoju の決済 API を呼び出す際にクレジットカード情報を渡すため、EC サイトでクレジット情報を扱う必要がありますが、マルチペイでは、代わりにトークンを渡すだけなので、セキュリティ上のリスクがありません）

実際に EC サイト側でやることは以下の作業となります。

  1. フロント: Multipay ボタンの設置。(入力フォームの設置とトークンの取得)
  2. サーバーサイド: Multipay ウィジェットからの戻り口の作成とトークンを使って決済作成 API の呼出し。
  3. (必要に応じて) 非同期決済方法の支払い完了通知受信用の Webhook の設定と受信口の作成

(サーバー側の処理のサンプルコードは Rails を使って説明します)

Multipay ボタン - HTML タイプと Javascript タイプ

Multipay ボタンは Multipay ウィジェットを表示するためのボタンのことです。Komoju では、HTML タイプと JavaScript タイプの2通りの方法を提供しています。

  • HTML タイプ: なるべく手間をかけたくない場合に利用を推奨。ボタンの文言や見た目はいじれない。10数行のHTMLをコピペするだけ。
  • JavaScript タイプ: ボタンの見た目や文言をカスタマイズしたい場合に利用を推奨。自前で作成したボタに Multipay を呼び出すための JavaScript を埋め込む必要がある。

注: 本番で利用する際は、URL は “https://komoju.com” に変え、公開鍵も本番用のアカウント用のキーを使うこと。(sandbox と本番では公開鍵、非公開鍵とも別々のものになります）


HTML タイプ

1. Multipay ボタンの設置

Komoju 側で用意した HTML スニペットをそのまま貼り付けるだけです。HTML はここにあります。これをコピペして EC サイト内の決済するページに貼り付けます。(action の “/charge” は変えても問題ありません。これは、EC サイト側のサービスの action です）

HTML スニペットを貼り付けたら、以下の項目を修正します。

  • data-key: Komoju アカウントの公開鍵を指定します。
  • data-amount: 支払い金額を指定します。ウィジェット内表示専用です。この情報が直接 Komoju に送られる訳ではありません。
  • data-locale: “ja” に変更します。
  • data-title: ウィジェットのタイトルです。通常は商品名など支払い対象の情報を設定します。(この情報はここの表示用ですので、任意の内容で構いません。)
  • data-description: 説明です。支払い対象の補足情報です。(この情報はここの表示用ですので、任意の内容で構いません。)
  • data-methods: 利用する決済方法。(sandbox 利用の場合は変更しなくてもいいですが、本番で利用する際は、契約したもののみとしてください。)

その他にも、ロゴなど設定可能なパラメーターのオプションがあります。また、既にユーザーのメールアドレスを入手している場合は prefillEmail にメールアドレスを設定しておくことで、Multipay ウィジェット上での入力を省略することができます。利用する際は一読ください。

また、この方法では、EC サイト側の /charge (変更可能)が呼ばれた場合に、token というキーのパラメータでマルチペイで取得したトークンが渡されます。

2. 決済処理の作成

EC サイトのサーバー側の処理を追加します。PATCH データ受信用に以下のように config/routes.rb とコントローラー用に処理を追加します。

(以下のサーバー側コードはサンプルです。お使いの環境の参考まで)

config/routes.rb

Rails.application.routes.draw do
  ...
  resources :orders do
    patch :charge
  end
  ...
end

app/controller/orders_controller.rb

HTTP リクエストには、faraday と faraday_middleware を利用。

class OrderController
  def charge
    token = params[:token]
    create_payment(token)
  end

  private
  def create_payment(token)
    conn = Faraday.new(url: 'https://sandbox.komoju.com') do |builder|
       builder.request  :url_encoded
       builder.response :logger
       builder.response :json, :content_type => /\bjson$/
       builder.adapter  :net_http
     end
     conn.basic_auth("<SECRET_KEY>", "")

     res = conn.post do |req|
       req.url '/api/v1/payments'
       req.body = {
         amount: 1000, # Test data
         currency: 'JPY',
         external_order_num: "<YOUR_ORDER_NUMBER>",
         payment_details: token
       }
     end

     if res.success?
      redirect_to :complete
     else
       render :show
     end
  end
end

上記コードの以下の箇所は適切な値に置き換えます。

  • <SECRET_KEY>: Komoju アカウトの非公開鍵
  • amount: 支払い金額
  • <YOUR_ORDER_NUMBER>: (オプション) 自身の EC サイト上で管理する注文番号。(Komoju の管理画面からこの番号を使って検索ができる)

注: 本番で利用する際は、URLは “https://komoju.com” に変え、非公開鍵も本番用のアカウント用のキーを使うこと。(sandbox と本番では公開鍵、非公開鍵とも別々のものになります）


JavaScript タイプ

1. Multipay ボタンの設置

JavaScript タイプは自前で用意したボタンや Form に対して、JavaScript を使ってMultipay ウィジェットを利用します。

公式サイトにある JavaScript スニペットを EC サイトの決済ページの JavaScript 記載箇所に貼り付けます。貼付け後、適切な値に変更します。

Komoju.multipay.configure の key に Komoju アカウントの公開鍵を設定します。

次に、handler.open 内の値を変更します。

  • amount: 支払い金額(ウィジェット内表示専用。この情報が直接Komojuに送られる訳ではありません。)
  • locale: “ja” に変更します。
  • title: ウィジェットのタイトルです。通常は商品名など支払い対象の情報を設定します。(この情報はここの表示用ですので、任意の内容で構いません。)
  • description: 説明です。支払い対象の補足情報です。(この情報はここの表示用ですので、任意の内容で構いません。)
  • methods: 利用する決済方法。(sandbox 利用の場合は変更しなくてもいいですが、本番で利用する際は、契約したもののみとしてください。)

その他にも設定可能なパラメーターのオプションがありますので、利用する際は一読ください。

また、この方法では、EC サイト側の /purchase (変更可能)が呼ばれた場合に、komojuToken というキーで Multipay が取得したトークンが渡されます。(これは、JavaScript 内の payForm.komojuToken.value の komojuToken を変更することで、任意のキーに変更できます。)

2. 決済処理の作成

EC サイトのサーバー側の処理を追加します。PATCH データ受信用に以下のように config/routes.rb とコントローラー用に処理を追加します。

(以下のサーバー側コードはサンプルです。お使いの環境の参考まで)

config/routes.rb

Rails.application.routes.draw do
  ...
  resources :orders do
    patch :purchase
  end
  ...
end

app/controller/orders_controller.rb

class OrderController
  def purchase
    token = params[:komojuToken]
    create_payment(token)
  end

  def create_payment(token)
    # HTML タイプと同じため省略。HTML タイプのコードをコピペしてください。
  end
end

上記コードの以下の箇所を適切な値に置き換えます。

  • <SECRET_KEY>: Komoju アカウトの非公開鍵
  • amount: 支払い金額
  • <YOUR_ORDER_NUMBER>: (オプション) 自身の EC サイト上で管理する注文番号。(Komoju の管理画面からこの番号を使って検索ができる)

注: 本番で利用する際は、URLは “https://komoju.com” に変え、非公開鍵も本番用のアカウント用のキーを使うこと。(sandbox と本番では公開鍵、非公開鍵とも別々のものになります）


動作確認

コードの準備ができたら、テストしてみてください。クレジットカードをテストしたい場合は、テスト番号がこちらにありますので、それを入力してください。

Webhook の設定

上記までのフローで Multipay を使ってKomoju 上に決済が作成されるようになります。同期決済(クレジットカード等)の場合は、これで決済が完了です。コンビニなど非同期決済の場合は、支払い完了時に通知を受け取りたい場合は、Webhook を設定し、決済完了(‘payemnt.captured`)の通知を受け取れるようにする必要があります。

Webhook の設定は、Komoju の管理画面にログイン > 左メニューの “設定” > Webhok の “表示” をクリック > “新規 WEBHOOK” をクリックから、作成できます。

Webhook については、Webhook のドキュメントをご覧の上、実装ください。(Ruby のサンプルコードがあります）

その他にやること

決済の返金やキャンセル等の API もありますので、連携したい場合はそちらもご利用ください。


最後に

以上、如何だったでしょうか。最初にも述べましたが、昨今は PCI DSS などカード情報の扱いがより重要になってきていますので、このマルチペイを使った決済は今後非常に重要になっていくでしょう。

Komoju ではこのマルチペイを含め、Komoju のサイトからアカウントを作成すれば、即座にサンドボックスで動作確認ができる状態になります。是非、一度試してみてください。

一緒にユニークな決済サービスを作ってくれる Rails エンジニアを募集中です！
多国籍なメンバーと一緒に仕事をしてみませんか？詳細はこちらのリンクです:D
Degicaの採用情報