stripe paymentIntent api | incomplete payment on stripe dashboard

Question

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.

Answer 1

You can refactor your code to only create a Payment Intent when needed. The steps would be as follows:

1. Stop creating a Payment Intent every time the page loads and remove the data-secret attribute.
2. Create a URL on your server that will create a Payment Intent on demand and return its client secret (typically it will return this information in JSON).
3. In your JavaScript, when your customer presses the pay button, fetch the URL that creates a Payment Intent. Use the client secret in the response instead of the value of data-secret to complete the payment.

Answer 2

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