Rails / jQuery – PayPalフォームをJSでsubmitする

やりたいこと

  • PayPalフォームをボタンサブミットでなく、任意のページにリダイレクトさせてからsubmitしたい
  • 任意のページ上でカスタムパラメータを付与させる

実装例

Viewフォーム(html.slim)

PayPal管理画面などから取得できるHTMLのソースコードべた張りでOK。submitボタンと画像部分だけ取り除き、代わりにJavaScriptを書く。


javascript:
  $(document).ready(function() {
    $("#js-form").submit();
  });
  $(document).on("click", '.js-submit-link', function(){
    $("#js-form").submit();
  });

p 決済画面に転送中です。しばらくお待ちください。
p 
    |画面が切り替わらない場合は、
     a.js-submit-link href="#"こちら
    |をクリックして決済画面へ移動して下さい。 

form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="js-form" target="_top"
    = hidden_field_tag :cmd, "_s-xclick"
    = hidden_field_tag :hosted_button_id, HOSTED_BUTTON_ID
    = hidden_field_tag :custom, {"KEY": "VALUE"}.to_json

ポイント

  • HOSTED_BUTTON_IDは各自の値を入れる
  • カスタムパラメータは input name=”custom” にJSONで渡す

注意点①

Railsのform_withなどを使うとRailsで以下のエラーが出るが、PayPalのHTMLのソースコードべた張りすれば解決できる。

No 'Access-Control-Allow-Origin' header is present on the requested resource.

注意点②

Ajaxでフォーム提出しようとするとJSコンソールで以下のエラーが出るが、PayPalのHTMLのソースコードべた張りすれば解決できる。

Failed to load (URL): Response for preflight is invalid 

IPNカスタムパラメータの受け取り

上記フォームで設定したカスタムパラメータはPayPal IPNのcustomフィールドに文字列で入ってくる。以下のようにJSON.parseすればハッシュとして扱うことができる。


custom_params = JSON.parse paypal_ipn["custom"]
custom["KEY"] # "VALUE"

Sources

兵庫県西宮市生まれのフリーランスRailsエンジニア。海外を拠点にデジタルノマド生活中。/ 前職・資格:公認会計士 / プログラミング言語:Ruby, JavaScript, HTML, CSS / 日本語・英語
コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です