サイトからMonacaアプリに戻る方法

前提・実現したいこと

クレジット決済サイトからMonacaアプリの"kanryo.html"ページ戻りたいです。

発生している問題・エラーメッセージ

動作フロー
①「クレジット決済ページ」クリック→決済会社のクレジット決済ページ
②ユーザーがクレジット情報入力
③決済が完了「次へ」をクリック→Monacaアプリの"kanryo.html"を表示

上記のような動作フローを行いたいのですが③が出来ません
アプリ内で決済サイトを開いている為、"kanryo.html"と指定しましたが
「https://kanryo.htmlは見当たらりません」とエラーが出てきます。
サイトからMonacaアプリのページへ戻るときのURLをご教示いただきたいです。

該当のソースコード

html
1<FORM METHOD="POST" ACTION="https://*****.cgi" TARGET=""_blank"">
2<INPUT TYPE="hidden" NAME="url" VALUE="kanyo.html">
3<INPUT TYPE="hidden" NAME="str" VALUE="次へ">
4<INPUT TYPE="submit" VALUE="クレジット決済ページ"></FORM>

補足情報（FW/ツールのバージョンなど）

プラットフォーム:Monaca

最近わかりましたがサイトはWKwebviewで開いているそうです。
wkwebviewからアプリページに戻る方法をご教示いただきたいです。

イメージしやすいように資料にしました。

試したこと

ディープリンク機能かと思い、「Monaca・ディープリンク」検索で
ヒットした記事を参考に、<INPUT TYPE="hidden" NAME="url" VALUE="kanyo.html">の
VALUEを「monaca-app://monaca.io/www/kanyo.html」にしましたが
「https://monaca-app://monaca.io/www/index.htmlは見当たりません」とエラーが出ました。
※1 ディープリンクはデバッカーでできないためビルドしました
※2 config.xml内の設定は変更しました。
<preference name="scheme" value="monaca-app"/> <preference name="hostname" value="monaca.io"/>

行動規範の内容に同意します

回答5件

下記の事が参考になるかも知れません。
※javascriptのwindow.open()とwindow.close()を使う。
新しいページを立ち上げる。
https://techacademy.jp/magazine/23824
window.open()
https://www.sejuku.net/blog/48540
↓
window.close()
https://www.javadrive.jp/javascript/webpage/index3.html
または、
http://www6.plala.or.jp/mamoho/HTML/lesson6/tojiru.html

iosのWKWebView（アプリで必須になっています）は曲者なので、下記を参考にしてください。
WKWebViewで新しいウィンドウ（タブ）を開く　※swift
https://qiita.com/m__ike_/items/f2f9edf1dd9dfad70f13
cordova-plugin-inappbrowser おそらくは_blankが効かない可能性があります。
https://press.monaca.io/takuya/4767
https://github.com/apache/cordova-plugin-inappbrowser　最新版を取得

以上です。ご参考ください。

投稿2021/08/05 14:08

編集2021/08/06 05:22

mogu_ba

総合スコア10

K_3578

2021/08/06 05:29

横槍して申し訳ないのですが、複数の回答を作るのでは無く、追記する形にすれば良かったのでは？後、リンクを貼るならMarkDownのリンク機能を使えばいいのではと思いました。

行動規範の内容に同意します

追伸ですが、iframeでの分割がいいように思えるので提案します。

iframeページで、違和感ないようにするには、
iframeを利用して、上を決済会社のページにして、スクロールバーを表示させ、決済ページの内容が全て見れるようにします。（外部ページ）
下には、iframeで、ボタンページを設置し、決済が終わりましたら下のボタンを押して戻って下さいの文言をボタンの上に入れます。（内部ページ）

ご参考ください。

html5はiframeの参考ページ：
https://teratail.com/questions/334775
https://www.conifer.jp/html5-frameset.html
※スクロールバーを指定する
http://lab.agr.hokudai.ac.jp/useful/TAG/g3_iframe.htm
https://www.tagindex.com/html_tag/frame/

投稿2021/07/22 09:25

mogu_ba

総合スコア10

bobobobo

2021/08/03 03:47 編集

ご回答頂きありがとうございます！返信が遅くなってしまい申し訳ありません、、 iframeは良いと思いましたが決済会社が禁止しており使えませんでした。。現在の進捗について決済会社と話をして、決済完了後の表示を自分で作ったHTMLファイルにしていただけるとのことでした。なのでmogu_ba様が提案頂いた history.goをHTMLに組み込みうまくページ移動できないかトライしております！備考 Window.closeは使えませんでした、、色々とご協力いただきありがとうございます。また進展ありましたらご連絡したいと思います。まだ完成していないため、もしよろしければまたご協力の程よろしくお願いいたします????‍♂️

行動規範の内容に同意します

アプリ外のWEBページに行って、ページを指定してもアプリ内ページに戻れないないので、
javascriptの戻る方法を利用するのは如何でしょうか？
https://phpjavascriptroom.com/?t=js&p=history_go
のように、決済ページの先でjavascriptの戻る方法が利用できるのでしたら、幾らか前に戻ることも可能になります。
自分のアプリでは、ヘルプページが外部サーバにあるので、上記機能を利用して、アプリ内ページに戻っています。

投稿2021/07/13 13:25

mogu_ba

総合スコア10

bobobobo

2021/07/17 03:11

ご回答いただきありがとうございます。ヘルプページも内部で作成されたものという認識でよろしかったでしょうか？今回決済サービスサイトが決済会社のサイトのためページを触ることができません。サイトにFormでパラメータを決済会社の用意したCGIに送信して変換する形になります。 URLを送信して、決済会社サイト内にURLが埋め込まれる流れになります。いろいろアドバイス頂いているのに制約が多くて大変申し訳ありません引き続き何かアイデア等ありましたらご教示いただけたら幸いです。申し訳ありませんがよろしくお願いいたします。

mogu_ba

2021/07/22 07:07

すみません。回答が遅れまして。ヘルプページは、サーバーに設置してあります。また、DBもそのサーバーに設置してあり、データをアプリとサーバーでやり取りしています。（Ajaxで）外部決済サーバーの場合、指定タグで、URLを指定する方法とかがあるのでしょうが、自分の場合なら、そのタグにURLではなくて、javascriptのwindow.closeとか設置して元のページを表示させるとか、戻るとかのスクリプトを記載して試します。上手くいけば、内部ページに繋げられるでしょう。それが出来ないのなら、フレームページにして、決済が完了したら、内部の別ページに行けるボタンを上部ボタンフレームに設置するのが手軽でいいと思います。

行動規範の内容に同意します

特にプラグインは使用せずに実現できます。
自分の場合は、動画広告からの戻りですが、普通のHTMLのように、location.href とか、history.back()を用いて戻ります。
ポイントは、決済ページへ行くための特別なページを作成することのように思えます。
そこで、分岐をjavascriptで書いて、最初は、決済ページへのリンク、そこから戻ってきて決済ができたのなら、アプリの別ページに飛ばすなんてことができます。決済できていないのなら、エラー表示かフォームの再表示とかです。
それか、「htmlのフレーム」を作成しておいて、アプリ内戻る？ボタンは決済ページ表示の上にでも付けておくかです。個人のプロフィール作成画面はそうしています。
尚、ios、android,cordova10です。

投稿2021/07/11 10:19

mogu_ba

総合スコア10

bobobobo

2021/07/11 13:51

mogu_baさん丁寧にご回答頂きありがとうございます。 >『htmlのフレーム」を作成しておいて、アプリ内戻る？ボタンは >決済ページ表示の上にでも付けておくかです。 →決済会社仕様のフレームに依存している為　URL以外の変更、追加等がが不可です泣 →location.hrefでURLを取得し、取得したのを　埋め込みましたが「見当たりません」と出てしまいました他にアドバイス等ありましたらご教示いただけたら幸いです。よろしくお願いします。、

行動規範の内容に同意します

丸投げですが、MonacaアプリでカスタムURLスキーマを実装するの記事のようにアプリ側でカスタムURLを用意して、そのURLを指定する手順になります。

投稿2021/07/11 09:05

seastar3

総合スコア2287

bobobobo

2021/07/11 09:18

seastar3さん早急なご回答ありがとうございます！載せていただいた記事を実行しようと思いましたがCórdoba10に代わってから Custom-URL-scheme プラグインが無くなってしまい参考にできず、、、そのためどこで設定できるかがわからないため Cordova10になってはまったこと　を参考にしましたができませんでした https://qiita.com/kishisuke/items/ac34ee472098f7fdefc5 もしご存じな場合、Cordova10にアップしてからのMonacaでの URLして方法をご教示いただけないでしょうか。どこにも記事がなく、、、素人質問になり申し訳ありません。よろしくお願いいたします。

seastar3

2021/07/11 13:21 編集

経験不足で申し訳ありません。この記事は、参考になりませんか？「MonacaからCustom Schemeプラグインがリリースされてた」https://qiita.com/kishisuke/items/df8b20a78e9d6843ab01

bobobobo

2021/07/11 21:51 編集

seastar3さん記事の送付いただきありがとうございます。 (monaca-app://monaca.io/www/index.html) これでやってみたのですが https://monaca-app://monaca.io/www/index.html)はありませんって出ました泣記事を見ていくとiosはできますがAndroidの場合はwebブラウザからアクセスしようとするため確認ができないとのことです汗他何かご存知またはこうじゃないか等のご意見がありましたら言っていただけたら幸いです。よろしくお願いいたします

行動規範の内容に同意します

あなたの回答