Integrate PaymentRequest (aka Web Payments) into Shop #70

afitz0 · 2016-08-26T22:28:46Z

Features included are:

'Buy Now' button added to detail pages when PaymentRequest (PR) is available.
All checkout buttons (e.g., from added-to-cart modal and on /cart) now check for PR and fire if available.
/checkout checks for PR on load and fires if available
Shipping options demonstrate having different options for different locations, including declining to ship outside of US.

This code is currently hosted here: https://web-payments-sample.firebaseapp.com/

Features included are: * 'Buy Now' button added to detail pages when PaymentRequest (PR) is available. * All checkout buttons (e.g., from added-to-cart modal and on /cart) now check for PR and fire if available. * /checkout checks for PR on load and fires if available * Shipping options demonstrate having different options for different locations, including declining to ship outside of US.

FluorescentHallucinogen · 2016-08-29T16:13:50Z

What about PaymentRequest Polymer element (web component)? ;) Something like:

<shop-payment-request
    currency="USD"
    supportedMethods='["visa", "mastercard", "amex", "discover", "maestro", "diners", "jcb", "unionpay", "bitcoin"]'
    requestPayerPhone="false"
    requestPayerEmail="true">
</shop-payment-request>

tjsavage · 2016-08-31T17:07:21Z

@frankiefu @keanulee @blasten WDYT?

afitz0 · 2016-08-31T17:39:07Z

FYI, I'm in the process of factoring this out into a shop-payment-request component as @FluorescentHallucinogen suggests. Updated PR will be coming soon.

FluorescentHallucinogen · 2016-08-31T19:41:07Z

@tjsavage

I believe that Web Payment API is an important part of Progressive Web Apps. See "The Mobile Web Is Open for Business" article for more info: https://goo.gl/eIBP3a

What about releasing full-featured Web Payment API web component? It can be part of Polymer Gold Elements (<gold-payment-request>) or Polymer Platinum Elements (<platinum-payment-request>).

afitz0 · 2016-08-31T21:15:34Z

Based on what's in gold and platinum already, Gold seems like a solid fit. Since I'm most of the way along factoring this out into <shop-payment-request> it's not a huge stretch to build it into its own web component instead.

kbwatts · 2016-08-31T21:41:44Z

This is awesome!

oneezy · 2016-08-31T21:50:51Z

I love hearing this!...Great job dude!!

blasten · 2016-08-31T22:07:27Z

I tried https://web-payments-sample.firebaseapp.com/ and the code, but if I click on buy now or checkout, it seems to keep redirecting indefinitely.

afitz0 · 2016-08-31T22:19:55Z

@blasten Looks like there was one remaining case where you could end up in an infinite loop trying to redirect to /checkout when PaymentRequest isn't available. I've addressed it here and pushed the change.

ddwag1 · 2016-09-04T04:47:16Z

woah, love it!

FluorescentHallucinogen · 2016-09-09T08:40:33Z

@afitz0, any progress on factoring this out into a <shop-payment-request>? ;)

afitz0 · 2016-09-09T18:00:47Z

@FluorescentHallucinogen, yup, plenty of progress. :) Just been waylaid by a number of other things recently. Should have an updated PR early next week.

afitz0 · 2016-09-26T20:36:10Z

PR updated to have most of the code in a <shop-payment-request>

FluorescentHallucinogen · 2016-09-27T07:47:51Z

@afitz0, well done!

The code of <shop-payment-request> is based on the code of one of the https://googlechrome.github.io/samples/paymentrequest/ samples that doesn't support shipping addresses outside US. People outside US can't test this demo (go to "Select shipping option" step) if they don't have US address added. IMO, it's no good.

Could you please fix this?

FluorescentHallucinogen · 2016-09-27T08:35:01Z

A bit off topic.

Anybody tried chrome://flags#scan-cards-in-web-payments flag? Now using Chrome Dev 55 on your mobile device, you can add a card details with your device camera. Instead of having to enter in your card details manually you can simply tap the camera button that’s displayed on screen and use your device’s camera to snap the picture of your card and have the details entered in automatically.

Notice the camera icon?

Unfortunately, I have no camera icon. WAIDW?

FluorescentHallucinogen · 2016-09-27T08:43:37Z

@tjsavage, @blasten, @frankiefu, I repeat my question.

What about official full-featured Web Payment API web component?

It can be part of Polymer Gold Elements (<gold-payment-request>) or Polymer Platinum Elements (<platinum-payment-request>).

WDYT? Any plans?

afitz0 · 2016-09-27T18:34:17Z

@FluorescentHallucinogen latest commit now permits shipping to non-US addresses. https://web-payments-sample.firebaseapp.com/ has been updated with the latest code (though you may need to clear caches).

FluorescentHallucinogen · 2016-09-28T10:55:54Z

LGTM

FluorescentHallucinogen · 2016-09-28T16:30:02Z

If the user click "Buy now" button, all items previously added to cart will be removed. Is it expected behavior?

1. When user taps "buy now" from item detail 2. When user tries to check out (cart was being erroneously re-initialized)

afitz0 · 2016-09-28T20:16:43Z

@FluorescentHallucinogen expected, but not desired. I've fixed that as well as a related but separate issue with the cart being incorrectly re-initialized.

blasten

@afitz0 Thanks a lot for the PR! I left a few comments.

blasten · 2016-10-04T18:37:29Z

src/shop-payment-request.html

+              } else if (err.name === 'NotSupportedError') {
+                that._redirectToCheckout();
+              } else {
+                console.error('Error while handling PaymentRequest.show(): ' + err);


In Chrome M53 and Canary, I receive an error of type UnknownError from the request API. Would it make sense to just check for err === 'Request cancelled' and call _redirectToCheckout otherwise?

That error, AFAICT, happens in the case that window.PaymentRequest exists but isn't actually implemented (as is the case in Chrome M53+ on !Android if you have chrome://flags#enable-experimental-web-platform-features on). A small edge case, for sure, but easy enough to handle. Done.

blasten · 2016-10-04T18:42:31Z

src/shop-app.html

@@ -19,6 +19,7 @@
 <link rel="import" href="../bower_components/iron-pages/iron-pages.html">
 <link rel="import" href="../bower_components/iron-selector/iron-selector.html">
 <link rel="import" href="shop-category-data.html">
+<link rel="import" href="shop-payment-request.html">


This seems like a good candidate for a lazy import. This import could be moved to src/lazy-resources.html

blasten · 2016-10-04T18:44:45Z

src/shop-app.html

@@ -366,6 +379,7 @@
        'add-cart-item': '_onAddCartItem',
        'set-cart-item': '_onSetCartItem',
        'clear-cart': '_onClearCart',
+        'process-payment': '_onProcessPayment',


nit: You could add this event listener to shop-payment-request. e.g. <shop-payment-request on-process-payment="_onProcessPayment" ..> That way, uses would know that the event came from shop-payment-request

blasten · 2016-10-04T18:54:56Z

src/shop-app.html

+      shop-payment-request provides the logic and hooks into the PaymentRequest API.
+    -->
+    <shop-payment-request
+        page="[[page]]"


Would it be possible to make this element a bit more general? One idea could be:

shop-payment-request exposes a request method. That method takes an array of items (cart items), the total and the currency.

shop-payment-request fires non-bubbling events for success & error. For the error event, the event's detail could contain the error type. e.g. 0: not supported, 1: request canceled, 2: other.

Generalized it a bit, following your suggestion. A quick followup could be (though I haven't yet) to pull out _updateShippingAddress into an app-specific callback, similar to process-payment as it has a lot of app-specific logic (i.e., logic around shipping costs).

blasten · 2016-10-04T19:01:10Z

src/shop-detail.html

+          size: this.$.sizeSelect.value
+        };
+
+        this.fire('buy-item', item);


The buy-item event could be handled by show-app which then can call this.$.payment.request(); assuming <shop-payment-request id="payment" ...>

Also buy-item might not need the item in the event's detail.

Unless I'm not seeing something in the event, buy-item needs the item included so that it can process the payment for that item in isolation. Otherwise we get into the business of cart manipulation for handling a single item, and I've opted to leave the cart alone for the "Buy Now" feature.

I see the intention now. That works as well.

blasten · 2016-10-04T19:03:36Z

src/shop-app.html

+        cart="[[cart]]"
+        total="[[total]]"
+        currency="USD"
+        supported-methods='["visa", "mastercard", "amex", "discover", "maestro", "diners", "jcb", "unionpay", "bitcoin"]'


nit:this could be the default for supported-methods

blasten · 2016-10-04T19:07:13Z

src/shop-detail.html

@@ -23,6 +23,19 @@

    <style include="shop-common-styles shop-button shop-select">

+      shop-button#buyNow > * {


q: is shop-button#buyNow > * needed to increase the specificity of the selector? would #buyNow > button work?

Yup. Fixed.

blasten · 2016-10-04T19:11:31Z

src/shop-checkout.html

@@ -493,6 +496,12 @@ <h2 id="billAddressHeading">Billing Address</h2>
        }
      },

+      _cartChanged: function() {
+        if (this.cart && this.cart.length > 0) {


nit: this check could be done in shop-app if you decide to handle buy-cart in that element.

blasten · 2016-10-04T19:14:05Z

src/shop-detail.html

+        width: 100%;
+      }
+
+      #buyNow:not([visible]) {


nit: it could be

[hidden] { display: none; }

and hidden$="[[!_hasPaymentRequest()]]"

blasten · 2016-10-04T19:23:13Z

src/shop-payment-request.html

+      _redirectToCheckout: function() {
+        // prevent reload loop if we're already on /checkout.
+        if (this.page !== 'checkout') {
+          location.href = '/checkout';


The redirection seems to be reloading the app. If the redirection were handled in shop-app, it would be possible to get a reference to the app-location and change the route: e.g. this.$.location.set('route.path', '/'); wdyt?

Makes sense to me. Moved to fire from shop-app.

FluorescentHallucinogen · 2016-10-10T18:48:20Z

@afitz0, would you mind updating your PR?

FluorescentHallucinogen · 2016-10-19T13:39:20Z

https://web-payments-sample.firebaseapp.com has been demonstrated alongside https://polykart-credential-payment.appspot.com at Polymer Summit 2016 — https://youtu.be/NDZw7vtoYnU :)

…dling

* Move shop-payment-request to lazy import * Shortend supported payment list (full list set as default) * Declare process-payment event as coming from shop-payment-request

* `shop-payment-request` is a bit more general now (e.g., by decoupling it from the cart's structure and the logic around "Buy Now" vs. "Buy Cart") * `_redirectToCheckout` in `shop-payment-request` no longer causes an app reload. * `shop-payment-request` fires coded `error` events on failure, and redirects for _all_ errors except `Request Cancelled`

FluorescentHallucinogen · 2016-10-20T18:20:50Z

@agektmr, could you please publish the source code of https://polykart-credential-payment.appspot.com?

agektmr · 2016-10-20T18:36:30Z

@FluorescentHallucinogen Yes, the code is continuation of @afitz0 as you may know. I need a little clean up but will send a PR once it's sorted.

agektmr · 2016-10-20T20:51:29Z

@FluorescentHallucinogen Which branch should I send a PR to? I need to rebase as I'm not sure from which point @afitz0 has forked this.

afitz0 · 2016-10-20T21:11:28Z

@agektmr I forked off master, and the latest commits in this PR bring it in sync.

blasten · 2016-10-31T19:02:58Z

src/shop-app.html

+        on-process-payment="_onProcessPayment"
+        on-error="_onPaymentError"
+        supported-methods='["visa", "mastercard"]'
+        android-pay='{"merchantName":"Android Pay Demo","merchantId":"12345678901234567890","environment":"TEST","allowedCardNetworks":["AMEX","DISCOVER","MASTERCARD","VISA"],"paymentMethodTokenizationParameters":{"tokenizationType":"GATEWAY_TOKEN","parameters":{"gateway":"stripe","stripe:publishableKey":"pk_live_abcdefghijklmnopqrstuvwx","stripe:version":"2016-07-06"}}}'>


this is a comment for myself since that might require a bit of refactoring: this could be move to a config file.

blasten

@afitz0 Sorry for the delay I took a week off. I left a few comments and I think this PR should be ready to merge. Hopefully, they shouldn't take that long.

blasten · 2016-10-31T19:08:03Z

src/shop-app.html

+        if ('PaymentRequest' in window && this.cart && this.numItems > 0) {
+          var itemDetails = [];
+
+          for (var i = 0; i < this.cart.length; ++i) {


nit: Array.map instead of for loop.

blasten · 2016-10-31T19:15:47Z

src/shop-payment-request.html

+
+      request: function(itemDetails, totalCost, currency, clearCartOnSuccess) {
+        if (!'PaymentRequest' in window) {
+          this._redirectToCheckout();


Could we fire the error event? That way, we could simplify this operation to a success/error message, then _onError could redirect depending on the status code.
A proposal:

Remove _redirectToCheckout

Fire error and specify theerror_code.

Also, this method could return a promise in the future.

blasten · 2016-10-31T19:21:51Z

src/shop-payment-request.html

+              if (err === 'Request cancelled') {
+                that.fire('error', {error_code: 0, message: err});
+              } else if (err.name == 'NotSupportedError') {
+                that.fire('error', {error_code: 1, message: err.message});


nit: 1 could be a constant. e.g. Polymer.ShopPaymentRequest.NOT_SUPPORTED = 1; that way the user could check for them in the error handler.

A proposal:

Polymer.ShopPaymentRequest = Polymer({ is: 'shop-payment-request', ... }); Polymer.ShopPaymentRequest.NOT_SUPPORTED = 1; ... ...

blasten · 2016-10-31T19:22:53Z

src/shop-payment-request.html

+              }
+            });
+        } catch (e) {
+          this._redirectToCheckout();


Fire error event.

blasten · 2016-10-31T19:23:44Z

src/shop-payment-request.html

+        return items;
+      },
+
+      _redirectToCheckout: function() {


it could be removed

blasten · 2016-10-31T19:25:30Z

src/shop-detail.html

@@ -283,6 +325,10 @@
        if (!offline) {
          this._tryReconnect();
        }
+      },
+
+      _hasPaymentRequest: function() {


it could be removed since the contract would just be this.$.payment.request() and the error/success events.

blasten · 2016-10-31T19:29:14Z

src/shop-app.html

+    -->
+    <shop-payment-request
+        id="payment"
+        on-process-payment="_onProcessPayment"


Minor nit: wdyt if we rename this event as success? My thinking is that it would be easier to grasp since the user would know that this is a binary operation.

frankiefu · 2016-10-31T19:36:53Z

I think this PR is deprecated and probably should be closed. Instead #91 is the one extending from this and have more stuffs.

blasten · 2016-10-31T19:48:58Z

Could #91 be rebased after making the changes here? @afitz0, @agektmr, @frankiefu wdyt? I can move the comments to #91 if that helps.

agektmr · 2016-11-01T00:32:01Z

If @afitz0 is ok, forking, making changes and sending PR to https://github.com/agektmr/shop/tree/credential-payment might be easier for me.

afitz0 · 2016-11-07T18:14:58Z

These changes have been merged into a pull request to @agektmr 's branch. Should allow us to continue this PR in #91 instead of here.

blasten · 2016-11-07T18:17:13Z

Fantastic, looking forward to it!

frankiefu · 2016-11-07T22:38:29Z

Closing this as #91 is the continuation of this.

Andrew Fitz Gibbon added 3 commits August 26, 2016 14:44

Merge remote-tracking branch 'upstream/master'

d17c730

Update announce on order success modal

b1d3aa6

Fix case where redirect loop to /checkout may occur

c9f04f1

Factor out most PaymentRequest logic into a component

52db06d

frankiefu assigned blasten Sep 26, 2016

frankiefu added this to the v1.1 milestone Sep 26, 2016

Allowing shipping to non-US addresses

c955ddc

Resolves cart being inadvertently cleared in two scenarios:

3e9484b

1. When user taps "buy now" from item detail 2. When user tries to check out (cart was being erroneously re-initialized)

blasten suggested changes Oct 4, 2016

View reviewed changes

Andrew Fitz Gibbon added 6 commits October 19, 2016 11:20

Add shop-payment-request to lazy-resources

18bb628

Set methods to full list of options by default, and broaden error han…

5dd8b18

…dling

Addressing a few comments from PR:

b5d012e

* Move shop-payment-request to lazy import * Shortend supported payment list (full list set as default) * Declare process-payment event as coming from shop-payment-request

Simplify CSS for shop-detail

9116cac

Merge from master

2d8c42e

agektmr mentioned this pull request Oct 23, 2016

Adds Credential API and Payment API #91

Closed

blasten reviewed Oct 31, 2016

View reviewed changes

blasten suggested changes Oct 31, 2016

View reviewed changes

afitz0 mentioned this pull request Nov 7, 2016

Credentials payment agektmr/shop#1

Merged

frankiefu closed this Nov 7, 2016

		@@ -23,6 +23,19 @@

		<style include="shop-common-styles shop-button shop-select">

		shop-button#buyNow > * {

Integrate PaymentRequest (aka Web Payments) into Shop #70

Integrate PaymentRequest (aka Web Payments) into Shop #70

Conversation

afitz0 commented Aug 26, 2016

FluorescentHallucinogen commented Aug 29, 2016

tjsavage commented Aug 31, 2016

afitz0 commented Aug 31, 2016

FluorescentHallucinogen commented Aug 31, 2016

afitz0 commented Aug 31, 2016

kbwatts commented Aug 31, 2016

oneezy commented Aug 31, 2016

blasten commented Aug 31, 2016

afitz0 commented Aug 31, 2016

ddwag1 commented Sep 4, 2016

FluorescentHallucinogen commented Sep 9, 2016

afitz0 commented Sep 9, 2016

afitz0 commented Sep 26, 2016

FluorescentHallucinogen commented Sep 27, 2016

FluorescentHallucinogen commented Sep 27, 2016

FluorescentHallucinogen commented Sep 27, 2016

afitz0 commented Sep 27, 2016

FluorescentHallucinogen commented Sep 28, 2016

FluorescentHallucinogen commented Sep 28, 2016

afitz0 commented Sep 28, 2016

blasten left a comment

Choose a reason for hiding this comment

blasten Oct 4, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blasten Oct 4, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blasten Oct 4, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blasten Oct 4, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blasten Oct 4, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blasten Oct 4, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

FluorescentHallucinogen commented Oct 10, 2016

FluorescentHallucinogen commented Oct 19, 2016

FluorescentHallucinogen commented Oct 20, 2016

agektmr commented Oct 20, 2016

agektmr commented Oct 20, 2016

afitz0 commented Oct 20, 2016 • edited Loading

Choose a reason for hiding this comment

blasten left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blasten Oct 31, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blasten Oct 31, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blasten Oct 31, 2016 • edited Loading

Choose a reason for hiding this comment

frankiefu commented Oct 31, 2016

blasten commented Oct 31, 2016 • edited Loading

agektmr commented Nov 1, 2016

afitz0 commented Nov 7, 2016

blasten commented Nov 7, 2016 • edited Loading

frankiefu commented Nov 7, 2016

blasten Oct 4, 2016 •

edited

Loading

blasten Oct 4, 2016 •

edited

Loading

blasten Oct 4, 2016 •

edited

Loading

blasten Oct 4, 2016 •

edited

Loading

blasten Oct 4, 2016 •

edited

Loading

blasten Oct 4, 2016 •

edited

Loading

afitz0 commented Oct 20, 2016 •

edited

Loading

blasten Oct 31, 2016 •

edited

Loading

blasten Oct 31, 2016 •

edited

Loading

blasten Oct 31, 2016 •

edited

Loading

blasten commented Oct 31, 2016 •

edited

Loading

blasten commented Nov 7, 2016 •

edited

Loading