Stripe API is not charging the correct amount

Question

I am developing a website using Laravel. I need to integrate Stripe payment gateway into my website. I implemented the payment process successfully, but it is not charging the correct amount.

This is my HTML form and JavaScript:

<script src="https://js.stripe.com/v3/"></script>
<div class="container">
    <div style="margin-top: 100px;">
    {!! Form::open([ 'url' => url('checkout/charge'), 'id' => 'payment-form' ]) !!}
        <div style="color: red" id="card-errors">

        </div>
        <div class="form-row">
            <label for="card-element">
                Credit or debit card
            </label>
            <div id="card-element">
                <!-- A Stripe Element will be inserted here. -->
            </div>

            <!-- Used to display form errors. -->
            <div id="card-errors" role="alert"></div>
        </div>

        <button>Submit Payment</button>
    {!! Form::close() !!}
    </div>
</div>
<script type="text/javascript">
    $(function(){
        var secret = $('#stripe-secret').val();
        var stripe = Stripe(secret);
        // Create an instance of Elements.
        var elements = stripe.elements();

        // Custom styling can be passed to options when creating an Element.
        // (Note that this demo uses a wider set of styles than the guide below.)
        var style = {
            base: {
                color: '#32325d',
                lineHeight: '18px',
                fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                fontSmoothing: 'antialiased',
                fontSize: '16px',
                '::placeholder': {
                    color: '#aab7c4'
                }
            },
            invalid: {
                color: '#fa755a',
                iconColor: '#fa755a'
            }
        };

    // Create an instance of the card Element.
    var card = elements.create('card', {style: style});

    // Add an instance of the card Element into the `card-element` <div>.
    card.mount('#card-element');


    //Error live
    card.addEventListener('change', function(event) {
        var displayError = document.getElementById('card-errors');
        if (event.error) {
            displayError.textContent = event.error.message;
        } else {
            displayError.textContent = '';
        }
    });



    //Create token
    // Create a token or display an error when the form is submitted.
    var form = document.getElementById('payment-form');
    form.addEventListener('submit', function(event) {
        event.preventDefault();

        stripe.createToken(card).then(function(result) {
            if (result.error) {
                // Inform the customer that there was an error.
                var errorElement = document.getElementById('card-errors');
                errorElement.textContent = result.error.message;
            } else {
            // Send the token to your server.
            stripeTokenHandler(result.token);
            }
        });
    });


    function stripeTokenHandler(token) {
        // Insert the token ID into the form so it gets submitted to the server
        var form = document.getElementById('payment-form');
        var hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', 'stripeToken');
        hiddenInput.setAttribute('value', token.id);

        form.appendChild(hiddenInput);

        // Submit the form
        form.submit();
    }
})
</script>

As you can see, Stripe's token is then submitted to the server. To be able to use Stripe client from the server side, I installed it running this command.

composer require stripe/stripe-php

This is my charge action

function charge(Request $request)
    {
        Stripe::setApiKey(env('STRIPE_SECRET'));

        $customer = Customer::create(array(
            'email' => "my-email@gmail.com",
            'source'  => $request->stripeToken
        ));


        $charge = Charge::create(array(
            'customer' => $customer->id,
            'amount'   => 70,
            'currency' => 'usd'
        ));

        return "Charge successful, you get the course";
    }

The payment implementation is working fine. But the problem is that as you can see in the code, I passed the amount of 70. I am trying to charge 70 USD. Currency is USD. But after I submit the form and when I check the dashboard, it only charges 0.7 dollar. If I passed 5 USD, it charges, 0.5. It multiplies the actual amount with 0.01.

This is the screenshot:

How can I fix my code to charge the correct amount?

Answer 1

Send the value to a function that multiplies the amount by 100 to convert that amount into dollars, euro single units etc..

$charge = Charge::create(array(
            'customer' => $customer->id,
            'amount'   => calculateRealNumber(70),
            'currency' => 'usd'
));

function calculateRealNumber($amount) {
    return (($amount)*100);
}

This is better suited to dynamic charge values where you would put a variable in the 'amount' => calculateRealNumber($body->amount). It's a bit overkill for a constant amount.

Answer 2

Stripe does charge amounts in cents. So if you wanted 70 dollars you'd need to do 7000 cents