javascriptphpstripe-paymentssca

stripe paymentIntent api | incomplete payment on stripe dashboard


I am migrating from Changes API to PaymentIntent API. I setup code successfully.

But I am wonder to see that every time I load the page stripe create a payment intent showing on stripe dashboad with "incomplete" payment status and after clicking payment button with all details this status turn to "successful" status.

PHP code

 $customer = \Stripe\Customer::create(array(
                'email' => $_SESSION['userEmail']
            ));
    $intent = \Stripe\PaymentIntent::create([
    'amount' => $varTotalPrice,
    'currency' => 'eur',
    'customer' => $customer->id,
    'payment_method_types' => ['card'],
    'description' => $arrCreditResult['creditTitle']
    ]);

As you know This provides me client_secret key using in js script.

JS code

<script type="text/javascript">
            var stripe = Stripe('<?php echo $pubkey; ?>');
            var elements = stripe.elements();
            var payBtnHtml = document.getElementById("submit").innerHTML;
            var card = elements.create('card', {
                style: {
                    base: {
                        iconColor: '#666EE8',
                        color: '#31325F',
                        lineHeight: '40px',
                        fontWeight: 600,
                        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                        fontSize: '15px',
                        '::placeholder': {
                            color: '#31325F',
                            fontWeight:300,
                            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                            fontSize: '15px'
                        }
                    }
                }
            });
            card.mount('#card-element');
            
            var cardholderName = document.querySelector('input[name=cardholder-name]');            
            var form = document.getElementById('payment-form');
            var clientSecret = document.getElementById('payment-form').getAttribute("data-secret");

            card.on('change', function(event) {
                var displayError = document.getElementById('card-errors');
                if (event.error) {
                    displayError.textContent = event.error.message;
                } else {
                    displayError.textContent = '';
                }
            });
                       
            var form = document.getElementById('payment-form');
            
            form.addEventListener('submit', function(ev) {
                ev.preventDefault();
                document.getElementById("submit").disabled = true;
                document.getElementById("submit").innerHTML = WAIT;
                stripe.confirmCardPayment(clientSecret, {
                    payment_method: {
                        card: card,
                        billing_details: {
                            name: cardholderName.value
                        }
                    }
                }).then(function(result) {
                    if (result.error) {
                        // Show error to your customer (e.g., insufficient funds)
                        document.getElementById("submit").disabled = false;
                        console.log(result.error.message);
                    } else {
                        // The payment has been processed!
                        if (result.paymentIntent.status === 'succeeded') {
                            document.getElementById("submit").disabled = false;
                            document.getElementById("payBtn").innerHTML=payBtnHtml
                            alert("paymemt done");
                            debug(result);
                            return false;
                            // Show a success message to your customer
                            // There's a risk of the customer closing the window before callback
                            // execution. Set up a webhook or plugin to listen for the
                            // payment_intent.succeeded event that handles any business critical
                            // post-payment actions.
                        }
                    }
                });
            });


        </script>

I want to create a payment on stripe only when user hit the pay button. same as with Charges API.


Solution

  • Thanks for suggestion specially @justinMichael

    After little hard work I find a working solution here:-

    https://github.com/stripe-samples/accept-a-card-payment

    Here I use method "without-webhooks":-

    https://github.com/stripe-samples/accept-a-card-payment/tree/master/without-webhooks/server/php

    This is easy to implement just need to make little changes.

    1. Change stripe keys.

    2. Check file path in stripe.js if you are renaming folder. Here they are using fetch("stripe-key.php") for keys and other stuff

    3. Make changes in pay.php file as per requirement.

    Some more useful links you may need:-

    1. https://stripe.com/docs/js/appendix/supported_locales
    2. https://stripe.com/docs/api/errors/handling
    3. https://stripe.com/docs/api/metadata