0

How to get value of woocommerce stripe payment fields via jquery when I hit complete payment button?

I want to get this data and will show last 4 digits in preview page.

Remember woocommerce stripe payment gateway form is integrated in iframe. Here is the iframe code

<iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeFrame5" allowpaymentrequest="true" src="https://js.stripe.com/v3/elements-inner-card-6bc25d089c2cb94ef6e5f6c7d596d25f.html#style[base][iconColor]=%23666EE8&amp;style[base][color]=%2331325F&amp;style[base][fontSize]=15px&amp;style[base][::placeholder][color]=%23CFD7E0&amp;componentName=cardNumber&amp;wait=false&amp;rtl=false&amp;keyMode=test&amp;origin=http%3A%2F%2Frizwankhan.co&amp;referrer=http%3A%2F%2Frizwankhan.co%2Ftraining%2Fcheckout%2F&amp;controllerId=__privateStripeController1" title="Secure payment input frame" style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; height: 18px;"></iframe>

and here is the "Card Number" Field

      <label class="Input" data-max="4242 4242 4242 4242 4240">
    <input type="tel" autocomplete="cc-number" autocorrect="off" spellcheck="false" name="cardnumber" class="InputElement is-empty" aria-label="Credit or debit card number" placeholder="1234 1234 1234 1234" aria-placeholder="1234 1234 1234 1234" aria-invalid="false" value="">
</label>

I have tried this

jQuery('input.InputElement').val();

and this 

jQuery('iframe[name=__privateStripeFrame5]').contents().find('input.InputElement').val();

and this

jQuery('iframe').contents().find('input.InputElement').val();
Cedric
  • 4,361
  • 10
  • 37
  • 55
Rizwi
  • 97
  • 10
  • It seems to me it would be a bad idea to get strip payment data with jQuery, especially if you would like to do ajax things with them, or copy some data elswhere in the page. – Cedric Oct 11 '18 at 15:59
  • If you want to verify the form data on the client side (make sure the user gives only numbers in a number field for instance), stripe should handle everything by itself – Cedric Oct 11 '18 at 16:00
  • 1
    Actually I want to get this data and will show last 4 digits in preview page. so I think there is no risk with this. – Rizwi Oct 11 '18 at 17:17

1 Answers1

0

EDIT: You can't access an <iframe> with different origin using JavaScript, it would be a huge security flaw if you could do it.

    -

However, to answer to your original needs, you can retrieve the last 4 digits in PHP with stripe using:

$card = $customer->sources->data[0];

$Stripe_card=$card->last4;

sources->data is an array so you'd have to select the first card.

extract 4 digits - extract 4 digits, other example

-

Original answer: var iframe = $('iframe'); $('input.InputElement', iframe.contents()).val();

See how-to-access-the-content-of-an-iframe-with-jquery

Source: http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

Cedric
  • 4,361
  • 10
  • 37
  • 55
  • getting this error in console Uncaught DOMException: Blocked a frame with origin "http://abc.co" from accessing a cross-origin frame. – Rizwi Oct 11 '18 at 17:15
  • @Rizwi do you have any update? If the answer with its update has helped you, don't hesitate to upvote :) And if it has answered your question, don't hesitate to accept it. – Cedric Oct 29 '18 at 09:31