I need to integrate stripe to my website and started looking on how they work, aside for the payment processing stripe also has something called Stripe Elements.
To my best understanding those are simply javascript widgets (in order for a stripe user to be able to change the css and adapt it to his own website) however - looking into it I'm, not sure how can that be secure.
I understand that if it has been an iFrame the user couldn't change the css to his liking but when a user has control on the widget - doesn't that defi the purpose of stripe being secure? (in the sense of the user has the details of an end-user - i.e. in stripes point of view a user of a user).
I couldn't find anything on stripe that explains how that works\secure nor anything on the internet that explains what's exactly the stripe elements and how do they secure them.
Any clue?
There is an iframe involved.
When you mount a Stripe element on an input field, the field is replaced with a DIV that looks like something like this:
<div class="form-control StripeElement StripeElement--empty" id="cc_number">
<div class="__PrivateStripeElement" style="margin: 0px !important; padding: 0px !important; border: none !important; display: block !important; background: transparent !important; position: relative !important; opacity: 1 !important;">
<iframe name="__privateStripeFrame2365" frameborder="0" allowtransparency="true" scrolling="no" allow="payment *" src="https://js.stripe.com/v3/elements-inner-card-4c3fbb0b6f5096dd4a3a7a3ec37002fe.html#wait=true&showIcon=true&style[base][iconColor]=%23235fc6&style[base][fontWeight]=500&style[base][fontFamily]=Roboto%2C+sans-serif&style[base][fontSize]=16px&rtl=false&componentName=cardNumber&keyMode=test&apiKey=pk_XXXXX&referrer=https%3A%2F%2Fdevbenoit.bridgebase.com%2Fpurchase%2Fpay.php&controllerId=__privateStripeController2361"
title="Secure card number 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; user-select: none !important; will-change: transform !important; height: 19.2px;"></iframe>
<input class="__PrivateStripeElement-input" aria-hidden="true" aria-label=" " autocomplete="false" maxlength="1" style="border: none !important; display: block !important; position: absolute !important; height: 1px !important; top: -1px !important; left: 0px !important; padding: 0px !important; margin: 0px !important; width: 100% !important; opacity: 0 !important; background: transparent !important; pointer-events: none !important; font-size: 16px !important;"></div>
</div>The input that the user interacts with is in the iframe. The iframe has JavaScript that uses AJAX to communicate with the Stripe server.