Stripe authorisation and capture in two steps

gistfile1.txt

def confirm_ts
   [...]
    else
      set_cart_authorisation(@cart)
      Stripe.api_key = @cart.shop.private_key
      intent = Stripe::PaymentIntent.create({
        amount: @authorisation.to_i,
        currency: 'eur',
        payment_method_types: ['card'],
        capture_method: 'manual',
        statement_descriptor_suffix: ('cart_' + @cart.id.to_s) },
        { idempotency_key: (@cart.id.to_i + '_' + @cart.created_at.to_i) }
      )  
      {client_secret: intent.client_secret}.to_json
  puts response.body
  puts params
  puts payment_intent['client_secret']
end

    def set_cart_authorisation(cart)
      cart_value = cart.cartitems.sum(:price_ordered).floor(2).to_d
      set_cart_excess(cart)
      @authorisation = (cart_value + cart.preparation_charge + cart.delivery_charge + @excess) * 100
    end
  
    def set_cart_excess(cart)
      @excess = 0.00
      if cart.excess_allowed?
        @excess = 5.00
      end
    end



###   view

<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit" class='button'><%= t('cart.checkout').capitalize %></button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

      <script type="text/javascript">
        const stripe = Stripe('<%= @cart.shop.api_key %>');

        const options = {
          clientSecret: '<%= @cart.note %>',
          // Fully customizable with appearance API.
          // appearance: {/*...*/},
        };
        
        // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 2
        const elements = stripe.elements(options);
        
        // Create and mount the Payment Element
        const paymentElement = elements.create('payment');
        paymentElement.mount('#payment-element');

        const form = document.getElementById('payment-form');
        
        form.addEventListener('submit', async (event) => {
          event.preventDefault();        
          const {error} = await stripe.confirmPayment({
            //`Elements` instance that was used to create the Payment Element
            elements,
            confirmParams: {
              return_url: '<%= cart_authorised_acqs_url(cart_id: @cart.id) %>',
            },
          });
        
          if (error) {
            // This point will only be reached if there is an immediate error when
            // confirming the payment. Show error to your customer (e.g., payment
            // details incomplete)
            const messageContainer = document.querySelector('#error-message');
            messageContainer.textContent = error.message;
          } else {
            // Your customer will be redirected to your `return_url`. For some payment
            // methods like iDEAL, your customer will be redirected to an intermediate
            // site first to authorize the payment, then redirected to the `return_url`.
          }
        });
      </script>    

### rendered in example

<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit" class='button'>Passa alla cassa</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>


      <script type="text/javascript">
        const stripe = Stripe('pk_test_51IagCHDmsydfiQ8jo1O2YSqBE1wKiqg9T06K4qdfDJ3kwXgAH3YyqhO7xJKu5JJgqv3h9eSCSJutgIuxj212Qjjf00nSEqPpHy');

        const options = {
          clientSecret: 'pi_3K7yU5DmsydfiQ8j4lbm8nFN_secret_gCS1Q9isasqMma0V53qfOnMHv',
          // Fully customizable with appearance API.
          // appearance: {/*...*/},
        };
        
        // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 2
        const elements = stripe.elements(options);
        
        // Create and mount the Payment Element
        const paymentElement = elements.create('payment');
        paymentElement.mount('#payment-element');

        const form = document.getElementById('payment-form');
        
        form.addEventListener('submit', async (event) => {
          event.preventDefault();        
          const {error} = await stripe.confirmPayment({
            //`Elements` instance that was used to create the Payment Element
            elements,
            confirmParams: {
              return_url: 'https://e696-5-171-89-255.ngrok.io/acqs/cart_authorised?cart_id=33',
            },
          });
        
          if (error) {
            // This point will only be reached if there is an immediate error when
            // confirming the payment. Show error to your customer (e.g., payment
            // details incomplete)
            const messageContainer = document.querySelector('#error-message');
            messageContainer.textContent = error.message;
          } else {
            // Your customer will be redirected to your `return_url`. For some payment
            // methods like iDEAL, your customer will be redirected to an intermediate
            // site first to authorize the payment, then redirected to the `return_url`.
          }
        });
      </script>