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

• HTML Form Basics for PayPal Payments Standard
• Why my $.ajax showing “preflight is invalid redirect error”?
• Rails API: Access-Control-Allow-Origin error