#bird-paymentform-help
buoyant robin
restive thunder
1)
form.addEventListener('submit', async (event) => {
event.preventDefault();
const quantity = document.getElementById('quantity').value
const price = document.getElementById('price').value
2)
await (async () => {
const response = await fetch('https://bidbird.test/auctions/jobs/create/job-credits/update', {
method: "POST", // or 'PUT'
headers: {"Content-Type": "application/json",},
body: JSON.stringify({
params: {
paymentIntent: paymentIntent,
quantity: quantity,
price: price
} })});
if (response.status === 'requires_payment_method') {
const {error} = await elements.fetchUpdates();
} })();
3)
const {error} = await stripe.confirmPayment({
//`Elements` instance that was used to create the Payment Element
elements,
confirmParams: {
return_url: 'https://bidbird.test/auctions/jobs/create',
}, });
if (error) {
// This point will only be reached if there is an immediate error when
// confirming the payment. Show error to your customer (for example, payment
// details incomplete)
const messageContainer = document.querySelector('#error-message');
messageContainer.textContent = error.message; }
else {
// Your customer will be redirected to your `return_url`. For some payment
// methods like iDEAL, your customer will be redirected to an intermediate
// site first to authorize the payment, then redirected to the `return_url`. }});
urban wraith
bird-paymentform-help
@restive thunder hello! I'm happy to try and help but I have no idea what you are asking and the code you shared seems irrelevant to the client-side part
restive thunder
Morning, Yea I guess what i'm not understanding is the line form.addEventListener('submit', async (event) => { that should be allowing the form to hit my server after the stripe fetch() methods are hit, right?
urban wraith
what does "after the stripe fetch() methods are hit" even mean? There's no "fetch method" in Stripe
restive thunder
well, yes I understand what you're saying, it's a js function. However, it's only being used in relation to updating the stripe PI.
I put in some numbers above. Once a customer hits submit 1) then 2) is run to update the PI. 3) confirms the payment.
however, the html form action is never POST'ed to.
urban wraith
but submit of what? What integration flow are you using?
restive thunder
I'm using the Payment element.
Here's the relevant code related to the html.
// Create and mount the Payment Element
const paymentElement = elements.create("payment", {
layout: {
type: 'accordion',
defaultCollapsed: false,
radios: true,
spacedAccordionItems: false
}});
// Stripe injects an iframe into the DOM
paymentElement.mount('#payment-element');
// Handle form submission.
const form = document.getElementById('payment-form');
PaymentElement doesn't have any submit handler logic, it redirects after it's done
restive thunder
I thought the submit will trigger the action from the form with a POST request? That's what was happening prior to adding the fetch method.
urban wraith
what do you call "the fetch method"? I'm sorry you're completely losing me here
The flow is
1/ Create a PaymentIntent and get its client_secret
2/ Render PaymentElement
3/ Redirect to the return_url after confirmation succeeds
restive thunder
2) above is the fetch method.
There are two things I'm trying to do. Create a successful charge, which you and two-shoes helped me get there! Thank you. However, I still need to log these amounts on my own system.
Prior to adding the fetch() which updates the payment intent. This same js was POSTing to the html <form id="payment-form" action="/auctions/jobs/create/job-credits" above.
urban wraith
PaymentElement never does a POST. So it feels like you're misunderstanding something fundamental here
restive thunder
Well, in the <form I have the https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements#add-the-payment-element-to-your-payment-page action to hit my server.
urban wraith
//`Elements` instance that was used to create the Payment Element
elements,
confirmParams: {
return_url: 'https://bidbird.test/auctions/jobs/create',
}, });
this code, when you call this, after the confirmation succeeds you get redirected to https://bidbird.test/auctions/jobs/create and that's a GET request, not a POST
restive thunder
Are you saying this will not also POST to the server?
1)
form.addEventListener('submit', async (event) => {
event.preventDefault();
on submit, it should trigger the
<form id="payment-form"
action="/auctions/jobs/create/job-credits"
method="POST"
data-secret="{{ $stripeIntent->client_secret }}">
right?
in addition to the async js code within that code block?
urban wraith
there's no submit so I don't understand why you expect this. Unless your own code does a submit for some other reason
restive thunder
Here's a basic outline of the form
<form action... method=POST....
quantity
price
<div class="form-group mt-1 mb-3 ">
<!-- Display a payment form
class="my-3"-->
<div id="payment-element" class="w-100 mt-3 p-0 h-auto">
<!-- Elements will create form elements here -->
</div><!-- Used to display form errors. -->
<div id="error-message" role="alert">
</div></div>
<button type="submit" class="btn btn-warning btn-block mb-3">Purchase Credits</button>
<form
I mean it's an HTML form. An HTML form can be submitted with the click of a submit button or some custom JS code. The HTML form is completely irrelevant here, PaymentElement is a custom flow that will redirect to an unrelated URL after success. There's no form involved whatsoever
restive thunder
Above the paymentElement is within a form. A user hits submit which triggers the stripe code, but also should post to the server, also, right?
That's how I had it setup with you on the stripe elements 2018 api.
urban wraith
yeah I worry you are trying to make PaymentElement fit your years old flow and that just doesn't make sense unfortunately
You need to stop thinking the form will submit, it won't
restive thunder
ok, that's fine.
How about this. if I add an additional fetch will that submit to the server?
Basically, I need to POST this info on my own server to record it.
something like a try, catch after success from stripe, then it posts?
urban wraith
you are really misunderstanding the whole thing but I can't seem to figure out how to word it so that it clicks
After confirmation, the customer is redirected to your server, they hit return_url. That's where you do the additional work of tracking/recording the details. Not in an additional fetch.
Also, since anyone can lose their internet connection in the middle, or close their browser, it's brittle. So what most people should do is use webhooks to get the payment_intent.* Events and then react accordingly
restive thunder
interesting, Ok, I can scrap that old code.
So this:
const {error} = await stripe.confirmPayment({
//`Elements` instance that was used to create the Payment Element process.env.APP_URL +
elements,
confirmParams: {
return_url: 'https://bidbird.test/auctions/jobs/create',
},});
url should be the webhook endpoint?
urban wraith
absolutely not 😅
return_url should be the URL on your server where someone can be redirected and see a "thank you" page for example
restive thunder
Ok, so that takes us back to the same page. Got it. Yea this is way different than the old setup.
Let me try and whip up the webhooks api and will get back!
urban wraith
yeah it's definitely a completely different integration pattern. The idea here is that it might appear a bit more complex for card payments, but it allows you to adapt to any other payment method flow. Some payment methods require waiting days for success/failures (like bank debits), others require a full page redirect to a partner first (like Klarna or Afterpay), others require scanning a QR code or entering a one-time code, or paying in cash in person in a store, etc.
PaymentIntent and PaymentElement allow you to adapt to all of this
restive thunder
No, I"m super pumped. I have set up a webhooks route for mails already, so I have a fairly good idea of what to do. I think all the other stuff Stripe has put together will really make a more satisfying customer experience. Sorry it took me a bit!