如何获取集成在iframe中的Woocommerce条纹付款表单的值，以从支付卡中获取最后4位数字

Question

当我点击完成付款按钮时，如何通过jquery获取woocommerce条纹付款字段的值？

我想获取此数据，并将在预览页面中显示最后 4 位数字。

请记住，woocommerce条纹支付网关表单集成在iframe中。这是 iframe 代码

<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>

这是"卡号"字段

<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>

我试过这个

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

而这个

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

而这个

jQuery('iframe').contents().find('input.InputElement').val();

Answer 1

编辑：你不能使用JavaScript访问不同来源的<iframe>，如果你能做到这一点，那将是一个巨大的安全漏洞。

-

但是，为了满足您的原始需求，您可以使用以下方法使用条纹检索 PHP 中的最后 4 位数字：

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

源>数据是一个数组，因此您必须选择第一张卡。

提取 4 位数字 - 提取 4 位数字，其他示例

-

原始答案：var iframe = $('iframe'(; $('输入。InputElement'， iframe.content(((.val((;

了解如何使用jquery访问iframe的内容

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