search

saleor / saleor-storefront

A GraphQL-powered, NextJs-based, PWA storefront for Saleor. IMPORTANT: This project is [DEPRECATED] in favor of saleor/react-storefront soon to become our default demo and storefront starter pack.
https://demo.saleor.io/
BSD 3-Clause "New" or "Revised" License
769 stars 674 forks source link

Implement the Payment Request API #509

Closed patrys closed 4 years ago

patrys commented 8 years ago

This will allow us to bypass most of the checkout process at least for devices.

Details: https://developers.google.com/web/fundamentals/getting-started/primers/payment-request/

motatoes commented 7 years ago

Hello! I'm coming here from the hacktober '17 website. I realize this issue is a year old. Is this still an issue that needs working on? Can I work on this feature ?

stevesbrain commented 7 years ago

@motatoes If the issue is still open, I dare say it's worth working on still :) Worst that can happen is that the PR doesn't get merged!

maarcingebala commented 7 years ago

@motatoes Adding Payment Request API is on our roadmap. I can't assure you that we'll merge your PR since in the near future we're going to rebuild the checkout and payment modules. Then we could maybe reuse your code if it fits the new approach.

motatoes commented 7 years ago

Cool! I'll start reading about the Payment Request API, then familiarize myself with the codebase and then get back here with my plan for this.

maarcingebala commented 6 years ago

I went through this article about how the Payment Request API works and I came with an idea of how we can integrate it with Saleor. The flow would be as follow:

  1. In the cart view, the user clicks the "Checkout" button.
  2. The script checks if the Payment Request API is available is the user's browser.
  3. If the Payment Request API is available 3.1. Create a new Payment Request object and populate it with the total amount, currency, available shipping methods and available user addresses. 3.2. The user selects the payment method, delivery method and shipping address or fills the new ones. 3.3. The user confirms the payment and goes to the order details page.
  4. If the Payment Request API is not available redirect the user to the default Saleor's checkout.

What I'm not sure is how to deal with vouchers - we allow to apply them in one of the checkout steps, but with Payment Request, we should have the total cost already calculated before starting the checkout. If we moved the voucher input to the cart page, it should solve this problem.

I'm still experimenting with this API, but generally, it looks very promising. After adding it we could redesign our current checkout to make it one-step and to have a similar interface to the Payment Request API.

mociepka commented 6 years ago

Overall sounds good only one concern to having a discount field in the cart. With that concept user can't go directly to the checkout from the product page :/.

So interface like: image won't work.

Another concern, what we show user if payment gateway returns an error? We will redirect to the normal checkout? Or the payment request API checkout view will return some 400 error with json message and we show some message on cart?

maarcingebala commented 6 years ago

Errors from payment gateway should be handled in the same way as with the default checkout. Payment Request UI only collects data, we handle the payment ourselves. In case of any error, we would have to simply allow the user to pay again.

patrys commented 6 years ago

@elwoodxblues We also need to reload available delivery methods (and payment methods?) when address data changes (there are callbacks for this).

Vouchers are indeed not supported, this item was added to the FAQ over a year ago: https://developers.google.com/web/updates/2016/07/payment-request#do_you_plan_on_offering_a_coupon_code

patrys commented 6 years ago

Here's an example with shipping method callbacks: https://emerald-eon.appspot.com/

maarcingebala commented 6 years ago

Dealing with addresses and shipping shouldn't be a problem at all. Vouchers are the only missing piece and I'm afraid we don't have many possibilities, except for moving them to the cart view.

stale[bot] commented 5 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

maarcingebala commented 5 years ago

Still valid issue but I think it should be moved to saleor-storefront repo. Backend should be ready for implementing this since we expose the checkout API.

jdivins commented 4 years ago

It's planned to implement voucher functionality on checkout process in https://pwa.saleor.io/? Thank you!

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.