chrome/common/extensions/docs/templates/articles/google_wallet.html

   1 <h1>Google Wallet for Digital Goods</h1>
   2
   3 <table class="intro">
   4   <tr>
   5     <td><strong>Description:</strong></td>
   6     <td>Use Google Wallet for digital goods to sell digital and virtual goods within a Chrome app.</td>
   7   </tr>
   8   <tr>
   9     <td><strong>Availability:</strong></td>
  10     <td>Chrome 29</td>
  11   </tr>
  12   <tr>
  13     <td><strong>Sample:</strong></td>
  14     <td><a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/in-app-payments">in-app-payments</a></td>
  15   </tr>
  16   <tr>
  17     <td><strong>Learn more:</strong></td>
  18     <td>
  19     <a href="https://support.google.com/chrome_webstore/answer/1053354">Google Wallet</a><br>
  20     <a href="https://developers.google.com/commerce/wallet/digital/docs/">Google Wallet for Digital Goods</a><br>
  21     <a href="http://www.youtube.com/watch?v=Z3jryGggMCs">How-to Video</a></td>
  22   </tr>
  23 </table>
  24
  25 <h2 id="overview">Overview</h2>
  26
  27 <p>
  28 You can use Google Wallet for digital goods to sell digital and virtual goods within your app.
  29 The Google Wallet for digital goods client app, which is embedded in Chrome, communicates with the
  30 <a href="https://support.google.com/chrome_webstore/answer/1053354">Google Wallet</a>
  31 servers and handles all the required checkout details, so your app does not have to process any financial transactions.
  32 Google Wallet for digital goods requires you to package a JavaScript file,
  33 <a href="https://raw.github.com/GoogleChrome/chrome-app-samples/master/in-app-payments/buy.js">buy.js</a>,
  34 with your app to trigger the purchase flow.
  35 </p>
  36
  37 <h2 id="flow">Purchase flow</h2>
  38
  39 <p>
  40 When a customer clicks a "Buy" button in your app to make a purchase, Google Wallet for digital goods displays a payment processing window
  41 on top of your application window:
  42 </p>
  43
  44 <img src="{{static}}/images/wallet-review.png"
  45      width="694"
  46      alt="screenshot: Google Wallet review dialog">
  47
  48 <p>
  49 When the user clicks the "Buy" button in the payment processing window, the Google Wallet server processes the payment
  50 and displays a purchase confirmation dialog to the user, as shown below.
  51 The success or failure callback in your app is invoked appropriately.
  52 </p>
  53
  54 <img src="{{static}}/images/wallet-confirmation.png"
  55      width="694"
  56      alt="screenshot: Google Wallet confirmation dialog">
  57
  58 <p>
  59 If the user is not signed up for Google Wallet, Google Wallet for digital goods takes the user through the sign-up flow:
  60 </p>
  61
  62 <img src="{{static}}/images/wallet-set-up.png"
  63      width="694"
  64      alt="screenshot: Google Wallet set up dialog">
  65
  66 <h2 id="sample-code">Sample code</h2>
  67
  68 <p>
  69 The following code snippet illustrates how to initiate the purchase flow in an app.
  70 The parameters for the <code>buy()</code> method are described below.
  71 </p>
  72
  73 <pre>
  74 google.payments.inapp.buy({
  75   parameters: {},
  76   jwt: 'eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiIxNDIwNDk' +
  77        '1MzA5NDM1MjE2ODU3MSIsImF1ZCI6Ikdvb2dsZSI' +
  78        'sInR5cCI6Imdvb2dsZS9wYXltZW50cy9pbmFwcC9' +
  79        'zdWJzY3JpcHRpb24vdjEiLCJpYXQiOjEzNTg0NTc' +
  80        'yNjksImV4cCI6MjM1ODQxMjMzNDMsInJlcXVlc3Q' +
  81        'iOnsiaW5pdGlhbFBheW1lbnQiOnsicHJpY2UiOiI' +
  82        'xMC41MCIsImN1cnJlbmN5Q29kZSI6IlVTRCIsInB' +
  83        'heW1lbnRUeXBlIjoicHJvcmF0ZWQifSwicmVjdXJ' +
  84        'yZW5jZSI6eyJwcmljZSI6IjQuOTkiLCJjdXJyZW5' +
  85        'jeUNvZGUiOiJVU0QiLCJzdGFydERhdGUiOiIxMzU' +
  86        '4NDYzMjY5IiwiZnJlcXVlbmN5IjoibW9udGhseSI' +
  87        'sIm51bVJlY3VycmVuY2VzIjoiMTIifSwibmFtZSI' +
  88        '6IlBpZWNlIG9mIENha2UiLCJkZXNjcmlwdGlvbiI' +
  89        '6IkEgZGVsaWNpb3VzIHBpZWNlIG9mIHZpcnR1YWw' +
  90        'gY2FrZSIsInNlbGxlckRhdGEiOiJZb3VyIERhdGE' +
  91        'gSGVyZSJ9fQ.sXd39R7MNNfDFa-jnlTNu2C2te-_' +
  92        'x9--87Phfdr5GrE',
  93   success: logSuccess,
  94   failure: logFailure
  95 });
  96 </pre>
  97
  98 <h2 id="how-to">How to use Google Wallet for digital goods</h2>
  99
 100 <p>Using Google Wallet for digital goods in a Chrome App is similar to using the
 101 <a href="https://developers.google.com/commerce/wallet/digital/docs/">Google Wallet for digital goods API</a> in a web site.
 102 The integration steps below are based on the
 103 <a href="https://developers.google.com/commerce/wallet/digital/docs/tutorial">Google Wallet for digital goods tutorial</a>,
 104 but there are a few key differences for apps. These differences are summarized below and described in detail in the
 105 integration steps.
 106 </p>
 107
 108 <ul>
 109   <li>You can use pre-generated JSON Web Tokens (JWTs) in your app, rather than using a server to generate the tokens.</li>
 110
 111   <li>You must package the <a href="https://raw.github.com/GoogleChrome/chrome-app-samples/master/in-app-payments/buy.js">buy.js</a>
 112   library with your app, and load the library from its location in your package.</li>
 113
 114   <li>You must call the <code>buy()</code> method with an extra parameter called <code>parameters</code>.</li>
 115
 116   <li>The UI to process payments is displayed in a separate window on top of your application window, rather than in an iframe.</li>
 117 </ul>
 118
 119 <p>Follow these steps to use Google Wallet for digital goods in your app:</p>
 120
 121 <ol>
 122   <li><a href="https://developers.google.com/commerce/wallet/digital/docs/tutorial#1">Generate a JSON Web Token (JWT) for each item to be purchased.</a>
 123     <div class="indent-small">
 124       You can generate JWTs using a server, or you can pre-generate JWTs for use in your app.
 125       <p class="warning">
 126       Note: If you use pre-generated JWTs, you should generate the JWTs outside of your app, and include
 127       the generated tokens in your app.
 128       <strong>NEVER</strong> include the Seller secret you use to generate tokens in your app.
 129       If you need to generate JWTs dynamically, you should use a server.
 130       </p>
 131     </div>
 132   </li>
 133
 134   <li>Include <a href="https://raw.github.com/GoogleChrome/chrome-app-samples/master/in-app-payments/buy.js">buy.js</a> in your app.
 135     <div class="indent-small">
 136       Due to the security restrictions in the
 137       <a href="contentSecurityPolicy.html">Content Security Policy</a> for Chrome Apps,
 138       you cannot include the <a href="https://raw.github.com/GoogleChrome/chrome-app-samples/master/in-app-payments/buy.js">buy.js</a>
 139       library from an external location. Instead, you must package the library with your app, and load it from the packaged location.
 140     </div>
 141   </li>
 142
 143   <li><a href="https://developers.google.com/commerce/wallet/digital/docs/tutorial#3">Create success and failure callback handlers.</a>
 144     <div class="indent-small">
 145       Success and failure callback handlers let your app react to the purchase flow's completion.
 146     </div>
 147   </li>
 148
 149   <li><a href="https://developers.google.com/commerce/wallet/digital/docs/tutorial#4">Call buy().</a>
 150     <div class="indent-small">
 151       When a customer clicks a "Buy" button in your app, call <code>buy()</code> to initiate the purchase flow.
 152       <p>
 153       For Apps, you must call <code>buy()</code> with an extra parameter called <code>parameters</code>.
 154       This parameter currently has one field, <code>env</code>, which specifies the environment in which to process a payment.
 155       You can set this field to either <code>prod</code> (production server that accepts real credit cards), or
 156       <code>sandbox</code> (test server that accepts test credit cards to simulate transactions).
 157       The default setting is <code>sandbox</code>.
 158       </p>
 159     </div>
 160   </li>
 161
 162   <li>(Optional) <a href="https://developers.google.com/commerce/wallet/digital/docs/tutorial#5">Acknowledge purchase notification.</a>
 163     <div class="indent-small">
 164       You can specify a postback URL to make sure that the customer has paid for an item.
 165     </div>
 166   </li>
 167
 168   <li><a href="https://developers.google.com/commerce/wallet/digital/docs/tutorial#6">Get set up as a seller on Google Wallet.</a>
 169     <div class="indent-small">
 170       You must sign up for Google Wallet in order to use Google Wallet for digital goods.
 171     </div>
 172   </li>
 173
 174   <li><a href="https://developers.google.com/commerce/wallet/digital/docs/tutorial#7">Switch to the production server.</a>
 175     <div class="indent-small">
 176       Switch from the sandbox server to the production server and test your app using real credit cards.
 177     </div>
 178   </li>
 179 </ol>
 180
 181 <h2 id="recurring">Recurring billing</h2>
 182
 183 <p>Google Wallet for digital goods supports automated recurring billing. To set up recurring billing, follow the
 184 instructions for setting up
 185 <a href="https://developers.google.com/commerce/wallet/digital/docs/subscriptions">subscriptions</a>
 186 for the Google Wallet for digital goods API,
 187 but note again the differences described above (you can use pre-generated JWT tokens;
 188 you must package <a href="https://raw.github.com/GoogleChrome/chrome-app-samples/master/in-app-payments/buy.js">buy.js</a>
 189 with your app; and you must specify an additional parameter in the call to <code>buy()</code>).
 190
 191 <h2 id="sample-app">Sample app</h2>
 192
 193 <p>
 194 For a simple app that demonstrates how to use Google Wallet for digital goods, see:
 195 </p>
 196
 197 </ul>
 198   <li><a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/in-app-payments">source code</a></li>
 199   <li><a href="https://chrome.google.com/webstore/detail/moldiohggmfllblgmikpeoagipenlcae">published app</a> (requires Chrome 29 or higher)</li>
 200 </ul>
 201
 202 <p>
 203 You can install and run the published app from the Chrome Web Store to try out the in-app payment purchase flow.
 204 The app has options to use either the production server or the sandbox server. When testing with the sandbox server,
 205 use these <a href="https://developers.google.com/commerce/wallet/digital/docs/testing">test credit card numbers</a>,
 206 which pass basic checks by the Google Wallet for digital goods system.
 207 </p>