Skip to content

Commit 2bd545e

Browse files
jorgecasarjorgecasar
committed
Improve docs and implement PaymentRequest interface methods
1 parent 67d5876 commit 2bd545e

File tree

5 files changed

+234
-40
lines changed

5 files changed

+234
-40
lines changed

‎bower.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
{
22
"name": "payment-request",
33
"description": "Payment request API implementation in Polymer",
4-
"main": "payment-request.html",
4+
"main": [
5+
"payment-request.html",
6+
"payment-item.html"
7+
],
58
"dependencies": {
69
"polymer": "Polymer/polymer#^1.4.0"
710
},

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66

77
<title>payment-request</title>
88

9-
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
9+
<script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
1010

1111
<link rel="import" href="../iron-component-page/iron-component-page.html">
1212
</head>
1313
<body>
14-
<iron-component-page src="payment-request.html"></iron-component-page>
14+
<iron-component-page src="payment-request-all.html"></iron-component-page>
1515
</body>
1616
</html>

‎payment-item.html‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,29 +22,35 @@
2222
is: 'payment-item',
2323

2424
properties: {
25+
/**
26+
* This is a human-readable description of the item.
27+
* The user agent may display this to the user.
28+
*/
2529
label: String,
30+
/**
31+
* A valid decimal monetary value containing a monetary amount of the item.
32+
*/
2633
value: Number,
34+
/**
35+
* A string containing a currency identifier of the item.
36+
* The value of currency can be any string that is valid within
37+
* the currency system indicated by currencySystem.
38+
*/
2739
currency: String,
40+
/**
41+
* Contain the monetary amount for the item.
42+
*/
2843
amount: {
2944
type: Object,
45+
readOnly: true,
3046
computed: '_computeAmount(value, currency)'
31-
},
32-
data: {
33-
type: Object,
34-
computed: '_computeData(label, amount)'
35-
},
47+
}
3648
},
3749
_computeAmount: function(value, currency) {
3850
return {
3951
value: value,
4052
currency: currency
4153
};
42-
},
43-
_computeData: function(label, amount) {
44-
return {
45-
label: label,
46-
amount: amount
47-
};
4854
}
4955
});
5056
</script>

‎payment-request-all.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<link rel="import" href="payment-request.html">
2+
<link rel="import" href="payment-item.html">

‎payment-request.html‎

Lines changed: 209 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,64 @@
2727

2828
is: 'payment-request',
2929

30+
/**
31+
* Fired when begin user interaction for the payment request.
32+
*
33+
* @event payment-response
34+
* @param {PaymentResponse} paymentResponse The payment information to process.
35+
*/
36+
37+
/**
38+
* Fired when the payment request is aborted
39+
*
40+
* @event payment-aborted
41+
*/
42+
43+
/**
44+
* Fired when payment request generate an error.
45+
*
46+
* @event error
47+
* @param {Error} error The request error.
48+
*/
49+
50+
/**
51+
* Fired when browser not support payment request API.
52+
*
53+
* @event not-supported
54+
*/
55+
56+
/**
57+
* Fired when PaymentRequest object can be used to make a payment.
58+
*
59+
* @event can-make-payment
60+
*/
61+
62+
/**
63+
* Fired when PaymentRequest object cannot be used to make a payment.
64+
*
65+
* @event cannot-make-payment
66+
*/
67+
68+
3069
properties: {
31-
networks: Array,
32-
types: Array,
33-
currency: String,
34-
value: Number,
70+
/**
71+
* This is a human-readable description of the total.
72+
* The user agent may display this to the user.
73+
*/
3574
label: String,
75+
/**
76+
* A valid decimal monetary value containing a monetary amount of the total
77+
*/
78+
value: Number,
79+
/**
80+
* A string containing a currency identifier of the total.
81+
* The value of currency can be any string that is valid within
82+
* the currency system indicated by currencySystem.
83+
*/
84+
currency: String,
85+
/**
86+
* Contains line items for the payment request that the user agent may display.
87+
*/
3688
items: {
3789
type: Array,
3890
value: function() {
@@ -41,22 +93,59 @@
4193
readOnly: true,
4294
observer: '_updateTotal'
4395
},
96+
/**
97+
* Contains the total amount of the payment request.
98+
*/
4499
total: {
45100
type: Object,
46101
value: function() {
47102
return {};
48103
},
49104
readOnly: true
50105
},
106+
/**
107+
* Card supported networks
108+
*/
109+
networks: Array,
110+
/**
111+
* Card supported types
112+
*/
113+
types: Array,
114+
/**
115+
* Is used to indicate a set of supported payment methods and
116+
* any associated payment method specific data for those methods.
117+
*/
51118
methodData: {
52119
type: Array,
120+
readOnly: true,
53121
computed: '_computeMethodData(networks, types)'
54122
},
123+
/**
124+
* Provides information about the requested transaction.
125+
*/
55126
details: {
56127
type: Object,
128+
readOnly: true,
57129
value: function() {
58130
return {};
59131
},
132+
},
133+
134+
lastCanMakePayment: {
135+
type: Boolean,
136+
readOnly: true
137+
},
138+
lastPaymentRequest: {
139+
type: Object,
140+
readOnly: true
141+
},
142+
lastPaymentResponse: {
143+
type: Object,
144+
readOnly: true
145+
},
146+
lastError: {
147+
type: Object,
148+
readOnly: true
60149
}
61150
},
62151

@@ -69,7 +158,7 @@
69158
this._updateTotal();
70159
var buyButton = Polymer.dom(this.$.buyButton).getDistributedNodes()[0];
71160
if ('PaymentRequest' in window) {
72-
this.listen(buyButton, 'tap', 'processPurchase');
161+
this.listen(buyButton, 'tap', 'show');
73162
} else {
74163
buyButton.disabled = true;
75164
this.dispatchEvent(
@@ -84,18 +173,6 @@
84173
}
85174
},
86175

87-
processPurchase: function() {
88-
this.paymentRequest().show()
89-
.then(function(payment) {
90-
this.fire('payment', payment);
91-
})
92-
.catch(function(error) {
93-
this.dispatchEvent(
94-
new CustomEvent('error', error)
95-
);
96-
});
97-
},
98-
99176
_updateItems: function() {
100177
var newItems = Array.prototype.slice.call(
101178
Polymer.dom(this.$.item).getDistributedNodes()
@@ -116,7 +193,10 @@
116193
}
117194
this._observeItems();
118195
this._setItems(newItems.map(function(item){
119-
return item.data
196+
return {
197+
label: item.label,
198+
amount: item.amount
199+
};
120200
}));
121201
},
122202

@@ -146,31 +226,134 @@
146226
currency: this.currency || (this.items.length && this.items[0].amount.currency) || 'USD'
147227
});
148228
}
149-
this._setTotal(total.data);
229+
this._setTotal({
230+
label: total.label,
231+
amount: total.amount
232+
});
150233
},
151234

152235
_computeMethodData: function() {
153236
var methodData = [];
154-
if (this.networks.length > 0) {
237+
if (this.networks.length) {
155238
methodData.push({
156239
supportedMethods: this.networks
157240
});
158-
methodData.push({
159-
supportedMethods: ['basic-card'],
160-
data: {supportedNetworks: this.networks, supportedTypes: this.types},
161-
});
241+
if (this.types.length) {
242+
methodData.push({
243+
supportedMethods: ['basic-card'],
244+
data: {
245+
supportedNetworks: this.networks,
246+
supportedTypes: this.types
247+
}
248+
});
249+
}
162250
}
163251
return methodData;
164252
},
165253

166254
_computeDetails: function(total, items) {
167255
this.set('details.total', total);
256+
this.notifyPath('details.total.label');
257+
this.notifyPath('details.total.amount.value');
258+
this.notifyPath('details.total.amount.currency');
168259
this.set('details.displayItems', items);
169260
},
170261

262+
/**
263+
* Construct a PaymentRequest using the supplied methodData list including any
264+
* payment method specific data, the payment details, and the payment options
265+
*
266+
* @return {PaymentRequest}
267+
*/
171268
paymentRequest: function() {
172-
debugger;
173-
return new PaymentRequest(this.methodData, this.details);
269+
this._setLastPaymentRequest(new PaymentRequest(this.methodData, this.details));
270+
return this.lastPaymentRequest;
271+
},
272+
273+
/**
274+
* Determine if the PaymentRequest object can be used to make a payment.
275+
*
276+
* @return {Promise}
277+
*/
278+
canMakePayment: function() {
279+
return (this.lastPaymentRequest || this.paymentRequest()).canMakePayment()
280+
.then(function(canMakePayment) {
281+
this._setLastError(null);
282+
this._setLastCanMakePayment(canMakePayment);
283+
if (canMakePayment) {
284+
event = 'can';
285+
} else {
286+
event = 'cannot';
287+
this._setLastPaymentRequest(null);
288+
}
289+
this.dispatchEvent(new CustomEvent(event + '-make-payment', {
290+
detail: canMakePayment
291+
}));
292+
}.bind(this))
293+
.catch(function(error) {
294+
this._setLastError(error);
295+
this.dispatchEvent(
296+
new CustomEvent('error', {
297+
detail: error
298+
})
299+
);
300+
}.bind(this));
301+
},
302+
303+
/**
304+
* Begin user interaction for the payment request.
305+
*
306+
* @return {Promise}
307+
*/
308+
show: function() {
309+
return (this.lastPaymentRequest || this.paymentRequest()).show()
310+
.then(function(paymentResponse) {
311+
this._setLastError(null);
312+
this._setLastPaymentResponse(paymentResponse);
313+
this.dispatchEvent(
314+
new CustomEvent('payment-response', {
315+
detail: paymentResponse
316+
})
317+
);
318+
}.bind(this))
319+
.catch(function(error) {
320+
this._setLastError(error);
321+
this._setLastPaymentRequest(null);
322+
this._setLastPaymentResponse(null);
323+
this.dispatchEvent(
324+
new CustomEvent('error', {
325+
detail: error
326+
})
327+
);
328+
}.bind(this));
329+
},
330+
331+
/**
332+
* Abort the payment request
333+
* @return {Promise}
334+
*/
335+
abort: function() {
336+
if (this.lastPaymentRequest) {
337+
return this.lastPaymentRequest.abort()
338+
.then(function() {
339+
this._setLastError(null);
340+
this._setLastPaymentRequest(null);
341+
this._setLastPaymentResponse(null);
342+
this.dispatchEvent(
343+
new CustomEvent('payment-aborted')
344+
);
345+
}.bind(this))
346+
.catch(function(error) {
347+
this._setLastError(error);
348+
this.dispatchEvent(
349+
new CustomEvent('error', {
350+
detail: error
351+
})
352+
);
353+
}.bind(this));
354+
} else {
355+
// TODO: dispatch event to inform that there aren't any payment process.
356+
}
174357
}
175358

176359
});

0 commit comments

Comments
 (0)