Stripe Checkout Security - Hidden fields a security issue?

Wappler General
1

I have been looking into integrate stripe into Wappler.
I am trying to keep it 100% Wappler (other than the JS scripts needed provided on the stripe website) so no PHP coded CURL requests etc, just Server Side API calls

Been a bit of a process but I seem to have got things working

The process I am using is that the checkout generates the stipeToken which is passed to a server connect action which then passes the token to Stripe via an API call.
The data returned is then inserted into a database table

That part woks surprisingly well

Ironically the most problematic part of the process has been passing variable checkout totals from he checkout (via Stripe Elements) to the server action
I have it working using a hidden field within the checkout such as

<input type="hidden" name="PaymentAmount" class="form-control mb-3 StripeElement StripeElement--empty" placeholder="Amount" dmx-bind:value="555"

which passes £5.55 to the checkout

I know the stripe checkout submits via javascript and works differently to a standard form submission but my questions are:

Do you think using a hidden text field to pass the checkout total is a security risk?

Does anyone know a better way of passing the checkout total so it can be collected by a server action as a POST value?

2

i was using the same method and was also thinking about the same topic. But also stripe use it in their examples. I mean alot of shops could be just manipulated with Browser Dev Tools with wrong amounts.

You could Hash the amount and then hash it back before storing. Also you could mask the name „payment amount“…

3

I would advice to set and send the amount server-side to Stripe, a user could change the value of the hidden input to 1 and only pay 1 cent for the product. You probably only want to submit the Product ID, user info and the Stripe token, with that you create the data required for the charge server-side with a database query to get the correct amount.

4

Eagerly await the results of this @Hyperbytes
A pure Wappler Server Side API walkthrough would be great once you’ve nailed it.

Mim

5

Thanks @patrick, that is a decent workaround, i was really uncomfortable about using hidden fields as they seems a huge security risk, that would get around the issue.
The standard checkout exposes the prices but protects against injection by omitting the name attribute and handling it all by .js as below

  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxx"
    data-amount="999"
    data-name="Hyperbytes Ltd"
    data-description="Widget"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="auto"
    data-currency="gbp">
  </script>
</form>

I am sure there must be a way of passing this value securely,. i suspect it will need a customised javascript solution (not my strong point) which i cant currently work out but your suggestion will be a decent workaround…
To be honest, once this issue is resolved then the API interactions are pretty straight forward

6

If I understand this correctly, this is what you can do:

  1. Call a POST form submit with ProductIDs, as Patrick has suggested.
  2. Then, in onsuccess STATIC event, call your Stripe JS.
  3. In the parameter where you have to send the amount, fetch the value from server connect in JS as - dmx.app.data.serverConnectAmount.data[0].something

Although, if checkout amount HAS to be sent via client-side, its not secure at all as far as I know. Its very easy to change the JS using dev tools.