博多南ウェブサービスのblog

博多南ウェブサービスのサービス紹介

【Play Framework 2.8.x と PayPay for Developers サンプル】ウェブペイメント時の画面遷移を、PC、Mobile Device で統一したい

Play Framework を始めたばかりの方向けに、サンプルを進めるうえで困ったところを共有する目的で書いています。

Play Framework 2.8.x と paypayopa-sdk-java 1.0.3 を使って、ウェブペイメント-即時売上時の画面遷移を、PC、Mobile Device で統一したときのメモです。

以下、目次

環境

前提

  • PC の場合、支払い画面 ⇒ リダイレクト の画面遷移は同じタブ(ブラウザ)
  • Mobile Device の場合、PayPay アプリ有りだと、支払い(アプリ)⇒ 新しいタブにリダイレクト(ブラウザ)
  • Mobile Device の場合、PayPay アプリ無しだと、支払い画面 ⇒ リダイレクト の画面遷移は同じタブ(ブラウザ)

設計

  • Mobile Device (アプリ有り)において、元のタブにリダイレクトは保証できない
  • なら、支払い時は常に新しいタブ ⇒ thanks ページにリダイレクト ⇒ 一定時間後タブを閉じるであれば、画面遷移が統一されるはず

結果

  • PC、Mobile Device ともに、「支払い ⇒ 新しいタブへのリダイレクト ⇒ 自動で閉じる」 and 「元のタブは、focus イベント ⇒ 確認画面へ遷移」と統一できた

やっててつまづいたこと

  • (javascript) addEventListener() に渡す listener は、引数を自由にとれない?
  • (javascript) setTimeout(window.close, 5000)setTimeout(window.close(), 5000) とで、addEventListener() に登録した際、動作がちがう!!
  • 支払い(アプリ)⇒ 新しいタブにリダイレクト(ブラウザ)の際、リダイレクト URL には、ポート番号が指定できない(PayPay アプリ 3.23.1 の場合)(ポート番号の区切り文字 (:) がエンコード (%3A) されて指定されるため)

参考にしたところ

GitHubこちら

以上でした。