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

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

サンプルコード

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

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

payjp.jsの利用

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

payjp.js のバージョンによって利用方法が異なります。

v1: ライブラリの読み込み後、Payjp.setPublicKey('YOUR_KEY'); で公開鍵を登録してください。
v2: ライブラリの読み込み後、const payjp = Payjp('YOUR_KEY'); で公開鍵を登録してください。以下のサンプルコードの Payjp とある部分を payjp に置き換えてください。

バージョン

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

Apple Pay on the Web Version History

Apple Payボタンの設置

下記のコードで最も基本的な 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 が利用可能か判定する

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() の処理内容は以下の通りです（処理順）。

判定内容	処理詳細	説明
https接続か否か	`window.location.protocol === 'https:'`	https接続の場合のみ利用可能です
Apple Payでの支払いをサポートしているブラウザか否か	window.ApplePaySessionの有無	Safari Desktop 10.0+ または Safari Mobile 10.0+ (2019/8/2時点)
Apple Payでの支払いをサポートしているデバイスか否か	canMakePayments	こちらを参照下さい
PAY.JPでApple Payの利用審査を通っているか否か	payjp.jsのretrieveAvailability()	本番利用申請を通過している必要があります
WalletにWebでの支払いが有効な1枚以上のカード登録があるか否か	canMakePaymentsWithActiveCard	こちらに記載のないカードの場合、Webでの支払いに使えない可能性があります。詳しくはカード発行会社に確認ください
ドメインが登録済みか	canMakePaymentsWithActiveCard	ドメイン登録にて登録済みのドメインでアクセスしているか確認してください

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

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

キー名	説明
countryCode	ISO 3166 で定められている2文字の国コード。日本は `JP`。
currencyCode	ISO 4217 で定められている3文字の通貨コード。日本円は `JPY`。
total	labelとamountをもつ合計金額のオブジェクト

以下は例です。

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

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

buildSessionで決済する

ユーザーの支払いボタン押下時などでユーザーの画面にペイメントシートを表示するために、 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);

成功時

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

キー名	内容	備考
token	PAY.JPトークンオブジェクト
shippingContact	商品配送先の情報	ペイメントリクエストに `requiredShippingContactFields` を指定した場合のみ含まれます
billingContact	請求先の情報	ペイメントリクエストに `requiredBillingContactFields` を指定した場合のみ含まれます

結果オブジェクトの内容を使ってサーバーサイドで決済処理を行います。サーバーサイドの実装については、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);
  });
}

エラー発生時

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

キー名	内容
code	エラーコード
message	エラーメッセージ
status	エラーステータスコード
type	エラー種別

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