I am trying to integrate Stripe in a php project and all is working fine except the fact that the payment intent client_secret is always null and I actually know why but couldn't figure how to fix it, I am using a javascript file in which there is a listener for the submit button for the payment intent creation. The problem is that the listener try to fetch the json data before its creation, the client_secret value is null because I am setting its value just after creating the payment intent, how could solve this? any advice could help, thanks.
Here is the code I wrote:
intent.php:
$intent= \Stripe\PaymentIntent::create(
array(
'amount' => $price + ($price * $tva),
'currency' => 'EUR',
'setup_future_usage' => 'off_session',
)
);
$intentcls=$intent->client_secret;
intent.js:
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
var response = fetch('/secret').then(function(response) {
return response.json();
}).then(function(responseJson) {
var clientSecret = responseJson.client_secret;
stripe.confirmCardPayment(
clientSecret,
{
payment_method: {card: card}
}
).then(function(result) {
if (result.error) {
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
var errorElement = document.getElementById('card-errors');
errorElement.textContent = 'Paiement effectué avec succées';
stripeTokenHandler(result.token);
}
});
secret.php:
echo json_encode(array('clientsecret' => $intentcls));
You'll need to rearrange your logic to ensure the PaymentIntent is created before (or during) your fetch request to the backend.
If you already know the amount, you could create the PaymentIntent on page load.
A better solution is to create it when the call to /secret is made, then return the client_secret after the creation call to the Stripe API is complete.
secret.php could be:
$intent = \Stripe\PaymentIntent::create(
array(
'amount' => $amount, // calculate amount before this block
'currency' => 'EUR',
'setup_future_usage' => 'off_session',
)
);
echo json_encode(array('client_secret' => $intent->client_secret));
// perhaps store the ID in your database here
Related
I am using Stripe's 'Payment' element for creating paymentintent and card charges, Using PHP, HTML & JS.
https://stripe.com/docs/payments/payment-element
a) As soon as i load the payment page, Stripe generates a paymentintent with status 'Incomplete'.
b) After i enter Credit Card details and hit 'pay', Stripe again issues a second paymentintent with status accordingly (say 'Succeeded')
The result is, that my Dashboard is now full of unnecessary records
This is, because i initialize the $paymentIntent = \Stripe\PaymentIntent::create as soon as the page loads.
I understand that this is Stripe default behaviour, because at that moment, no payment_method is attached yet.
My question is: How is this resolved best, to avoid such 'Incomplete' records?
Maybe attach an object and fire the paymentintent creation only when
that object is present?
Or onclick of the 'pay' button..awaiting paymentintent, confirm presence and then submit the form?
Or retrieve that 1st paymentintent, store it and then update with
form submission?
create.php
header('Content-Type: application/json');
try {
// retrieve JSON from POST body
$jsonStr = file_get_contents('php://input');
$jsonObj = json_decode($jsonStr);
// Create a PaymentIntent with amount and currency
$paymentIntent = \Stripe\PaymentIntent::create([
'amount' => 1000,
'currency' => 'eur',
'receipt_email' => 'whatever#mail.com',
'automatic_payment_methods' => ['enabled' => true,],
'description' => 'Reservation Dimi123 / Name: John Doe',
'metadata' => ['order_id' => '12345']
]);
$output = [
'clientSecret' => $paymentIntent->client_secret,
];
echo json_encode($output);
} catch (Error $e) {
http_response_code(500);
echo json_encode(['error' => $e->getMessage()]);
}
script.js
const stripe = Stripe("pk_test_..");
let elements;
initialize();
checkStatus();
document
.querySelector("#payment-form")
.addEventListener("submit", handleSubmit);
// Fetches a payment intent and captures the client secret
async function initialize() {
const { clientSecret } = await fetch("../create.php", {
method: "POST",
headers: { "Content-Type": "application/json" },
}).then((r) => r.json());
elements = stripe.elements({ clientSecret });
const paymentElement = elements.create("payment");
paymentElement.mount("#payment-element");
}
async function handleSubmit(e) {
e.preventDefault();
setLoading(true);
const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "https://localhost/stripe/prebuilt-checkout-custom-flow/public/checkout.html",
},
});
if (error.type === "card_error" || error.type === "validation_error") {
showMessage(error.message);
} else {
showMessage("An unexpected error occurred.");
}
setLoading(false);
}
How to Avoid Incomplete Payment Intents? You don't.
his is how the system is designed to function since you need the client_secret from the Payment Intent (or Setup Intent) to render the Payment Element. There is no negative impact to your account.
You should feel comfortable ignoring them. You can adjust the filters in your Payments tab to not see them. They aren't a great metric of individual customers coming to your payment interface and navigating away since any user refreshing their browser would trigger a new one.
I'm using the below script to take payments via Stripe checkout V3. I was hoping this would make my payments SCA Ready, however i'm being told my payments are still not SCA ready. Am i missing some code from the below?
var stripe = Stripe('XXXX');
var elements = stripe.elements();
var card = elements.create('card', {
style: style
});
// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function (event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission
var form = document.getElementById('payment-form');
form.addEventListener('submit', function (event) {
event.preventDefault();
stripe.createToken(card).then(function (result) {
if (result.error) {
// Inform the user if there was an error
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
stripeTokenHandler(result.token);
}
});
});
// Send Stripe Token to Server
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
// Add Stripe Token to hidden input
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit form
form.submit();
}
Here is my charge code ...
\Stripe\Stripe::setApiKey('XXXX');
$error = '';
$success = '';
try {
if (!isset($_POST['stripeToken']))
throw new Exception("The Stripe Token was not generated correctly");
$charge = \Stripe\Charge::create(
array(
'amount' => $_POST['stripeAmount'],
'currency' => 'gbp',
'source' => $_POST['stripeToken'],
"receipt_email" => $_SESSION["email"],
'description' => 'Booking - ' . $_SESSION['description'],
)
);
To be SCA compliant you need to be using the paymentIntents API
Your current code suggests you are using the charges-api.
There is a full migration guide here.
Basically you need to replace calls from the client:
stripe.createToken(card)
with:
stripe.createPaymentMethod(
'card',
cardElement
)
and calls in the server from:
$charge = \Stripe\Charge::create([
'source' => $json_obj->token_id,
'amount' => 1099,
'currency' => 'eur',
]);
to
$intent = \Stripe\PaymentIntent::create([
'payment_method' => $json_obj->payment_method_id,
'amount' => 1099,
'currency' => 'eur',
'confirmation_method' => 'manual',
'confirm' => true,
]);
After that you need to handle possible additional actions as explained here
I'm integrating Stripe Payment Intent API and it's working well where 3D secure is not required, 3D secure authorization is popping up but I think I'm missing return_url to confirm the payment.
Where do I need to mention return_url for 3D Secure in PaymentIntent?
I've tried multiple times but got stuck on 3D Secure Authorize. It returns an error in the object.
I've mentioned the code of view and controller below.
Thanks in Advance
Client Side Code:
form.addEventListener('submit', function(event) {
event.preventDefault();
$('#card-button').html('<i class="fa fa-circle-o-notch fa-spin" style="font-size:24px"></i>');
var fname = $('#firstname2').val();
var lname = $('#lastname2').val();
var cardholderName = fname + " " + lname;
var cardButton = document.getElementById('card-button');
var form_data = $("#payment-form").serialize();
cardButton.addEventListener('click', function(ev) {
stripe.createPaymentMethod('card', cardElement, {
billing_details: {name: cardholderName}
}).then(function(result) {
if (result.error) {
// Show error in payment form
} else {
console.log(result);
// Otherwise send paymentMethod.id to your server (see Step 2)
fetch('<?php echo base_url(); ?>payment/stripe_test/process_payment',
{
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ payment_method_id: result.paymentMethod.id, customer_detail: form_data})
}).then(function(result) {
// Handle server response (see Step 3)
result.json().then(function(result) {
console.log("Response" + result);
handleServerResponse(result);
});
});
}
});
});
}
function handleServerResponse(response) {
if (response.error) {
// Show error from server on payment form
} else if (response.requires_action) {
var action = response.next_action;
if (action && action.type === 'redirect_to_url') {
window.location = action.redirect_to_url.url;
}
// Use Stripe.js to handle required card action
stripe.handleCardAction(
response.payment_intent_client_secret
).then(function(result) {
if (result.error) {
// Show error in payment form
} else {
// The card action has been handled
// The PaymentIntent can be confirmed again on the server
fetch('<?php echo base_url(); ?>payment/stripe_test/process_payment', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ payment_intent_id: result.paymentIntent.id })
}).then(function(confirmResult) {
return confirmResult.json();
}).then(handleServerResponse);
}
});
} else {
// Show success message
console.log("3D" + response);
}
}
CodeIgniter Controller:
//PaymentIntent Function
function process_payment() {
require_once (APPPATH."third_party/stripe/init.php");
$key = "STRIPE_KEY_HERE";
header('Content-Type: application/json');
# retrieve json from POST body
$json_str = file_get_contents('php://input');
$json_obj = json_decode($json_str);
$intent = null;
try {
if (isset($json_obj->payment_method_id)) {
# Create the PaymentIntent
//STRIPE PAYMENT INTENT
\Stripe\Stripe::setApiKey($key);
// Create a Customer:
$customer = \Stripe\Customer::create([
'email' => 'client#gmail.com',
]);
// Attach payment method to the customer:
$customer_detail = $json_obj->customer_detail;
$intent = \Stripe\PaymentIntent::create([
'payment_method' => $json_obj->payment_method_id,
'amount' => 1099,
'currency' => 'GBP',
'confirmation_method' => 'manual',
"customer" => $customer->id,
'confirm' => true,
]);
}
if (isset($json_obj->payment_intent_id)) {
$intent = \Stripe\PaymentIntent::retrieve(
$json_obj->payment_intent_id
);
$intent->confirm();
}
$this->generatePaymentResponse($intent);
} catch (\Stripe\Error\Base $e) {
# Display error on client
echo json_encode([
'error' => $e->getMessage()
]);
}
}
generatePaymentResponse Function:
function generatePaymentResponse($intent) {
if ($intent->status == 'requires_source_action' &&
$intent->next_action->type == 'use_stripe_sdk') {
# Tell the client to handle the action
echo json_encode([
'requires_action' => true,
'payment_intent_client_secret' => $intent->client_secret
]);
} else if ($intent->status == 'succeeded') {
# The payment didn’t need any additional actions and completed!
# Handle post-payment fulfillment
echo json_encode([
"success" => true
]);
} else {
# Invalid status
http_response_code(500);
echo json_encode(['error' => 'Invalid PaymentIntent status']);
}
}
As mentioned in comments, you don't need to specify return_url, because in your case Stripe will use Popup for 3DS confirmation, not redirecting.
You missed two things in your code:
1. In function generatePaymentResponse add condition for $intent->status === 'requires_action'.
2. On Payment Intent confirmation ($intent->confirm();) you missed to set api key (\Stripe\Stripe::setApiKey($key);)
I have tested your code and it works with mentioned modifications.
Stripe updated the API and few statuses were renamed so the major reason was that I was using requires_source_action as status so replaced it with requires_action.
Stripe Update - 2019-02-11
Some PaymentIntent statuses have been renamed
requires_source is now requires_payment_method
requires_source_action is now requires_action
All other statuses are unchanged
save_source_to_customer has been renamed to save_payment_method.
allowed_source_types has been renamed to payment_method_types.
The next_source_action property on PaymentIntent has been renamed to next_action, and the authorize_with_url within has been renamed to redirect_to_url.
You can find Stripe Api upgrades here: https://stripe.com/docs/upgrades#api-versions.
What do I have to change in my code to immigrate from legacy stripe checkout to the new checkout?? I am confused with their wording. And most examples I find are old (2015-1016...and are the "old way")
Stripe wants me to upgrade to new checkout because of SCA
This is my working stripe checkout, I have a button that opens the checkout box
<script>
var handler = StripeCheckout.configure({
key: '<? echo $stripe_p_key;?>',
image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
locale: 'auto',
token: function(token) {
var $form = $('#f2');
var token = token.id;
showloader('loaderid');
$form.prepend($('<input type="hidden" style="display:none" name="stripeToken">').val(token));
$form.prepend($('<input type="hidden" style="display:none" name="cc_currency">').val('<? echo $dialog_waehrung_kreditkarte;?>'));
$form.get(0).submit();
}
});
document.getElementById('customButton').addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
name: '',
description: '<? echo $dialog_titel;?>',
zipCode: true,
currency: '<? echo $dialog_waehrung_kreditkarte;?>',
email: '<? echo $dialog_email_kreditkarte;?>',
amount: <? echo $dialog_preis_kreditkarte;?>
});
e.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>
then I charge the card in the next step
Stripe::setApiKey($params['private_live_key']);
$pubkey = $params['public_live_key'];
try {
$charge = Stripe_Charge::create(array(
"amount" => $amount_cents,
"currency" => $_SESSION['cc_currency'],
"source" => $_SESSION['stripeToken'],
"description" => $description,
"expand" =>array("balance_transaction")
)
);
If no error is thrown I forward the customer to his download page.
I want a very simple way, I do not need customers, bills, recruing payments or whatever..just single payments. I do not want customers address or such things. Payment and goodbye...
Stripe says I have to change this process.
But their example is confusing for me:
https://stripe.com/docs/payments/checkout/migration#api-products
(I did never create a customer for exampley...why should I?)
Can someone tell me what I have to do to migrate to the new checkout version?
Basic setup (you can build it up from here)
Back-end:
Update your Stripe PHP Library.
Change from \Stripe\Charge to \Stripe\PaymentIntent following this format:
$charge = \Stripe\Charge::create([
'source' => $token_id,
'amount' => $amount,
'currency' => 'usd',
]);
$intent = \Stripe\PaymentIntent::create([
'payment_method_data' => [
'type' => 'card',
'card' => ['token' => $token_id],
],
'amount' => $amount,
'currency' => 'usd',
'confirmation_method' => 'manual',
'confirm' => true,
]);
Front-end:
Update your Stripe JS to use v3.
<script src='https://js.stripe.com/v3/' type='text/javascript'></script>
Update JS code that handles your payment form:
document.addEventListener("DOMContentLoaded", function(event) {
var stripe = Stripe('xxxxxxxxxx'); // test publishable API key
var elements = stripe.elements();
var card = elements.create('card');
// Add an instance of the card UI component into the `card-element` <div>
card.mount('#card-element');
// Handle events and errors
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
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();
}
function createToken() {
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if 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);
}
});
};
// Create a token when the form is submitted.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(e) {
e.preventDefault();
createToken();
});
});
Edit your HTML form:
<form action="process_payment.php" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element"><!-- Your form goes here --></div>
</div>
<!-- Used to display form errors -->
<div id="card-errors" role="alert"></div>
</div>
<button type="submit">Pay</button>
</form>
With the new SCA regulations coming in as you mentioned in your comment, you need to use Payment methods and Payment intents now.
Basically from taking a look at your sample code you will need to rewrite pretty much everything (if you haven't already)
Their current docs are here -> https://stripe.com/docs/payments/checkout
The reason for Payment Intents and Payment methods is due to SCA - https://stripe.com/docs/strong-customer-authentication
They have a migration guide too which can be found on the side bar.
However from their examples this is how you would create your new payment intent
$intent = \Stripe\PaymentIntent::create([
'amount' => 1099,
'currency' => 'gbp',
]);
Here is also their guide for migrating from the charges API - it has a tab for stripe.js V2 if you've been using it https://stripe.com/docs/payments/payment-intents/migration
I agree. We have been using Stripe Checkout for about a year. The original implementation was dead easy. Trying to migrate to SCA compliant code is just a mess. Their online Chat is useless, and from the response in Chat, they bascially don't care if you stay with them or go.
We're going to revert to PayPal which we used before and look for an alternative payment processor.
Here is my situation, i'm implementing Custom Stripe Checkout with Stripe PHP Api.
I have requested a post Method using jquery like this one >
var handler = StripeCheckout.configure({
key: 'pk_test_yGQM97VuEUdttuOOFQcyaPHW',
image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
locale: 'auto',
token: function (token) {
// You can access the token ID with `token.id`.
// Get the token ID to your server-side code for use.
$.post(
'charge.php',
{
sT: token.id,
sE: token.email
}, function (data) {
console.log(data);
}
);
}
});
var thePayment = document.getElementById('pay-amount');
if (thePayment) {
thePayment.addEventListener('click', function (e) {
var desc = $('#pay-amount').attr('data-desc');
var amount = Number($('#pay-amount').attr('data-amount'));
var email = $('#pay-amount').attr('data-email');
// Open Checkout with further options:
handler.open({
name: 'Test',
description: desc,
amount: amount,
email: email,
allowRememberMe: false
});
e.preventDefault();
});
}
// Close Checkout on page navigation:
window.addEventListener('popstate', function () {
handler.close();
});
And the PHP side is just like this one >
require_once('html/includes/vendor/autoload.php');
$stripe = array(
"secret_key" => "sk_test_nJxSc9Yw716tLBWTa9HHMxhj",
"publishable_key" => "pk_test_yGQM97VuEUdttuOOFQcyaPHW"
);
$charge_reply = array();
\Stripe\Stripe::setApiKey($stripe['secret_key']);
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$token = $_POST['sT'];
$email = $_POST['sE'];
$customer = \Stripe\Customer::create(array(
'email' => $email,
'source' => $token
));
$charge = \Stripe\Charge::create(array(
"amount" => 1000,
"currency" => "usd",
"source" => $customer->id,
"email" => $email,
"description" => "Example charge"
));
$charge_reply[] = [
'token' => $token,
'email' => $email
];
sendJson($charge_reply);
return;
}
I have also enabled the curl,json,mbstring in php. But the function that accepts after requesting a post method to the charge.php, prints POST http://example.com/charge.php 500 (Internal Server Error) in the console log.
So is there any way i can fix this?
500 (Internal Server Error) is something wrong in your code which means their is a fatal error.
To find the error you should use below code in your top of the page.
ini_set('display_errors',1);
error_reporting(E_ALL);
It will return the exact error so can fix it.
Note: Do not use it in production environment this for your local development.