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.
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.
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>