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.

Answer 1

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
  }