Stripe Connect: Help to fetch the object / ID created on the Client Side for use in Server Side

Wappler General How To
#1

My setup:
When I click a ‘save card’ button, a createPaymentMethod() action by the Stripe Card Element generates an ID (pm_1J0BDjBfY9idGe2ue3fYcOz4) on the client side.

How can the server side components retrieve that ID?

clientside createpaymentmethods

Thanks all.

#2

I assume this is for saving a card (payment method) to a customer record so that they can checkout easily in future?

If that’s the case I would store the payment method object returned from stripe in your database against that customer which can later be sent with the payment intent when you want to complete a charge. For simplicity you could use a hidden form or run the server action on success of the button click event by using a GET variable.

1 Like
#3

Thanks Max, you are correct.

Am I doing right on the server side?
image

On the client side:
Save button creates PaymentMethodID

clientside1
clientside1380×558 38.3 KB

On success of form submission, I am not sure about the flow:

image
image586×660 30 KB

What do you think? (asking because I must fix some DB query prior to testing this out)

Retrieve Stripe element from server connect
#4

On the form submission send the returned payment method to the db. It looks like you’re using a form so you can use this to post that to your server action. What’s the set session for?

#5

I planned to use the payment method on the fly so send the ID to server side through the GET parameter. But I hear you, the GET var being available, no need for SESSION.
Isn’t storing into the DB time consuming given the steps for a “hold funds and capture card” Stripe flow?

  1. Save card button click creates a PaymentMethod ID
  2. ID saved to DB
  3. DB query
  4. SetupIntent (fetches cus_xxx ID)
  5. CustomertPaymentMethod (fetches pm_xxx ID)
  6. CreatePaymentIntent
  7. CapturePaymentIntent

My question abt Wappler: does each step waits for the previous one to fully finish in order to fire?

#6

Minimal. Plus you then have the payment method stored against that customer for future purchases, making transactions faster as you haven’t got to call the payment methods API every time.

Yes, server actions steps are executed synchronously

1 Like
#7

Are you familiar enough with Stripe so I can order 30-40min of your time for a live video brief?

#8

Have you figured out this issue?
I have not found any documentation on implementing this “Connect” with Wappler. So I hesitate to start with this tool.

#9

It’s complicated.
Each time I ask Stripe live tech support, they recommend different steps and documentations. I finally got to talk to one expert who lead me to the appropriate solution, using the createCheckoutSession with ‘payment’ mode on the server side. So no need for the above ‘confirmSetup’ and ‘createPaymentMethod’ actions.

1 Like