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
@ficuscr Yes I need to show a summary including the last 4 digits before it is securely submitted to Stripe — Yandy_Viera
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
the numbers are entered in an input that stripe inject in my page through an iframe — Yandy_Viera

duck duck · Accepted Answer · 2018-07-02T22:34:28

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
  }

How to get last4 digits BEFORE submit the data with Stripe

1 Answers