PayPalの決済処理で失敗したので、その備忘録

所沢市でWebサイトやECサイトなどを制作しているRishunTradingです。
今回は、PayPalの決済処理で、失敗する事象がありましたので、お恥ずかしいのですが、その備忘録です。

PayPal決済処理で失敗

PHPで処理を分岐し、前段の入力フォームに応じて決済金額が変わるPayPalを使った決済処理を実装しました。
決済後は、別のページに遷移する必要があるため、決済完了後(onApprove:)、｢window.location.href｣でリダイレクトするようにしたのですが、ここでエラーが起きておりました。

ちょっとはまったのですが、PayPalのJavaScriptSDKを確認していたところ原因が判明しました。
そのため、参考までにサンプルベースで記載しておきます。

onApprove関数について

‘onApprove’関数は、PayPalのJavaScriptSDKのクライアントサイド統合機能の一部です。
ユーザーがサイトで支払いを正常に承認した場合に実行されるコールバック関数となります。
そのため、’onApprove’関数を受け取ったら完了というわけではなく、支払いの確定(キャプチャ )を実行する必要があります。

以下、PayPalが提供しているサンプルを例に記載します。

‘onApprove’関数の部分のみ抜粋

        onApprove: function(data, actions) {
          return actions.order.capture().then(function(orderData) {
            
            // Full available details
            console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
  
            // Show a success message within this page, e.g.
            const element = document.getElementById('paypal-button-container');
            element.innerHTML = '';
            element.innerHTML = '<h3>Thank you for your payment!</h3>';
  
            // Or go to another URL:  actions.redirect('thank_you.html');
  
          });
        },

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

onApprove: function(data, actions) {

return actions.order.capture().then(function(orderData) {

// Full available details

console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));

// Show a success message within this page, e.g.

const element = document.getElementById('paypal-button-container');

element.innerHTML = '';

element.innerHTML = '<h3>Thank you for your payment!</h3>';

// Or go to another URL: actions.redirect('thank_you.html');

});

},

1.支払いの確定（キャプチャ）

actions.order.capture()は、ユーザーがPayPalプラットフォームで支払いを承認した後に支払いを確定（または「キャプチャ」）するために使用されます。このステップで、支払人のアカウントから受取人のアカウントへの資金が移動します。このメソッドは、キャプチャされた注文の詳細を含むオブジェクトに解決するPromiseを返却します。

return actions.order.capture().then(function(orderData) {
//・・・
});

2.決済ログ

デバッグ用のログです。(コンソール出力)

console.log(‘Capture result’, orderData, JSON.stringify(orderData, null, 2));

3.UIの更新

画面に表示する成功メッセージです。

const element = document.getElementById(‘paypal-button-container’);
element.innerHTML = ”;
element.innerHTML = ‘<h3>Thank you for your payment!</h3>’;