How Stripe Remember Me Checkout Feature Works

!
Copyright 2015 Alonzo L. Hosford. All Rights Reserved. www.lonhosford.com
This is a Visual Step by Step Workbook and voice transcript for accompanying video for this portion of the
course.
!

!
Want to see how the Stripe checkout form can save your customer's payment information?
In this session we learn how the "Remember me" checkbox works.
So lets start working with it.

!
Stripe allows customers to save payment data like a credit card.
This is a default feature for the checkout form.
Knowing how to use it can also be helpful in your testing.

!
This is done via the "Remember me" check box.
Stripe associates a payment method with an email address and a phone number.
So lets try this out.
!

!
Open the checkout_simple.php file that you are working on in your web browser.
Click the "Pay with Card" button.

!
It not apparent, but Stripe attempts to detect a signed in "Remember me" visitor.
If it cannot, a blank version of the checkout form appears.
!

!
Now we will create a "Remember me" customer for testing.
Fill in a test email address that you have not used in the course.
 
!

!
Use one of the Stripe testing credit card numbers.
Repeating the number 42 is a fast way to go about that.
 
!

!
Then add any expiration date in the future and any three digit CVC.
!
 
!

!
Now you can click the "Remember me" check box.
Stripe then requests a mobile phone number.
We will see how that is used in a bit.
!

!
Just to note, the user can proceed in any order in filling out the form.
Not until an email address and the other data is complete does "Remember me" have any meaning.
 
!

!
In testing you can enter any phone number.
But you may want to use your own mobile phone so that you can simulate how it works.
Just to note, if you do, then you will be getting text messages.
!

!
Press the "Pay $20.00" button and your checkout is complete.
!
 
!

!
Your customer will receive a phone message that they have saved payment information with Stripe.
It will include your company name shown in the checkout form.
A kinda a free marketing bump.

!
Now we can simulate a customer who is signed into Stripe.
Reload the web page.

!
Stripe has recognized an email address as being signed into Stripe.
This is associated with your web site.

!
The payment information is pre-filled for them.
Press the "Pay $20.00" button and the checkout step is completed.

!
Now we will sign out the Stripe "Remember me" customer.
First reload the web page.

!
We will need the email address in the form so make a note of it.
Click the "Log out" link.
Keep in mind the login has to do with Stripe and not your web site.

!
Lets just confirm that no Stripe "Remember me" customer is signed in.
Reload the web page.

!
The blank form is our sign that no Stripe customer is signed in.
So you can close the form.

!
Now we will sign in our Stripe "Remember me" test customer.
Click the "Pay with Card" button again.

!
As you see we get the same blank form.
 
!

!
Enter the same email address that you used to create the "Remember me" customer.
 
!

!
Now you will be presented with a verification screen.
This is so that you can use the saved payment information.
A security code is sent by SMS.

!
It goes to the phone number associated with the email address and your web site.
Notice that your company name shows in the message.

!
Once sent, the screen updates with part of the receiving phone number masked.

!
Then that is removed with a simple Sent message.
Keep in mind SMS messaging is not perfect.
If it fails, there is an opt out for the user.

!
After about 8 seconds the user is offered to enter their payment information manually.
Selecting that or the back arrow in the top left corner returns to checkout screen.
!
!

!
Then the user is back to re-entering all the payment information.
!

!
Also worth noting is that the "Remember me" checkbox is still available.
So if the user wants to store the payment information again they can.
But they still need to enter all the payment information.
!

!
If the security code is valid, the payment data is again pre-filled.
Now you can just cancel out of this checkout form.
!

!
This gives you the flow for a returning "Remember me" Stripe customer.
Keep in mind that this has nothing to do with any separate login that you have for your customers.

!
You may find that you have an integration need that requires removing the Remember me checkbox.
So lets open the code and try that out.
!

!
To do this you need to add the data-allow-remember-me attribute to the script element.
You set its value to false.
You can paste this from the second code snippet and then save.
!

!
Reload the web page and click the "Pay with Card" button.

!
Now the "Remember me" button is removed.
Saving payment information is no longer possible for this form.
But customers can still use their saved Stripe payment information if it was previously created.
!

!
We will leave the "Remember me" option in for the exercises.
So you can remove the data-allow-remember-me attribute in the script element.
!
!

!
Generally the "Remember me" option is a positive feature.
So either set the data-allow-remember-me attribute to true or omit it in the first place.
!
!

!
The quicker it is for a customer to pay you, the more likely you will get the order.
Plus there is no special coding for the "Remember me" feature to make that available.

!
Stripe saves and presents pre-filled payment information for your customers.
You do not need to keep that sensitive payment data on your servers.
!

!
Well thats a wrap. Time to move on to the next session.

How Stripe Remember Me Checkout Feature Works

Recommended

Recommended

More Related Content

What's hot

What's hot (13)

Similar to How Stripe Remember Me Checkout Feature Works

Similar to How Stripe Remember Me Checkout Feature Works (20)

Recently uploaded

Recently uploaded (20)

How Stripe Remember Me Checkout Feature Works