Help us understand the problem. What is going on with this article?

PayPalのIn-Context CheckoutをRestAPIで再現する

More than 3 years have passed since last update.

PayPalのエクスプレスチェックアウトをRestAPIで再現するの続編。

はじめに

PayPalが新しい機能をリリースしたという情報を頂いたので、さっそく使ってみる。新しい機能はIn-Context Checkoutと言って、Express Checkoutと違って自分のサイト内で決済ができる。Express Checkoutからの変更は簡単ということ(参照)だったが、予想通り簡単じゃなかった。

公式の手順

Express Checkoutを既に使っていれば、以下の2つを変更・追記するだけで完了する。
- Update your redirect URL to: https://www.paypal.com/checkoutnow/.
- Include the basic integration checkout.js.

実際の手順

(将来的に使わなくなると言われている)ClassicAPIは使いたくないので、今回もRestAPIでやってみた。苦労してなんとか動作確認も出来たが、In-Context Checkoutの正しい使い方じゃないかもしれない。

とりあえず、新しいライブラリが出てたのでアップデートする。たぶん、今回の件には関係がない。

<dependency>
  <groupId>com.paypal.sdk</groupId>
  <artifactId>rest-api-sdk</artifactId>
  <version>1.4.2</version>
</dependency>

それで、最初から躓く。
「すいません。your redirect URLって何でしょう?」

ここから回答編。
前回の記事でこのようなコードを書いた。

Payment createdPayment = payment.create(apiContext);
for (Links links : createdPayment.getLinks()) {
  if (links.getRel().equals("approval_url")) {
    return "redirect:"+links.getHref();
  }
}

このapproval_urllinks.getHref()こそがyour redirect URLである。すなわち
return "redirect:https://www.paypal.com/checkoutnow/"
とすれば良いのである・・・と思いきや、ここにも落とし穴がある。これではダメなのだ。

そもそも、approval_urllinks.getHref()にはtoken=EC-xxxxxxというリクエストパラメータが含まれている。このリクエストパラメータをIn-Context CheckoutのAPIエンドポイントに含める必要があるのだ。ちなみにこの情報は公式には載っていない(はず)。PayPalが提供しているデモを実際に動かして、そのリクエストパラメータを調査して見つけ出した。

実際に動かせるコードは以下になる。

Payment createdPayment = payment.create(apiContext);
for (Links links : createdPayment.getLinks()) {
  if (links.getRel().equals("approval_url")) {
    String tmp = links.getHref();
    tmp = tmp.replace("https://www.sandbox.paypal.com/cgi-bin/webscr", "https://www.sandbox.paypal.com/checkoutnow"); //sandbox用。本番では"sandbox"を取る。
    return "redirect:"+links.getHref();
  }
}

これだとEC-xxxx以外に余計なものも送ってしまうのだが、EC-xxxxだけ取り出せるようになっていないし、パースするの面倒なのでこうした。ちゃんと動くからいいでしょ。ちなみに、残りは前回の記事と同様で良い。

あとは対応するHTMLに以下を追記する。

<script>
  window.paypalCheckoutReady = function () {
    paypal.checkout.setup('Your-Merchant-ID', {
        environment: 'sandbox',
        button: 'paypalButton'
      });
  };
</script>
<script src="//www.paypalobjects.com/api/checkout.js" async="async"></script>

私はbuttonをsubmit属性にしているのでこのようになるが、formaを使っている場合はやり方が変わる。詳しくは公式を参照(ここはちゃんと情報あるよ、少なくともbuttonとformとaは)。Your-Merchant-IDPayPalのアカウントにログインして、「個人設定」を押下すればページの下の方で確認できる。本番ではenvironment: 'sandbox',を削除する。

さいごに

個人的にイケてないと思う所(素人目線)を挙げる。

言わずもがな、やはり公式の通りにやってもうまくはいかなかった。Classic APIユーザーだとすんなりいくのかもしれない。最近PayPalは長年のユーザーの不満(API関係の情報のわかりにくさ等)を解消しようと色々と努力しているらしい。今回の場合、王道を使っていなかった私に問題があるかもしれない。

個人的に、Javascriptにenvironment: 'sandbox'とわざわざ書くのはイケてないと思う。Javaプログラムの方は設定ファイルでsandboxと本番を簡単に切り替えられるように実装できるが、Javascriptはわざわざ書きなおさなければいけない。sandboxと本番の切り替えをする際、なるべく編集するところは少なくしたい。ただ、前述のとおり、もしかしたら私のIn-Context Checkoutの使い方が間違っているのかもしれない。・・・が、少なくとも私の実装方法においてはenvironmentの存在意義はないし、もっと言うとYour-Merchant-IDも不要である。あくまで素人意見です。

In-Context Checkoutについてはポップアップ型のチェックアウトということなので、たしかにその通りに動作する。Express Checkoutとの違いはポップアップするかどうかである。・・・たぶん、この微妙な差が購買活動において大きな差を生むのだと思う。そんな記事か論文を読んだことがある。個人的には、苦労して実装したもののUXの違いが微々たるものだったので感動はあまりなかった。・・・が、売上が上がれば正義なので、売上向上の役に立って欲しい(そもそも何も売ったことないので比較はできないのだけど)。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした