What is stripe elements based on? and how do they secure it?

Question

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?

Answer 1

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&amp;showIcon=true&amp;style[base][iconColor]=%23235fc6&amp;style[base][fontWeight]=500&amp;style[base][fontFamily]=Roboto%2C+sans-serif&amp;style[base][fontSize]=16px&amp;rtl=false&amp;componentName=cardNumber&amp;keyMode=test&amp;apiKey=pk_XXXXX&amp;referrer=https%3A%2F%2Fdevbenoit.bridgebase.com%2Fpurchase%2Fpay.php&amp;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.

Answer 2

The Stripe element is an iframe, which is another window, which has its own window object and document object. The parent page cannot access these objects, unless the iframe is in the same origin.

The Stripe iframe will communicate directly with the Stripe server. You the developer can only control the javascript in the parent page, which can't see the user inputs (like credit card number) in the iframe.