オンライン決済　導入ガイド

オンライン決済について

決済処理を行う際に各プロバイダ事業者の画面に遷移し、ユーザー側が各アプリを開く、またはログインして決済を行う手段です。
下記がオンライン決済に該当いたします。

  • PayPay Online
  • Alipay Online
  • Alipay Plus Online
  • WeChat Pay Online
  • ｄ払い Online （リリース前のサービス）

都度課金でのみ利用可能で、定期課金やリカーリングトークンを用いた継続的な課金には利用できません。
また、各決済手段、さらにはユーザーの使用するデバイスによっては利用できない方法もございますのでそれぞれで紹介いたします。

ユーザーの支払いフロー

弊社決済フォームを開き情報を入力して進むと、ブラウザの新しいタブに各プロバイダ専用の決済画面が開き、そこからさらにログインやアプリ遷移などをして決済するのが基本的な流れです。

PayPay Online

PCブラウザで開く場合

  • ブラウザ内でログイン情報を入力し、SMSでワンタイムコードが発行されるので入力して決済します。
  • QRが表示されるので、モバイル端末で読み取り決済します。

モバイル端末で開く場合

  • 端末内のアプリを開いて決済します。
  • 端末のブラウザ内でログイン情報を入力し、SMSでワンタイムコードが発行されるので入力して決済します。

Alipay Online

PCブラウザで開く場合

  • Alipayのアカウント情報を入力し、支払いパスワードを入力して決済します。

モバイル端末で開く場合

  • 端末内のアプリを開いて決済します。
  • Alipayのアカウント情報を入力し、支払いパスワードを入力して決済します。

Alipay Plus Online

PCブラウザで開く場合

  • QRが表示され、モバイル端末で読み取り決済します。

モバイル端末で開く場合

  • 支払うウォレットを選択し、端末の各アプリを開いて決済します。

WeChat Pay Online

PCブラウザで開く場合

  • 対応していません。モバイル端末からのみ利用できます。

モバイル端末で開く場合

  • リンクフォームを利用する場合
    • アプリ内で弊社決済フォームを開きそのままアプリ内で決済します。
    • アプリ外のブラウザからフォームを開いた場合は決済方法として表示されず利用できないのでご注意ください
  • ウィジェットを利用する場合
    • アプリ外のブラウザから弊社決済フォームを開き、情報入力後WeChatアプリへ移動して決済します。
    • アプリ内のブラウザからフォームを開いて決済する方法は現在対応しておりませんのでご注意ください

ｄ払い Online （リリース前）

※PCブラウザ/モバイル端末、リンクフォーム/ウィジェット全てで共通

ブラウザから弊社決済フォームを開き、ブラウザ内でログイン情報を入力し、SMSでワンタイムコードが発行されるので入力して決済します。

リンクフォーム/ウィジェットでの実装

リンクフォーム：
詳細な作成方法はリンク先のドキュメントをご確認ください。
オンライン決済においてリンクフォーム作成画面で利用できない項目は下記です。

  • カード登録(リカーリングトークン作成)
  • CVV認証
  • 定期課金
  • 仮売り上げ
  • 分割払い

※リンクフォームでWeChat Payを選択して決済したい場合、WeChatアプリ内で決済フォームを開く必要があります。
　また、WeChatアプリ内でリンクフォームを開いたとき、決済手段でAlipay,Alipay Plusを選択すると支払い処理に失敗しますので、外部ブラウザからアクセスして支払い処理を行うようにしてください。

ウィジェット：
詳細な設置方法はリンク先のドキュメントをご確認ください。
Widget HTML 記載例）

<script src="https://widget.univapay.com/client/checkout.js"></script>
<form action="<任意のURL>">
 <span data-app-id="<アプリトークンID>"
  data-checkout="payment"
  data-amount="1000"
  data-currency="jpy"
  data-payment-types="paypay_online,we_chat_online,alipay_online,alipay_olus_online"
 ></span>
</form>

※Widget上に利用可能な支払方法を全て表示させる場合は、
「data-payment-types」の行を取り除いてください。

APIでの実装

弊社提供のWidgetやリンクフォームを使用せず、加盟店様側で支払ページを作成しAPIで処
理するフローの説明です。本ガイドはオンライン決済における各API処理の補足説明となっております。

APIの処理でQR事業者側の支払い画面を呼び出すための流れは下記です。

1.トランザクショントークンの作成

ユーザーの入力した情報をもとにトークンを作成します。
各支払い方法によって必要な情報が異なり、http_get, http_postなど、各クライアントが要求する実行方法によっても指定する値が異なります。

リクエストbody例）

{
  "payment_type" : "online",
  "type" : "one_time",
  "email" : "demo@univapay.com",
  "data" : {
    "brand" : "alipay_plus_online",
    "call_method" : "http_get"
  },
  "metadata": {
    "memberid" : "12345"
  },
}

2.課金の作成

1で作成したトークン情報を基に課金を作成します。
課金金額や決済完了後のリダイレクトURL、任意のメタデータなどもここで指定します。

リクエストbody例）

{
"transaction_token_id": "9c3b37f8-1851-11e7-9b58-8b8ddbe8f1d1",
"amount": 1000,
"currency": "JPY",
"metadata": {
    "order_id": 12345,
    "shipping_details": "Customer wants it now"
  },
"redirect": {
    "endpoint": "https://test.url/path?additionalParams=paramValue"
  }
}

3.課金情報の取得

2で作成した課金IDを取得します。
課金：CREATE に対してのレスポンスや、課金：GET から取得できます。
この時に課金のステータスが awaitingになっている必要があります。

レスポンスbody例）

{
  "id": "0fe1e42a-1845-11e7-9b1f-d3bd0c055a99",
  "store_id": "af857264-180c-11e7-9be2-276aea4fed28",
  "transaction_token_id": "9c3b37f8-1851-11e7-9b58-8b8ddbe8f1d1",
  "transaction_token_type": "one_time",
  "subscription_id": null,
  "requested_amount": 1000,
  "requested_currency": "JPY",
  "requested_amount_formatted": 1000,
  "charged_amount": 1000,
  "charged_currency": "JPY",
  "charged_amount_formatted": 1000,
  "status": "awaiting",
  "error": null,
  "metadata": {
    "customer_id": 12345,
    "shipping_details": "Customer wants it now"
  },
  "mode": "test",
  "created_on": "2018-07-13T02:55:00.07367Z"
}

4.イシュアトークンの取得

3で取得した課金IDを基にQR事業者側の支払い画面を呼び出します。
レスポンスで各決済事業者での支払いURLが発行されるので、そのURLを消費者側に表示すれば支払いに進みます。※http_getの場合
※テストモードだと実際のURLは発行されず、"issuer_token": "test"というレスポンスが返却されます。

レスポンスbody例）

{
  "issuer_token": "http://test.com/action",
  "call_method": "http_post",
  "payload": { 
     "test_parameter": "test_value"
  }
  "payment_type": "online"
}

5.取得したURLを実行

4で取得したイシュアトークンをcall_methodに従い実行します。

※d払いOnlineの場合のみ、POSTリクエストを送信する際は、Content-Typeは application/x-www-form-urlencodedにする必要があります。