#akshay-prbutton

1 messages · Page 1 of 1 (latest)

supple kernel
#

hello, PaymentRequest Button is for Apple and Google Pay, is that what you're implementing? I can clarify if so

short sparrow
#

Yes we are trying to use those wallets

#

I'm confused as to how I can call my server-side implementation using the payment request button

supple kernel
#

PaymentRequest Button creates a PaymentMethod for you, representing an Apple or Google Pay card.

You still create a PaymentIntent server-side, and then confirm the PaymentIntent clientside with the PaymentMethod you got from the wallet

short sparrow
#

Ok so can you walk me through the code flow?

#
  1. customer hits the payment request button, let's say it's apple pay
#
  1. this generates a payment request and payment method, which we can pass off to the server-side and create a payment intent
#
  1. server-side passes the clientSecret back to client-side, and we can call confirm with that
#

my questions are:

  • before step 1, how do we create the payment request instance? I thought all payment objects that include amount should be generated on server-side
  • what happens between step 2 and 3? How does the customer confirm the payment?
supple kernel
#
  • before step 1, how do we create the payment request instance? I thought all payment objects that include amount should be generated on server-side
    you can create the PaymentIntent first or track just the amount first, so you can create the PaymentRequest with that amount or the amount on the PaymentIntent
  • what happens between step 2 and 3? How does the customer confirm the payment?
    the customer authenticates the Apple Pay sheet, it loads and during that time, it gives your webpage a PaymentMethod object. You use that PaymentMethod object to confirm the PaymentIntent and when done, call the ev.complete('success') function to tell the Apple Pay sheet that the payment was successful and to show a checkmark and dismiss it
short sparrow
#

but I thought we shouldn't be having any price-related code on the front-end? shouldn't all paymentIntent information be done on the backend?

#

if the PaymentRequest object has price information in it, how can we create that on the front-end?

#

do you have any code examples of this?

supple kernel
#

if the PaymentRequest object has price information in it, how can we create that on the front-end?
you don't have to keep any price related stuff on your frontend, you can talk to your backend to get the price if all the logic lives there which it probably does

#

the point is, the Apple Pay and Google Pay sheet need to show the customer a price, so you need to calculate the price server-side and return it client-side to display in your paymetn sheet

short sparrow
#

so the paymentRequest object is just to display information to the customer? It's not actually used to confirm any payment, correct?

#

also I need to step out for lunch, is it alright to continue this in about an hour? Apologies for the break in the conversation

supple kernel
#

yes correct

PaymentRequest is to use the PaymentRequest API a browser level API

Stripe's PaymentRequest Button uses PaymentRequest API to hook into Apple / Google pay and create a PaymentMethod for you

The actual charge / payment is created by the PaymentIntent.

#

yes I can leave this thread open if you're coming back

short sparrow
#

Yes i'll be back in about an hour, thanks for being accomomdating!

short sparrow
#

I'm back from lunch now, let me first say that your explanation really helped me understand the difference between PaymentRequests and Intents, so thanks for that

supple kernel
#

np

short sparrow
#

Currently I'm creating the PaymentRequest instance based on the PaymentIntent fields as you suggested, and then passing that to the PaymentRequestButtonElement

#

where in the code do I include the listening to paymentMethod and confirming paymentIntent? Is that supposed to be called when the button is clicked?

supple kernel
#

listening to paymentmethod is just anywhere, not on a button pressed

confirming paymentIntent?
inside the paymentmethod event you listen to

short sparrow
#

So when the customer clicks the Apple/Google pay button, what actually happens?

supple kernel
#

nothing happens on your webpage until they authenticate
if they do authenticate, that triggers paymentmethod

short sparrow
#

by authenticate you mean like Face/Touch ID for apple pay, correct?

#

so that triggers the paymentmethod event which in turn triggers the payment confirmation?

supple kernel
#

by authenticate you mean like Face/Touch ID for apple pay, correct?
yes

#

and yes to the following

short sparrow
#

Ok great!

#

I understand all the conceptual logic now, I just need to see where all the code goes

supple kernel
#

I don't think there's a consolidated flow but can fiind it

#

one more thing

#

why aren't you using PaymentElement?

#

that abstracts away a bunch of PRButton's detail
and simplifies multiple payment methods into one code path

short sparrow
#

We don't want card payments, we only want to use Stripe for digital wallets like Apple/Google Pay

#

That's why we're using the PRButton

supple kernel
#

ah

#

ooc why?

#

not everyone has Apple or Google Pay set up?

short sparrow
#

for other use cases, we are sending customers to a different site for checkout

supple kernel
#

ah actually ignore that

#

there fixed

short sparrow
supple kernel
#

same link is fine, uncommented a line

short sparrow
#

thanks for the code example, it makes sense to me

#

do you know about calculating tax and shipping prices? I can ask again in dev-help if you'd like to make a new thread

supple kernel
#

we can keep this open

#

I might be stepping away but handing off state to a team member and they'll jump in in a sec

#

great talking/collaborating with you!

short sparrow
#

Sounds good, thanks so much for your help! Hope you have a great day

supple kernel
#

just pasting your most recent question for context

https://stripe.com/docs/js/payment_request/events/on_shipping_option_change```
serene mural
#

Hello! That's correct, for calculating tax and shipping you would listen for the event you linked above and update the Payment Request based on the information you get back and the new costs.

short sparrow
#

Ok awesome, is there a code example of calculating tax? It's something done on the server-side, right? Is there a Stripe API to calculate it?

serene mural
#

I don't believe we have an example for this, no. It's something you would need to build on your end.

#

Is this question about using Stripe Tax or is this about using a third-party tax calculation?

short sparrow
#

Either one, we are still looking into a tax calculation

serene mural
#

Yeah, so what would happen is your frontend code would listen for the event, relay the new shipping info to your server, your server would calculate the new costs, respond to your frontend code, and then you update the Payment Request.

short sparrow
#

Ok great, that makes sense

#

i've actually got the payment request button working now which is great, so I wanted to ask about some post-confirmation processing

#

When the PaymentRequest button gets tapped, but paymentIntent hasn't been confirmed yet, is there an event we can listen to? In which case, we can create an order with "in progress" status and reserve the inventory on the backend. Then after confirmation/purchase, is there another event we can listen to? At that point, we would mark the order status as "completed"

#

something along those lines

serene mural
short sparrow
#

awesome! and last question for now, how do we redirect the customer to a success page after payment confirmation?

serene mural
#

Using normal JavaScript after the payment succeeds. There's nothing Stripe-specific about that part.

#

Run window.location = 'https://example.com/success'; when you're ready to redirect, for example.

short sparrow
#

ok so in the payment confirmation handling, if we see ev.complete('success'); then we can do the redirect?

serene mural
#

ev.complete('success') is your code telling Stripe.js to dismiss the payment sheet. You call that code when you've determined the payment is successful.

short sparrow
#

great, that makes sense

#

thank you so much for your help!