I want to implement a very user friendly checkout pipeline. First I will explain the problem from 2 point of views: - the way i see them.
Say i am a user in an e-commerce app, I want the purchasing process to go like this:
1. Choose some products, 2. enter shipping and billing, 3. pay securely with no fuss, And maybe - i want to create an account with this business, but only maybe. I don't completely trust them yet.
If i do decide to create an account - i want to have the option to select what information will get saved into this user account - with shipping and billing i'm usually ok, and saving credit card info is useful - but both need to be a preference. Maybe I just need this account to track my order and that's it. I don't want any of my details saved anywhere..
In general, i don't feel particularly comfortable knowing that someone has my credit card - even if it's not stored on their servers, even if it's very secure, very pci compliant, very very etc.. (like stripe is). I want to explicitly choose what personal data gets saved here. By checking a boxes or similar.
In contrast to this,
I hate when the first thing i need to do when buying something - is to sign up with email and password, or social platforms. I don't want Facebook or Google to know where i'm singing up and what stuff I'm buying. I just want to buy something and be over with it. Not necessarily to create a user account with this company. For now, I'll track the order trough email.
Also as a user, if i created an account previously, and i'm logged in now, i expect to have shipping and billing details auto-completed for my current order, and also the credit card information (if i decided to save this info previously)
Ok so now as a developer, i thought to address this points by implementing the following checkout funnel. When the checkout starts - i have 2 possible branches:
Case1: for logged in users:
Shipping details - autocompletes
Billing details - autocompletes
Payment
List of previously used and saved credit cards or - choose new card. Meaning two Options:
pay with Paypal - redirect to Paypal page
pay with Stripe - Default Stripe Modal
Case2: the users is not logged in, does not have an account - or doesn't want to log in:
message : If you already have an account, please log in.. - takes you to CASE1 if not :
Shipping details - manual typing
Billing details - autocompletes by default - but if it's different from Shipping details, then manual typing.
Payment - two Options:
pay with Paypal - redirect to Paypal page
pay with Stripe - Default Stripe Modal
Confirmation -
after thank you message, then:
Do you want to create an account with us?
If yes, Here i provide email (auto-completed), and password inputs, and 2 check-boxes:
save shipping and billing details
save credit card information.
The user selects what he/she wants - then a new account is created, Finish and redirect.
If no, the checkout process ends. Finish and redirect. No account is created.
The problem : Notice in point 3 (Case1) and 4 (Case2) - the payment must be processed, - and only then i ask the user if i can save it's credit card.
Problem is - i can't decide upfront - because i don't know if the user wants to create an account with us or not. If he decides not - then i stored his credit card without his consent. Which sounds bad when credit cards are involved.
This is i believe, why most websites require log in or sign up before the order. They solve this problem by providing a bad user experience, by forcing the user to create an account.
How to go around this? I prefer to use the Stripe Modal - because it's secure (sandboxed iframe) and i don't need to touch credit card numbers, do validation, and such - And also i prefer to use the Paypal redirect solution for the same reasons.
Question: How to store the credit card information, AFTER the payment process has finished ?? I'm talking about Stripe and Paypal Volt here of course - not on our servers.
Or I'm approaching this problem the wrong way? Any insight is appreciated, i couldn't find info about this specific topic and I'm drawing in all this documentation.. thanks :)
If you use the token (tok_XXXX) to create a one-time charge, you can't use the token again afterwards. I would say that the right flow is to create a customer to save the card and create a charge on that customer and card afterwards.
Then, at the next step, if the customer decides not to store their card details you would simply delete the customer or the card as you don't want to keep it saved.