Search for PHP example new stripe "checkout" integration stripe-php

Question

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?

Answer 1

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>