Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(223)

Side by Side Diff: chrome/common/extensions/docs/templates/articles/in_app_payments.html

Issue 18186004: Added documentation for In-App Payments API. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: A few more minor revisions Created 7 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698