How to get last4 digits BEFORE submit the data with Stripe

Question

What I want to achieve is to be able to show the last 4 digits of the card in a summary before doing the submit.

I have a Checkout page by steps(4), in the 3rd step I fill the card info, when I go to the four step I want to be able to show a summary that show the last 4 digits of the card.

In all my research all what I found that show me the card info (last4) is after the submit, through the stripeToken or the customer, for example in this question Getting Last4 Digits of Card using Customer Object - Stripe API with PHP

// Get the credit card details submitted by the form
$token = $_POST['stripeToken'];

// Create a Customer
$StripeCustomer = \Stripe\Customer::create(array(
          "description" => "$username",
          "card" => $token
));
$last4 = $StripeCustomer->sources->data[0]->last4;

another thing I was trying to do was to create the Customer using WP user id

$customer_id =  get_user_meta(get_current_user_id(), '_pw_stripe_user_id', true);
$customer = new \WC_Stripe_Customer($customer_id);

but it returns me a default empty Customer, so I don't have the last4, I assume this happens because before doing the submit there is no such Customer.

I can't access to the input value because is an iframe that Stripe insert in the form.

So any way to get the last4 before the submit? Thx in advance.

Not sure I follow exactly. You want to see the card number (fine, last four) before it is securely submitted to Stripe? — ficuscr, Jul 02 '18 at 22:26
@ficuscr Yes I need to show a summary including the last 4 digits before it is securely submitted to Stripe — Yandy_Viera, Jul 02 '18 at 22:29
Not sure how that would work, short of you doing the submit/create on step 3, making the "confirmation" you perform more of a "review". I mean think about it, if not sent to Stripe would be client-side code, and whole idea is that you don't take on PCI compliance burdens, they are not going to facilitate letting you scrape the full card number. I'm talking abstractly and don't know Stripe well but that's my gut. — ficuscr, Jul 02 '18 at 22:32
the numbers are entered in an input that stripe inject in my page through an iframe — Yandy_Viera, Jul 02 '18 at 23:00
I had hope that the token could be accessed before submitting or pre-saving the customer and getting some information from the card before doing the submit — Yandy_Viera, Jul 02 '18 at 23:12

duck · Answer 1 · 2018-07-02T23:18:54.407

2

If you use the custom version of Checkout you can easily do this, just grab token.card.last4 in your token callback. You could show this, or any kind of summary, to your user before you choose to submit the token token.id to your backend if you'd like.

Example: http://jsfiddle.net/9mgqzuL1/

token: function(token) {
    console.log(token);
    document.getElementById('last4').innerHTML = token.card.last4;
    // you'd then want to do something with token.id and submit your form
  }

edited Jul 02 '18 at 23:18

answered Jul 02 '18 at 22:34

duck

5,240
1
15
15

I don't think I understood the question. – ficuscr Jul 02 '18 at 22:37
@duck thx, but you are getting the last 4 when you click on the submit button that it create the token, I need it before clicking the button – Yandy_Viera Jul 02 '18 at 23:03
It's not possible _before_ clicking the button, but this _is_ before you submit it to your backend to actually process the charge, which is what the above does. So they could enter their card, you could present them with a summary after the token is generated, they could click something else at which time you submit the form and pass `token.id` off to your backend to charge. – duck Jul 02 '18 at 23:13
Yes it is true, it is before I submit it to my backend, but I need it in a step before the submit, so I hope it can be done before clicking the button, thx any way. – Yandy_Viera Jul 02 '18 at 23:19
Unfortunately there's no way to do that with checkout or stripe.js v3 as they are in an iframe. You might be able to use the older v2 of Stripe.js, however, that forces you to do more extensive PCI compliance (SAQ A-EP) which means more time and $$$. https://stripe.com/docs/security#validating-pci-compliance – duck Jul 03 '18 at 16:19

How to get last4 digits BEFORE submit the data with Stripe

1 Answers1