OLD | NEW |
(Empty) | |
| 1 <h1>In-App Payments Service</h1> |
| 2 |
| 3 <p class="warning"> |
| 4 This service is currently available to Chrome users on the |
| 5 <a href="http://www.chromium.org/getting-involved/dev-channel">dev channel</a>. |
| 6 </p> |
| 7 |
| 8 <table class="intro"> |
| 9 <tr> |
| 10 <td><strong>Description:</strong></td> |
| 11 <td>Use the In-App Payments Service to sell digital and virtual goods within
a Chrome app.</td> |
| 12 </tr> |
| 13 <tr> |
| 14 <td><strong>Availability:</strong></td> |
| 15 <td>Chrome 29</td> |
| 16 </tr> |
| 17 <tr> |
| 18 <td><strong>Sample:</strong></td> |
| 19 <td><a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/
in-app-payments">in-app-payments</a></td> |
| 20 </tr> |
| 21 <tr> |
| 22 <td><strong>Learn more:</strong></td> |
| 23 <td> |
| 24 <a href="https://support.google.com/chrome_webstore/answer/1053354">Google W
allet</a>; <br> |
| 25 <a href="https://developers.google.com/commerce/wallet/digital/docs/">Google
Wallet for Digital Goods</a></td> |
| 26 </tr> |
| 27 </table> |
| 28 |
| 29 <h2 id="overview">Overview</h2> |
| 30 |
| 31 <p> |
| 32 You can use the In-App Payments Service to sell digital and virtual goods within
your app. |
| 33 When you use the In-App Payments Service, the Chrome Wallet App, which is embedd
ed in Chrome, communicates with the |
| 34 <a href="https://support.google.com/chrome_webstore/answer/1053354">Google Walle
t</a> |
| 35 servers and handles all the required checkout details, so your app does not have
to process any financial transactions. |
| 36 The In-App Payments Service requires you to package a JavaScript file, |
| 37 <a href="https://raw.github.com/GoogleChrome/chrome-app-samples/master/in-app-pa
yments/buy.js">buy.js</a>, |
| 38 with your app to trigger the purchase flow. |
| 39 </p> |
| 40 |
| 41 <h2 id="flow">Purchase flow</h2> |
| 42 |
| 43 <p> |
| 44 When a customer clicks a "Buy" button in your app to make a purchase, the Chrome
Wallet App displays a payment processing window |
| 45 on top of your application window: |
| 46 </p> |
| 47 |
| 48 <img src="{{static}}/images/in-app-payments-review.png" |
| 49 width="569" |
| 50 alt="screenshot: in-app-payments review dialog"> |
| 51 |
| 52 <p> |
| 53 When the user clicks the "Buy" button in the payment processing window, the Goog
le Wallet server processes the payment |
| 54 and displays a purchase confirmation dialog to the user, as shown below. |
| 55 The success or failure callback in your app is invoked 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 Service</h2> |
| 103 |
| 104 <p>Using the In-App Payments Service in an app is similar to using the |
| 105 <a href="https://developers.google.com/commerce/wallet/digital/docs/">Google Wal
let for 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. These differences are summarized b
elow and described in detail in the |
| 109 integration steps. |
| 110 </p> |
| 111 |
| 112 <ul> |
| 113 <li>You can use pre-generated JSON Web Tokens (JWTs) in your app, rather than
using a server to generate the tokens.</li> |
| 114 |
| 115 <li>You must package the <a href="https://raw.github.com/GoogleChrome/chrome-a
pp-samples/master/in-app-payments/buy.js">buy.js</a> |
| 116 library with your app, and load the library from its location in your package.
</li> |
| 117 |
| 118 <li>You must call the <code>buy()</code> method with an extra parameter called
<code>parameters</code>.</li> |
| 119 |
| 120 <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> |
| 121 </ul> |
| 122 |
| 123 <p>Follow these steps to use the In-App Payments Service in your app:</p> |
| 124 |
| 125 <ol> |
| 126 <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> |
| 127 <div class="indent-small"> |
| 128 You can generate JWTs using a server, or you can pre-generate JWTs for use
in your app. |
| 129 <p class="warning"> |
| 130 Note: If you use pre-generated JWTs, you should generate the JWTs outside
of your app, and include |
| 131 the generated tokens in your app. |
| 132 <strong>NEVER</strong> include the Seller secret you use to generate token
s in your app. |
| 133 If you need to generate JWTs dynamically, you should use a server. |
| 134 </p> |
| 135 </div> |
| 136 </li> |
| 137 |
| 138 <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. |
| 139 <div class="indent-small"> |
| 140 Due to the security restrictions in the |
| 141 <a href="https://developer.chrome.com/extensions/contentSecurityPolicy.htm
l">Content Security Policy</a> for Chrome apps, |
| 142 you cannot include the <a href="https://raw.github.com/GoogleChrome/chrome
-app-samples/master/in-app-payments/buy.js">buy.js</a> |
| 143 library from an external location. Instead, you must package the library w
ith your app, and load it from the packaged location. |
| 144 </div> |
| 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 <div class="indent-small"> |
| 149 Success and failure callback handlers let your app react to the purchase f
low's completion. |
| 150 </div> |
| 151 </li> |
| 152 |
| 153 <li><a href="https://developers.google.com/commerce/wallet/digital/docs/tutori
al#4">Call buy().</a> |
| 154 <div class="indent-small"> |
| 155 When a customer clicks a "Buy" button in your app, call <code>buy()</code>
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 </div> |
| 164 </li> |
| 165 |
| 166 <li>(Optional) <a href="https://developers.google.com/commerce/wallet/digital/
docs/tutorial#5">Acknowledge purchase notification.</a> |
| 167 <div class="indent-small"> |
| 168 You can specify a postback URL to make sure that the customer has paid for
an item. |
| 169 </div> |
| 170 </li> |
| 171 |
| 172 <li><a href="https://developers.google.com/commerce/wallet/digital/docs/tutori
al#6">Get set up as a seller on Google Wallet.</a> |
| 173 <div class="indent-small"> |
| 174 You must sign up for Google Wallet for digital goods in order to use the I
n-App Payments Service. |
| 175 </div> |
| 176 </li> |
| 177 |
| 178 <li><a href="https://developers.google.com/commerce/wallet/digital/docs/tutori
al#7">Switch to the production server.</a> |
| 179 <div class="indent-small"> |
| 180 Switch from the sandbox server to the production server and test your app
using real credit cards. |
| 181 </div> |
| 182 </li> |
| 183 </ol> |
| 184 |
| 185 <h2 id="recurring">Recurring billing</h2> |
| 186 |
| 187 <p>The In-App Payments Service supports automated recurring billing. To set up r
ecurring billing, follow the |
| 188 instructions for setting up |
| 189 <a href="https://developers.google.com/commerce/wallet/digital/docs/subscription
s">subscriptions</a> |
| 190 for the Google Wallet for Digital Goods API, |
| 191 but note again the differences described above (you can use pre-generated JWT to
kens; |
| 192 you must package <a href="https://raw.github.com/GoogleChrome/chrome-app-samples
/master/in-app-payments/buy.js">buy.js</a> |
| 193 with your app; and you must specify an additional parameter in the call to <code
>buy()</code>). |
| 194 |
| 195 <h2 id="sample-app">Sample app</h2> |
| 196 |
| 197 <p> |
| 198 For a simple app that demonstrates how to use the In-App Payments Service, see: |
| 199 </p> |
| 200 |
| 201 </ul> |
| 202 <li><a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/in
-app-payments">source code</a></li> |
| 203 <li><a href="https://chrome.google.com/webstore/detail/moldiohggmfllblgmikpeoa
gipenlcae">published app</a> (requires Chrome 29 or higher)</li> |
| 204 </ul> |
| 205 |
| 206 <p> |
| 207 You can install and run the published app from the Chrome Web Store to try out t
he in-app payment purchase flow. |
| 208 The app has options to use either the production server or the sandbox server. W
hen testing with the sandbox server, |
| 209 use these <a href="https://developers.google.com/commerce/wallet/digital/docs/te
sting">test credit card numbers</a>, |
| 210 which pass basic checks by the Google Wallet for Digital Goods system. |
| 211 </p> |
OLD | NEW |