I'm building a platform for selling video courses using React and Next.js.
My goal is to create a payment form that unauthenticated users can use. I want it to work the way it works on Gumroad - a user opens a modal where they can enter their email, their credit card info, and click "Pay" (see the image). When the user submits this form, I want to create an account for them behind the scenes and process the payment at the same time, and then redirect them to the already purchased course, with them being already logged in to their account. That way the UX is much nicer, and conversions are higher - I don't have to require users to create an account before purchasing the course, to them it all looks like one step.
The problem is that to handle payments, I'm using <PaymentElement />. In order to display this form on my website, I am required to create a Payment Intent first. In order to create a Payment Intent, I have to pass it stripeCustomerId (so that I could save the payment method the user has used), as well as userId (so that, in my webhooks, after the payment succeeds, I could add the course to the list of the courses the user has purchased). And that means that in order for me to display the checkout form, the user has to already have an account and be authenticated.
Can you give me some advice? What can I do, is there a solution or a workaround to this?
What I need is:
Show the user a form where they can enter their email address and credit card info.
When the user clicks "pay", create an account for them (which has userId and stripeCustomerId).
After that, use this information to process the payment.
You can update the Payment Intent's customer after the Payment Intent is created and/or confirmed. That means the flow would look something like this:
Create a Payment Intent
Display the payment page with the Payment Element
When payment successfully completes create a Customer and update the Payment Intent's customer with the Customer ID
Normally, to add a new card information, we should follow that order
Create a new customer on Stripe (using email, first name, lastname, phone, zipcode, etc)
Create a setup intent, get a client secret
Confirm card setup with the client secret (when adding card info)
The payment process comes after with that card info. You can make that new card as default if you want.
Create a guest user first
Create a payment intent using guest user credentials
Display Stripe form on the client
Whenever the user submits the form on the client, update the payment intent with the customer id first then confirm the payment.
Related
for my subscription based product I want to have a possibility to subscribe and enter payment details at once with stripe and struggle with that with the api.
In https://stripe.com/docs/billing/subscriptions/build-subscriptions?ui=elements I see an option to create a subscription with payment_behavior='default incomplete' and then enter the details to confirm the payment intent. So far so good. However if I create the subscription like that even before the customer confirms payment details stripe already generates an invoice which is not really what I want before final confirmation by customer.
Options I see:
create setupintent, have this filled by customer via elements and then have the customer subscribe. Technically works nicely but for a sales and customer perspective is not good as it has two steps thus probably reduces conversion.
create the subscription in the background before final subscription confirmation by customer and use the clientsecret of it to pass back to browser and then have customer enter his payment data and submit that and finish the setup of subscription and payment info. Technically works - however I realize that when I create the subscription to get the clientsecret to pass to elements before the customer enters his payment data and confirms the subscription the subscription is not only created but an invoice too - which would be really, i.e. an invoice created before customers really confirms the contract
create setupintent and submit it via elements and in metadata of it add the info of product that customers wants so that when the paymentmethod gets created and I get webhook event I do the booking of the product given in metainfo. May however mean the customer gets to success page but the webhook has not notified yet and thus the customer is not really subscrubed at the point in time but gets a success message he is
same as 3 except do not pass info via metadata but via successUrl parameters which refers to and endpoint at my backend which upon being called after setupintent was setup will do the subscription and then redirect to my frontend which shows success page. That seems like a error prone workaround however.
Create a workflow which is a 2 step sign up and asks for paymentinfo, sets that up and then brings customer to a final confirmation page where the submit triggers subscription creation. Seems a bit complicated from a user flow, but so far probably the best option?
Any better options?
Cheers
Tom
ps: Interestingly enough on discord stripe support told me #2 is the way to go - find it hard to believe ...
As far as I know, there isn't a workaround for this unfortunately. It is just how Subscriptions API is designed by Stripe. You can learn more about that here where they talk about "how subscriptions work".
I am working on a store where we need to integrate Adyen React drop-in components.
I have followed and integrated the guide from here: https://docs.adyen.com/online-payments/web-drop-in
So the workflow that we need to implement is the following:
User adds products to cart
User checkouts and is redirected to checkout page
User adds billing details as well as payment details (card details)
After validation of data, user clicks "Pay"
Order is created
If payment was OK, then order is moved to confirmed status
Else, if payment was refused, order is moved to awaiting payment status.
But right now the integration with Adyen forces us to the following steps:
User adds products to cart
User checks out and is redirected to checkout page
User adds billing details
Adyen session is initiated (with 'reference' to an order ID which is not created at this time), so that the payment details can be filled with user data
User adds payment details
....rest
When creating an Adyen SESSION, it is mandatory to provide a reference, and this reference will be the link between an order and a payment. From the above workflows, you can see that we are forced to have an order ID as soon as the user fills payment data and we don't want that.
We want to create the order only at the end of transaction.
Is it possible to achieve this?
I have tried following the React and NodeJS guides available on git repository but they are just generating a random UUID for every payment
Unfortunately it is not possible to modify the payment reference after creating the session.
The only way around would be to re-create a new session (using the OrderId) but still before performing the payment.
I have an onboarding registration workflow for my web application. I want to register the user only if Stripe payment is valid.
Here are my current steps :
Choose plan
Set personnel infos
Validation --> User is created
Pay using stripe on a new page --> User is activated
The problem is that it causes some friction, so I want to have step 3 and 4 in one step : Validation return the Stripe Payment view, and if valid it create and activate the user.
The problem is that I can't figure how to give application users informations to Stripe to create user on webhook.
I thought about create a temp user before return stripe view, but I don't think that is the best architectural choice.
I have a chatbot build using Dialogflow that let's user's book a room from my customers hotel. Right now it just generates the amount the user has to pay based on his/her booking. Payment is made later.
I would like to add the option for users to pay from the chatbot itself, and send response to user whether the payment was successful or not.
How can this be done ?
Making payment through the chatbot is not considered safe (atleast i think so), you should generate a payment link, ask the user to make payment, give a button to user to click once the payment is done, and check if its really complete.
Before the payment is done, save the details into a database, so that you can later retrieve it and continue the conversation. You need to check this once user clicks the button after payment.
However you can get amount, and password from user and call some API to make payment.
Let us know what other issues are you facing.
I currently use Stripe to sell my product, namely a recurring subscription.
I sometimes see a recurring payment failed to be completed, but Stripe, unlike PayPal seems to not support out of the box email notifications to let the customer know that his payment has failed.
So, my questions are:
How can I email my clients to notify them about their payment having failed? ( tell it as if I am 7 year old please, I am not a programmer )
Most importantly, how can my clients update their card information?
Thank you very much.
The best way to be notified when a recurring payment fails, and in turn notify your own customer, is to use webhooks. Specifically, you'd need to catch the invoice.payment_failed event.
Here is a recipe that explains how to send emails for failed payments to customers (using PHP): https://stripe.com/docs/recipes/sending-emails-for-failed-payments.
To update the payment information of an existing customer, you'd need to first collect the new card's information (using Checkout or your own form with Stripe.js), then send a customer update request with the new card's token in the source parameter. This will replace the customer's current default card with the new one.
You can email a link to the customer to update their credit card:
Use “Customer” tab to search for customer
Click on customer to open details
Click on “subscribed to…” (1st section of page)
Invoices: click on most recent invoice
“Details” section: copy “payment page link” and email to customer
This is now all done by Stripe's Customer Portal. Very feature-rich.
https://stripe.com/docs/billing/subscriptions/integrating-customer-portal
After talking with Stripe support this worked for me to allow the customer to edit his credit card informations (May 2022):
stripe dashboard
customers
select your customer in the list
remove all existing payment methods of the customer
create a new invoice ("Create" button at the top of the invoice list)
add a new item with an amount of 0.5$ (minimum amount apparently) By indicating an amount of 0$ the window to indicate the card data is not displayed.
check the "email invoice to customer with link to payment page" box
review invoice (top right button)
click on the send button
Personally, I had to do this twice for the customer to see the form to enter the new credit card data but it finally worked...
I hope this will help some of you who tried the previous solutions without success.
You can enable a shareable link to your customer portal that customers can log in to by email address to do things like manage their card information.
Here's where you configure it and enable the shareable link (at the bottom of this page)
https://dashboard.stripe.com/settings/billing/portal