Get and pay with saved payment methods of Stripe

[aidnurs]

Hi,

we're developing an online shop with Wordpress as headless cms and React on the frontend. I'm trying to implement "pay with saved credit cards" function on the frontend, but I don't really understand how.

We wrote mutation, that uses process_payment function of "WooCommerce Stripe Gateway" Plugin, because there were no mutations to finish checkout and pay with a card. This worked! But when I used the same source id's to pay again, I got error with following message: The source you provided has already been attached to a customer.

My approach can be wrong and hopefully there is a better way to handle payments in WooCommerce. Have somebody already tried to implement this?

Installed WP Plugins: WooCommerce + WooCommerce Stripe Gateway + WP GraphQL +WP GraphQL WooCommerce

Thanks!

[ardiewen]

I'll leave it to others to comment on whether or not this is possible using the native payment gateway options.

Since I started my application before this was possible, and require Stripe Connect capabilities, I currently do this using a custom implementation.

Warning: the following requires BOTH the client side API (Stripe JS) as well as server-side API (Stripe).

Here's a brief summary of what's required, organized by UX flow:

1. Upon authenticated checkout, query Wordpress for stripeCustomerId. I'm storing this as a custom string value associated with the user object.

2. With the stripeCustomerId, I get a list of a payment methods via server-side API (I'm using Netlify Functions).

3. These methods are held in local state and presented to the user as UI objects. An example here:

   

   Note: At this step, I also create a paymentIntent via Stripe on server-side (again with Netlify Functions for me) with the order amount. This returns a clientSecret and is required for the next step, where you confirm the paymentIntent by charging the paymentMethod.

4. Selecting one of the saved paymentMethods passes the paymentMethod.id to the next step for payment processing, e.g. pm_12345678.

5. Upon checkout, the following occurs when a saved card is used:

   • Confirm the card payment via Stripe JS on client-side. This confirms the paymentIntent created above with the clientSecret and paymentMethod.id collected above.
   • On success, you'll receive a paymentIntent.id that i use as the transactionId in the checkout mutation.
   • Call the checkout mutation with isPaid: true, transactionId: paymentIntent.id and paymentMethod: "stripe".

For users who don't have any saved paymentMethods. You'll have to create an extra step that calls the create payment method server-side API during the card entry process (step 3), and ensure that the save_payment_method and setup_future_usage options are set during confirmCardPayment (step 5).

Hope that helps for anyone looking to do something similar.

[travis-r6s]

There also seems to be an in progress PR that will handle Stripe Payments - #255

[kidunot89]

@aidnurs @thetre97 Release v0.5.1 is out with the added Stripe support in the checkout mutation.