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 = StripeCustomer::create(array( 'email' => $_SESSION['userEmail'] ));
$intent = StripePaymentIntent::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.
Advertisement
Answer
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.
Change stripe keys.
Check file path in stripe.js if you are renaming folder. Here they are using fetch(“stripe-key.php”) for keys and other stuff
Make changes in pay.php file as per requirement.
Some more useful links you may need:-