スタート ガイド

このチュートリアルでは、ウェブ アプリケーションで Google In-App Payments API を使用する方法について説明します。

目次

1: 販売者としてセットアップする

アプリ内ペイメントにまだログインしていない場合はログインします。販売者識別情報と販売者秘密情報を取得します。

次に、Google アカウントをまだお持ちでない方が登録するための手順を説明します。Google アカウントをお持ちの方は、そのアカウントでログインします。既に Google Checkout 販売アカウントをお持ちの方はそのアカウントでログインし、登録手順はスキップしてください。

注: これはサンドボックス環境での登録手順であるため、本番環境で必要な手順がいくつか省略されています。

  1. 次のリンクから開始します:
    アプリ内ペイメントにログイン(サンドボックス)
    次のようなメッセージが表示されます:
    [Google Checkout販売を行うにはGoogle Checkout にご登録ください]
  2. [いいえ。これらの他のサービスは使用していません。] を選択します。
    画面に次のように表示されます:
    [Google Checkout 用の新しい Google アカウントを作成します]
  3. フォームに入力して新しい Google アカウントを作成します。
    実際のメール アドレスを使用します(Gmail 以外でも可)。
    パスワードを設定し、キャプチャを入力し、Google アカウントの登録フォームを送信します。
    画面に次のように表示されます:
    [Google Checkout: お客様の業務内容をお知らせください。]
  4. フォームに入力して新しい Google Checkout 販売アカウントを作成します。ヒントは次のとおりです:
    [連絡先情報]
    サンドボックスの統合についてご連絡できるように、正確に入力してください。
    [公開連絡先情報]
    このフォームを送信するにはこのフィールドに入力する必要がありますが、サンドボックスでは使用されません。
    [財務情報]
    売り上げ高は [1,000 ドル未満] で問題ありません。[クレジット情報] の最も手軽なオプションは [連邦納税者番号] です。不明な場合は、「12-2345679」と入力してください(ただし、本番環境では無効です)。
    [利用規約]
    必ずこのチェックボックスをオンにしてください。
  5. [登録を完了する] ボタンをクリックして、新しい Google Checkout アカウントの申し込みフォームを送信します。
    画面に次のように表示されます:
    [アプリ内ペイメントの設定]
    これで登録作業は完了です。
  6. サンドボックスの設定ページにアクセスして、販売者識別情報と販売者秘密情報を取得します。

トップへ戻る

2 (サーバー): JWT(JSON Web Token)を生成する

In-App Payments API では、JWT(JSON Web Token の略、英単語の「jot」のように発音)を使用して、購入可能な商品を表します。JWT はエンコードされた署名入りの JSON オブジェクトです。

JWT の記述方法については、次のデモをご覧ください:

アプリ内ペイメントのデモ

ヒント: デモで作成された JWT と比較して、取得した JWT をテストできます。

秘密鍵(販売者秘密情報)を使用して JWT に署名するため、サーバー側のコードを使用して JWT を生成する必要があります。ライブラリを使用する方法が最も簡単です。

次の例では、高価な仮想のケーキの JWT を生成します。

Ruby
ruby-jwt ライブラリ(作成者: progrium)を使用(リンク先は英語):
@cakeToken = JWT.encode(
  {
    "iss" => sellerIdentifier,
    "aud" => "Google",
    "typ" => "google/payments/inapp/item/v1",
    "exp" => (Time.now + 3600).to_i,
    "iat" => Time.now.to_i,
    "request" => {
      "name" => "Piece of Cake",
      "description" => "Virtual chocolate cake to fill your virtual tummy",
      "price" => "10.50",
      "currencyCode" => "USD",
      "sellerData" => "user_id:1224245,offer_code:3098576987,affiliate:aksdfbovu9j"
    }
  },
  SELLER_SECRET )
Python
pyjwt ライブラリ(作成者: progrium)を使用(リンク先は英語):
cakeToken = jwt.encode(
  {
    "iss" : sellerIdentifier,
    "aud" : "Google",
    "typ" : "google/payments/inapp/item/v1",
    "exp" : int(time.time() + 3600),
    "iat" : int(time.time()),
    "request" :{
      "name" : "Piece of Cake",
      "description" : "Virtual chocolate cake to fill your virtual tummy",
      "price" : "10.50",
      "currencyCode" : "USD",
      "sellerData" : "user_id:1224245,offer_code:3098576987,affiliate:aksdfbovu9j"
    }
  },
  SELLER_SECRET)
Java
jsontoken ライブラリを使用:
private String getJWT() throws InvalidKeyException, SignatureException {
  JsonToken token = null;
  token = createToken();
  return token.serializeAndSign();
}

private JsonToken createToken() throws InvalidKeyException{
  //Current time and signing algorithm
  Calendar cal = Calendar.getInstance();
  HmacSHA256Signer signer = new HmacSHA256Signer(ISSUER, null, SIGNING_KEY.getBytes());

  //Configure JSON token
  JsonToken token = new JsonToken(signer);
  token.setAudience("Google");
  token.setParam("typ", "google/payments/inapp/item/v1");
  token.setIssuedAt(new Instant(cal.getTimeInMillis()));
  token.setExpiration(new Instant(cal.getTimeInMillis() + 60000L));

  //Configure request object
  JsonObject request = new JsonObject();
  request.addProperty("name", "Piece of Cake");
  request.addProperty("description", "Virtual chocolate cake to fill your virtual tummy");
  request.addProperty("price", "10.50");
  request.addProperty("currencyCode", "USD");
  request.addProperty("sellerData", "user_id:1224245,offer_code:3098576987,affiliate:aksdfbovu9j");

  JsonObject payload = token.getPayloadAsJsonObject();
  payload.add("request", request);

  return token;
}
PHP
jwt ライブラリ(作成者: luciferous)を使用(リンク先は英語):
$payload = array(
  "iss" => $sellerIdentifier,
  "aud" => "Google",
  "typ" => "google/payments/inapp/item/v1",
  "exp" => time() + 3600,
  "iat" => time(),
  "request" => array (
    "name" => "Piece of Cake",
    "description" => "Virtual chocolate cake to fill your virtual tummy"
    "price" => "10.50",
    "currencyCode" => "USD",
    "sellerData" => "user_id:1224245,offer_code:3098576987,affiliate:aksdfbovu9j",
  )
);
$cakeToken = JWT::encode($payload, $sellerSecret);

生成する JWT のフィールドと値について詳しくは、JWT 本文のリファレンス ドキュメントをご覧ください。

トップへ戻る

3 (クライアント): API ライブラリを読み込む

In-App Payments API に依存するページはすべて、API ライブラリを読み込む必要があります。次に例を示します:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('payments', '1.0', {
  'packages': ['sandbox_config']
});
</script>

google.load の使用について詳しくは、Google ローダー デベロッパー ガイドをご覧ください。

トップへ戻る

4 (クライアント): コールバック ハンドラを作成する

購入フローが完了したときにアプリケーションで対応する必要がある場合、クライアント側コードで 2 つのコールバック関数を定義します:

success ハンドラ
この関数は、注文が正常に完了したときに呼び出されます。
failure ハンドラ
この関数は、注文が正常に完了しなかったときに、理由に関わらず呼び出されます。一般に、クレジットカードの承認が失敗した場合やユーザーが注文を完了しなかった場合に発生します。

注: これらのコールバック ハンドラではセキュリティが確保されていません。Firebug または Chrome デベロッパー ツールを使用していずれかの関数を呼び出し、成功または失敗を偽装できます。サーバーで購入を確認する必要があります。

次のコードは、コールバック ハンドラの宣言と変数への割り当て方法を示しています。クライアントの UI を Flash に実装している場合は、[Flash] タブをクリックして、コールバック ハンドラを ActionScript ハンドラに関連付ける方法をご覧ください。

JavaScript
次のサンプル コードのように、これらの関数を変数に割り当てます。
//Success handler
var successHandler = function(purchaseAction){
  if (window.console != undefined) {
    console.log("Purchase completed successfully.");
    ...
  }
}

//Failure handler
var failureHandler = function(purchaseActionError){
  if (window.console != undefined) {
    console.log("Purchase did not complete.");
    ...
  }
}
Flash
各コールバック関数は、ExternalInterface(リンク先は英語)で公開した SWF で ActionScript ハンドラ関数を呼び出す必要があります。次に、ActionScript ハンドラ関数を呼び出す JavaScript コールバック関数の例を示します:
//JavaScript success handler
var successHandler = function(purchaseAction) {
  var flashContainer = document.getElementById("flash-container");
  if(flashContainer) {
    flashContainer.successHandlerInFlash();
  }
}

//JavaScript failure handler
var failureHandler = function(purchaseAction) {
  var flashContainer = document.getElementById("flash-container");
  if(flashContainer) {
    flashContainer.failureHandlerInFlash();
  }
}

次の ActionScript コードは、ExternalInterface で ActionScript ハンドラ関数を公開する方法を示しています:

//Expose ActionScript success handler
if(ExternalInterface.available) {
  ExternalInterface.addCallback("successHandlerInFlash", function():void {
    ExternalInterface.call("console.log", "successHandlerInFlash called");
  });
}

//Expose ActionScript failure handler
if(ExternalInterface.available) {
  ExternalInterface.addCallback("failureHandlerInFlash", function():void {
    ExternalInterface.call("console.log", "failureHandlerInFlash called");
  })
}

トップへ戻る

5 (クライアント): buy() を呼び出す

顧客がアプリケーションの [Buy] ボタンをクリックすると、buy() が呼び出されます。この関数を呼び出すと購入フローが開始され、購入フローの iframe と(必要に応じて)ポップアップが作成されます。

JavaScript
次に、ボタンの onClick ハンドラで buy() を呼び出す例を示します。
function purchase(){
  ...
  goog.payments.inapp.buy({
    'jwt'     : generatedJwt,
    'success' : successHandler,
    'failure' : failureHandler
  });
}

<button class="buy-button"
  id="buybutton1" name="buy" type="button"
  onClick="purchase()">
  Buy
</button>
Flash
アプリケーションを Flash で実装している場合、次のように buy() を呼び出す JavaScript 関数を定義する必要があります:
//JavaScript:
function purchase(){
  ...
  goog.payments.inapp.buy({
    'jwt'     : generatedJwt,
    'success' : successHandler,
    'failure' : failureHandler
  });
}
 

次に、ExternalInterface を使用して ActionScript コードからその JavaScript 関数を呼び出す必要があります。次の例をご覧ください:

//ActionScript:
buyButton.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void {
  if(ExternalInterface.available) {
    ExternalInterface.call("purchase");
  }
});

重要: ExternalInterface を説明どおりに機能させるには、Flash の allowScriptAccess 埋め込み属性を設定する必要があります。値は「always」か「sameDomain」のいずれかを指定します。SWF コンテンツで iframe の描画に問題が発生した場合は、Flash の wmode 埋め込み属性を変更してみます。

重要: API ライブラリが読み込まれていない場合、buy() の呼び出しは失敗します。この問題を回避するには、ステップ 3 で Google ローダーの callback オプションを使用し、ボタンの onClick ハンドラを指定します。google.load() でオプションの設定を使用する方法について詳しくは、Google ローダー デベロッパー ガイドをご覧ください。

取引が完了すると、アプリ内ペイメント システムがクライアント側のコールバック ハンドラを呼び出し、取引についてサーバーに通知します。

トップへ戻る

6 (サーバー): 購入通知に応答する

購入者が商品の代金を支払ったことを確認するには、ポストバック URL を指定する必要があります。これにより、購入が完了すると Google からポストバック URL 宛てに HTTP POST メッセージが送信されます。サーバーはこの POST メッセージに応答する必要があります。応答しないと、取引がキャンセルされます。

ポストバック URL を指定するには、サンドボックスの設定ページにアクセスします。

ポストバック URL を設定すると、取引が正常に完了したときに Google が HTTP POST メッセージを送信します。メッセージの本文には、jwt というパラメータが 1 つだけ存在し、これには buy() の呼び出し時に指定した JSON のコピーと注文 ID が含まれています。

次に、HTTP POST メッセージの JWT から取得した JSON の例を示します:

JSON
{ 
  "iss" : "Google",
  "aud" : "1337133713371337",
  "typ" : "google/payments/inapp/item/v1/postback/buy",
  "iat" : "1309988959",
  "exp" : "1409988959",
  "request" :{
    "name" : "Piece of Cake",
    "description" : "Virtual chocolate cake to fill your virtual tummy",
    "price" : "10.50",
    "currencyCode" : "USD",
    "sellerData" : "user_id:1224245,offer_code:3098576987,affiliate:aksdfbovu9j"
  }
  "response": {
    "orderId": "3485709183457474939449"
  }
}

ヒント: JWT の内容を確認するには、インタラクティブな JWT デコーダーをお試しください。

購入が有効であることを確認するには、まずサーバーで POST 内の JWT をデコードする必要があります。購入が有効な場合、サーバーはその JWT を記録して注文 ID を含む 200 OK で応答する必要があります。詳しくは、ポストバックの処理をご覧ください。

重要: サーバーが 200 OK 応答を 10 秒以内に返さなかった場合、取引は自動的にキャンセルされます。

トップへ戻る

7: 本番サーバーに切り替える

これまでサンドボックス サーバーとやり取りしてきましたが、アプリ内ペイメントとの統合をテストできても実際に商品を販売することはできませんでした。このステップでは、サンドボックス サーバーから本番サーバーに切り替えて販売できるようにします。

本番サーバーに切り替えるには:

  1. 実際の販売アカウントをお持ちでない場合は取得します。本番環境のアプリ内ペイメント サーバーにログインします。どちらの操作も次の URL で実行できます:
    http://google.com/payments

  2. 次のページにアクセスします:
    本番環境の設定ページ

    このページで本番サーバー用のポストバック URLを設定し、本番環境の販売者識別情報販売者秘密情報を取得します。

  3. コード内のすべての販売者識別情報と販売者識別情報を、本番用の値に変更します。この値は、JWT の「iss」フィールドや「aud」フィールドを参照する場所のほか、JWT のエンコードまたはデコード用の秘密情報を指定した場所にあります。

  4. クライアント コードで、sandbox_configproduction_config に変更します:
    google.load('payments', '1.0', {
      'packages': ['production_config']
    });
    

これらの変更が完了したら、すべてが正常に機能していることを確認してください。

注: 本番サーバーでテストするには、本物のクレジットカードを使用する必要があります:テスト用カードはサンドボックス内では機能しますが、本番環境では無効です。

これで統合が完了しました。

In-App Payments API を通じて購入を処理するように、ウェブ アプリケーションが設定されました。

次へ: ポストバックの処理

トップへ戻る

認証が必要です

この操作には Google+ でのログインが必要です。

ログインしています...

この操作には Google デベロッパーに対する許可が必要です。