Display the 0.00 amount to Stripe.

Question

I am using Stripe where users subscribe to different paid plans with one payment. The payment is made successfully, but the main problem is that during the 3D Secure payment process (we operate in Europe, the 3D Secure payment check is mandatory), the amount shown to the user is 0,00. Not only is this wrong, but more importantly, it’s confusing for the person about to make the payment.

public function purchase(Request $request, Plan $plan)
{

            $user = $request->user();
            $paymentMethod = $request->input('payment_method');
            $encryptedSystemId = $request->input('system_id');
            $encryptedBoxId = $request->input('box_id');
            
            // Decrypt the encrypted IDs
            $systemId = Crypt::decrypt($encryptedSystemId);
            $boxId = Crypt::decrypt($encryptedBoxId);
            
            // Validate the IDs and user authorization
            $system = System::findOrFail($systemId);
            $box = Box::findOrFail($boxId);
            $total = $plan->price;
            

         
   

    try {
        $user->createOrGetStripeCustomer();
        $user->updateDefaultPaymentMethod($paymentMethod);
        $user->charge($total * 100, $paymentMethod, [
            'metadata' =>
            ['system_id' => $systemId, 
            'box_id' => $boxId,
            'tenant_id '=> $user->tenant->id,
            ]
           ]); // * 100 because Stripe deals with cents
    } catch (Exception $exception) {
        return back()->with('error', 'Error processing payment: ' . $exception->getMessage());
    }






<script src="https://js.stripe.com/v3/"></script>
<script>
    let stripe = Stripe("{{ env('STRIPE_KEY') }}")
    let elements = stripe.elements()
    let style = {
        base: {
            color: '#32325d',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
                color: '#aab7c4'
            }
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        }
    }
    let card = elements.create('card', {
        style: style
    })
    card.mount('#card-element')
    let paymentMethod = null
    $('.card-form').on('submit', function(e) {
        $('#pay-btn').attr('disabled', true)
        if (paymentMethod) {
            return true
        }
        stripe.confirmCardSetup(
            "{{ $intent->client_secret }}", {
                payment_method: {
                    card: card,
                    billing_details: {
                        name: $('.card_holder_name').val()
                    }
                }
            }
        ).then(function(result) {
            if (result.error) {
                toastr.error(
                    '__("rental.The data you entered contains errors! Review 
              it and try again")')
                $('#pay-btn').removeAttr('disabled')
            }else {
                paymentMethod = result.setupIntent.payment_method
                $('.payment-method').val(paymentMethod)
                $('.card-form').submit()
                $('span.icon').removeAttr('hidden');
                $('#pay-btn').attr('disabled', true)
            }
        })
        return false
    })


  <div class="tab-content mt-4 " id="card-tab" style="display:none">
    <form method="POST" action="{{ route('rentals.purchase', $plan) }}"
     class="card-form mt-3 mb-3">
       @csrf
        <input type="hidden" name="payment_method" class="payment-method">        
       <input type="hidden" name="system_id" value="{{ encrypt($system->id) }}">
       <input type="hidden" name="box_id" value="{{ encrypt($box->id) }}">

         <div class="mb-4">
         <input class="StripeElement form-input px-4 py-3 rounded-lg w-full"
          name="card_holder_name" placeholder="{{ __('rental.Cardholder 
             Name') }}">
                 </div>
             <div>
            <div id="card-element"></div>
              </div>
              <div id="card-errors" role="alert"></div>
               <div class="mt-3 text-center">
             <button type="submit" class="bg-red-500 text-white font-bold py-2 px-4 rounded" id="pay-btn">{{ __('rental.Pay') }} {{ $plan->price }} &euro; <span  class="icon" hidden><i class="fas fa-sync fa-spin"></i></span></button>
                                        </div>
                                    </form>
                                </div>



and this when I debug 
 #_originalValues: array:39 [▼
      "id" => "pi_3NZqdIC6ZwDjQHNX1R7KJLoO"
      "object" => "payment_intent"
      "amount" => 100
      "amount_capturable" => 0
      "amount_details" => array:1 [▼
        "tip" => []
      ]
      "amount_received" => 100

Answer 1

Based on the code you provided, you are using SetupIntents to collect the payment method details. SetupIntents are used to collect payment method details for future use: https://stripe.com/docs/payments/save-and-reuse. Expect the amount to be 0.00 if a 3DS is required since no amount will be charged to the card when you collect your payment method.

If you are using the subscription feature, you should follow this guide: https://stripe.com/docs/billing/subscriptions/build-subscriptions?ui=elements to collect and save payments at time of payment Way.

If you are using one-time payments, you can collect and save the payment method details at the same time as you make the payment: https://stripe.com/docs/payments/save-during-payment.