New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement the Payment Request API #592

Open
patrys opened this Issue Oct 19, 2016 · 10 comments

Comments

Projects
None yet
5 participants
@patrys
Member

patrys commented Oct 19, 2016

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

This comment has been minimized.

Show comment
Hide comment
@motatoes

motatoes Oct 4, 2017

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 ?

motatoes commented Oct 4, 2017

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

This comment has been minimized.

Show comment
Hide comment
@stevesbrain

stevesbrain Oct 5, 2017

@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!

stevesbrain commented Oct 5, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@maarcingebala

maarcingebala Oct 5, 2017

Member

@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.

Member

maarcingebala commented Oct 5, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@motatoes

motatoes Oct 5, 2017

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.

motatoes commented Oct 5, 2017

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

This comment has been minimized.

Show comment
Hide comment
@maarcingebala

maarcingebala Dec 7, 2017

Member

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.

Member

maarcingebala commented Dec 7, 2017

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

This comment has been minimized.

Show comment
Hide comment
@mociepka

mociepka Dec 7, 2017

Member

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?

Member

mociepka commented Dec 7, 2017

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

This comment has been minimized.

Show comment
Hide comment
@maarcingebala

maarcingebala Dec 7, 2017

Member

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.

Member

maarcingebala commented Dec 7, 2017

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

This comment has been minimized.

Show comment
Hide comment
@patrys

patrys Dec 7, 2017

Member

@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

Member

patrys commented Dec 7, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@patrys

patrys Dec 7, 2017

Member

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

Member

patrys commented Dec 7, 2017

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

@maarcingebala

This comment has been minimized.

Show comment
Hide comment
@maarcingebala

maarcingebala Dec 7, 2017

Member

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.

Member

maarcingebala commented Dec 7, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment