Apple Pay Webサイトに組み込む

サンプルコード

Apple Pay on the Web のサンプルコードは下記ページをご参照ください。 また、実際にApple Pay決済が可能な端末をお持ちの場合に動作確認を行なっていただくこともできます。

サンプルコード

動作確認ページ

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

payjp.js の読み込み

Apple Payを利用するサイトのページに payjp.js ライブラリを読み込みます。

<script type="text/javascript" src="https://js.pay.jp/">

ライブラリにAPIキーを設定しておきます。

Payjp.setPublicKey("pk_test_0383a1b8f91e8a6e3ea0e2a9");

payjp.jsの利用方法については下記ドキュメントも合わせてご参照ください。

PAY.JP - payjp.js

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]の章をご参照ください

https://developer.apple.com/reference/applepayjs/applepaysession

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

https://developer.apple.com/apple-pay/web-human-interface-guidelines/

Apple Pay on the Web が利用可能か判定する

Webサイト表示時に、ユーザーがApple Payが利用可能かを判定します。 Payjp.applePay.checkAvailabilityを呼び出して、引数に結果を受け取るコールバック関数を指定します。 コールバック関数に返された結果が true だった場合に、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);

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

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

キー名 説明
countryCode 必須 ISO 3166 で定められている2文字の国コード。日本は JP
currencyCode 必須 ISO 4217 で定められている3文字の通過コード。日本円は JPY
total 必須 labelとamountをもつ合計金額のオブジェクト
var paymentRequest = {
  countryCode: 'JP',
  currencyCode: 'JPY',
  total: {
    label: 'PAY.JP SAMPLE',
    amount: '1000'
  }
};

上記以外のパラメータについては、AppleのPaymentRequestのドキュメントをご参照ください https://developer.apple.com/reference/applepayjs/paymentrequest

ただし、Appleのドキュメントに記述されているパラメータのうち、merchantCapabilitiessupportedNetworksについては、Payjpライブラリで適切な値を追加してから処理を行うため、ここで指定する必要はありません。

ApplePaySessionを作成する

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

ApplePaySessionを作成するには、Payjp.applePay.buildSessionを呼び出します。 この関数の呼び出しは、必ずclickイベントなどユーザーの操作を起点にして行う必要があります。 引数には、ペイメントリクエストオブジェクト、成功時のコールバック関数、エラー発生時のコールバック関数の3つを指定します。

function onClick(event){
  var session = Payjp.applePay.buildSession(paymentRequest, function(result){
    // 成功時の処理
    // 詳しくは後述
    session.completePayment(ApplePaySession.STATUS_SUCCESS);
  },function(e) {
    // エラー発生時の処理
  });
  session.begin();
}
document.getElementById('apple-pay-button').addEventListener('click', onClick);

ApplePaySessionの結果を受け取る

成功時

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

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

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

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

var session = Payjp.applePay.buildSession(paymentRequest,
  function (result) {
    // サーバーにPAY.JPのトークンを渡して、決済完了後にApple Payのペイメントシートを閉じる
    $.post( "/your_server_endpoint", { token: result.token.id }).done(function() {
      session.completePayment(ApplePaySession.STATUS_SUCCESS);
    }).fail(function() {
      session.completePayment(ApplePaySession.STATUS_FAILURE);
    });
  },
  function (e) {
    // エラー発生時の処理
  }
);

エラー発生時

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

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

その他のイベントや操作

Payjp.applePay.buildSessionメソッドから取得したApplePaySessionオブジェクトから発生するイベントや、各種操作を行うメソッドについては、ApplePaySessionの公式ドキュメントもご参照ください。

https://developer.apple.com/reference/applepayjs/applepaysession

サーバーサイドの実装

PAY.JPトークンをサーバーへ送信し、サーバーサイドで実際の支払い処理を実行します。 サーバーサイドの構成はPAY.JPドキュメント内の

を参照してください。