Apple Pay on the Web をサイトに組み込む

Apple Pay on the Web は、macOS または iOS の Safari のみで特定の条件下でのみ利用できます。 詳しくはこちらをご覧ください。

サンプルコードCopy Anchor Link

Apple Pay on the Web のサンプルコードはこちらのHTMLを参照してください。また、実際に Apple Pay 決済が可能な端末をお持ちの場合は、こちらのURLで動作確認が可能です。

以下では、上記サンプルコードにおける実装の各ポイントについて解説します。

payjp.jsの利用Copy Anchor Link

Apple Pay を利用するサイトのページに payjp.js ライブラリを読み込み、公開鍵を登録します。

ライブラリの読み込み後、const payjp = Payjp('YOUR_KEY'); で公開鍵を登録してください。

バージョンCopy Anchor Link

適用される Apple Pay on the Web のバージョンは 2 となります。 詳しくは以下の公式ページを確認してください。

Apple Pay on the Web Version History

Apple Payボタンの設置Copy Anchor Link

下記のコードで最も基本的な Apple Pay のボタンを表示できます。

<style>
@supports (-webkit-appearance: -apple-pay-button) {
  .apple-pay-button {
    display: inline-block;
    -webkit-appearance: -apple-pay-button;
  }
  .apple-pay-button-black {
    -apple-pay-button-style: black;
  }
}
@supports not (-webkit-appearance: -apple-pay-button) {
  .apple-pay-button {
    display: inline-block;
    background-size: 100% 60%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 5px;
    padding: 0px;
    box-sizing: border-box;
    min-width: 200px;
    min-height: 32px;
    max-height: 64px;
  }
  .apple-pay-button-black {
    background-image: -webkit-named-image(apple-pay-logo-white);
    background-color: black;
  }
}
</style>
<div id="apple-pay-button"
  class="apple-pay-button apple-pay-button-black">
  <!--  -->
</div>

その他のデザインの Apple Pay ボタンについては、ApplePaySessionのドキュメント内のDisplaying the Apple Pay Buttonの章をご覧ください。

また Apple Pay ボタンの表示についてはAppleのガイドラインも合わせてご覧ください。

checkAvailabilityでApple Pay on the Web が利用可能か判定するCopy Anchor Link

Web サイト表示時にユーザーが Apple Pay を利用可能かを判定するため、 payjp.applePay.checkAvailability(listener: function) (v2 では payjp.applePay.checkAvailability)を利用します。

引数には結果を受け取るコールバック関数を指定します。 コールバック関数に返された結果が true の場合は Apple Pay が利用できるため、Apple Pay ボタンの表示を有効にしてください。

function checkAvailabilityHandler(available) {
  console.log(
    "apple pay availabirity checked: " + available
  );
  if (available) {
    // available=true の時にApple Payボタンを表示・有効化します
    document.getElementById(
      'apple-pay-button').style.display = 'inline-block';
  } else {
    document.getElementById(
      'apple-pay-button').style.display = 'none';
  }
}

payjp.applePay.checkAvailability(checkAvailabilityHandler);

checkAvailability() の処理内容は以下の通りです（処理順）。

ペイメントリクエストを作成するCopy Anchor Link

Apple Pay で行う決済の情報として使われるペイメントリクエストを作成します。ペイメントリクエストは下記のキーを持つ JavaScript の Object です。各キーはすべて必須です。

以下は例です。

const paymentRequest = {
  countryCode: 'JP',
  currencyCode: 'JPY',
  total: {
    label: 'PAY.JP SAMPLE',
    amount: '1000'
  }
};

上記以外のパラメーターについては、AppleのPaymentRequestのドキュメントを参照してください。なお、Apple のドキュメントに記述されているパラメーターのうち、merchantCapabilities、supportedNetworks については、Payjp ライブラリで適切な値を追加して処理を行うため、指定する必要はありません。

buildSessionでトークンを作成するCopy Anchor Link

ユーザーの支払いボタン押下時などでユーザーの画面にペイメントシートを表示するために、 payjp.applePay.buildSession(paymentRequest: object, success: function, failure: function) (v2 では payjp.applePay.buildSession)を呼び出します。

この関数の呼び出しは、必ず click イベントなどユーザーの操作を起点にして行う必要があります。 引数にはペイメントリクエストオブジェクト、成功時のコールバック関数、エラー発生時のコールバック関数の3つを指定します（コールバックの詳細は後述）。 戻り値はApplePaySessionのインスタンス（以下 session と表記）です。

session.begin() を実行するとユーザーの画面にペイメントシートが表示されます。 ユーザーが生体認証で決済を承認すると、PAY.JP トークンが作成され成功時のコールバック関数が呼び出されます。

function onClick(event){
  const session = payjp.applePay.buildSession(
    paymentRequest, function success(result) {
    // 成功時の処理
  }, function failure(e) {
    // エラー発生時の処理
  });

  session.begin();
}
document.getElementById(
  'apple-pay-button'
).addEventListener('click', onClick);

成功時Copy Anchor Link

成功時のコールバック関数には、下記のキーを含む結果オブジェクトが渡されます。

結果オブジェクトの内容を使ってサーバーサイドで決済処理を行います。 サーバーサイドの実装については、API 支払いを行うや各種SDKを利用ください。 処理完了後に session.completePayment メソッドを呼び出すことで、ユーザーの画面のペイメントシートを閉じ Apple Pay による決済を完了できます。 そのため、サーバーサイドの処理は Ajax を使って行う必要があります。 引数には、決済が成功した場合は ApplePaySession.STATUS_SUCCESS を、問題が発生して決済が成功していない場合には ApplePaySession.STATUS_FAILURE を指定してください。

PAY.JP トークンの ID をサーバーサイドに送り、結果を受け取って session.completePayment を呼び出す単純な例は下記のようになります。

function success(result) {
  // サーバーにPAY.JPのトークンを渡して、決済完了後にApple Payの
  // ペイメントシートを閉じる(以下コードはjQueryの事前読み込みが必要)
  $.post("/your_server_endpoint",
    { token: result.token.id }).done(function() {
    session.completePayment(ApplePaySession.STATUS_SUCCESS);
  }).fail(function() {
    session.completePayment(ApplePaySession.STATUS_FAILURE);
  });
}

エラー発生時Copy Anchor Link

エラー時のコールバック関数には、error オブジェクトを含んだ結果オブジェクトが渡されます。 error オブジェクトには下記の情報が含まれます。

なお、この場合は session.completePayment(ApplePaySession.STATUS_FAILURE) がライブラリ内で実行されるため、自分で実行する必要はありません。