クレジットカード課金の寄付サイトを10分で作る Google In App Payments APIとJWTのサンプル

解説

Googleが提供するIn-App Paymentsを使ったサンプルです。サイトやWebアプリ内でクレジットカードまたはGooglePlayカードにて課金を行うことが出来ます。

本来ならばサーバー側で商品購入情報を生成したり購入結果を処理しなければいけないのですが、ここではサンプルの為、クライアント側でJWTを生成して購入結果はそのまま捨てています。特別なサーバーは使っていません。いわば匿名での寄付サイトです。

あくまで技術的実験情報としてご利用下さい。

JWTの生成にはjsjwsを利用しています。

動作デモ（実際には支払いはされません）

テスト用のサンドボックスサーバーでのデモです。実際には支払いされません。

準備

サンドボックスサーバーにて販売者アカウントを作成します。
サンドボックス設定ページにてSeller IDとSeller Secretを取得します。今回はPostbackURLは空欄にしておきます。
ソースコードのSELLER_IDとSELLER_SECRETを上記のSeller IDとSeller Secretに変更します。

ソースコード

<html><body>

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

<script src="http://kjur.github.io/jsrsasign/jsrsasign-4.1.4-all-min.js"></script>
<script src="http://kjur.github.io/jsjws/ext/json-sans-eval-min.js"></script>
<script src='http://kjur.github.io/jsjws/jws-3.0.min.js'></script>

<script>
    var iss=SELLER_ID
    var secret=SELLER_SECRET
    var now=Math.floor(new Date().getTime()/1000)
    var exp=now+60*60*24*365*10
    var head={alg:'HS256',type:'JWT'}
    var payload={ 
        "iss" : iss,
        "aud" : "Google",
        "typ" : "google/payments/inapp/item/v1",
        "exp" : exp,
        "iat" : now,
        "request" :{
             "name" : "寄付（テスト）",
            "description" : "カード番号は4111 1111 1111 1111でその他は適当に。テストサーバーなので課金はされません。",
            "price" : "10.50",
            "currencyCode" : "USD",
            "sellerData" : ""
        }
    }

    var key=rstrtohex(secret)
    var sJWS = KJUR.jws.JWS.sign(null, JSON.stringify(head), JSON.stringify(payload), key)

    function buy(){
        var purchaseContent={
            parameters: {},
            jwt: sJWS,
            success:function(result){
                var msg='支払いが完了しました（テスト）<br/>下の番号を控えておいてください<br/>'+result.response.orderId
                document.getElementById('status').innerHTML=msg
            },
            failure:function(result){
                document.getElementById('status').innerHTML='失敗しました。支払いは完了していません。'
            },
        }
        goog.payments.inapp.buy(purchaseContent)
    }

</script>

<input type='button' value='寄付（テスト）' onclick='buy()' />
<div id='status'></div>

</body></html>

本番サーバーへの移行と注意点

下記参考リンクをよく読んで本番サーバーの販売者設定を行い、packagesのsandbox_configを本番サーバー用に変更します。

概要 — Google Developers

今回は商品を販売しない寄付サイトの前提なのでクライアント側のJavascriptの中にSellerSecretが入っています。SellerSecretが読み取られるということは自由に商品の値段を変更して購入されうることを意味します。例えば将来においてこのアカウントを商品販売に使う場合、問題となりえます。この点ご理解の上、あくまで技術テストとして実験ください。どうしても本番サーバーで利用したい場合は予め生成したJWTを埋め込んでSellerSecretはHTMLに入れずに利用してください。これらのことがよくわからない場合は絶対に本番サーバーを使わないでください。

本来の商品購入においてはJWTをサーバー側で生成する必要があります。またPostbackURLに対して購入通知がGoogleから送られるので適切に処理しなければいけません。

この記事を見た人がよく読んでいる記事

節約テクノロジ >

トップページ

節約テクノロジ > クレジットカード課金の寄付サイトを10分で作る Google In App Payments APIとJWTのサンプル