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