stripeJS

<script src="https://js.stripe.com/terminal/v1/"></script>
<script>

$(document).ready(function()
{
    discoverReaders();
});

var storage = window.localStorage;

var terminal = StripeTerminal.create({
    onFetchConnectionToken: fetchConnectionToken,
    onUnexpectedReaderDisconnect: unexpectedDisconnect,
});

function unexpectedDisconnect() {
  // You might want to display UI to notify the user and start re-discovering readers
}

function fetchConnectionToken() {
  // Your backend should call /v1/terminal/connection_tokens and return the JSON response from Stripe
  return fetch("{{ route('location-stripe-connection') }}?useCaseId={{ $useCaseId }}&organizationId={{ $organizationId }}&locationId={{ $locationId }}", { method: "POST" })
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      return data.secret;
    });
}

function checkout()
{
    // clientSecret is the client_secret from the PaymentIntent you created in Step 1.
    terminal.collectPaymentMethod('{{ $clientSecret }}').then(function(result)
    {
        if(result.error)
        {
            // Placeholder for handling result.error
            console.log('stripe error');
            console.log(result);
        }
        else
        {
            // Placeholder for processing result.paymentIntent
            console.log('stripe success');
            console.log(result);

            terminal.processPayment(result.paymentIntent).then(function(processPaymentResult)
            {
                if (processPaymentResult.error)
                {
                    // Placeholder for handling result.error
                    console.log('processPayment error');
                    console.log(processPaymentResult);
                    console.log(processPaymentResult.error.message);
                }
                else if (processPaymentResult.paymentIntent)
                {
                    // Placeholder for notifying your backend to capture result.paymentIntent.id
                    console.log('processPayment success');
                    console.log(processPaymentResult);
                    Livewire.emit('capturePaymentIntent');
                }
            });
        }
    });
}

function discoverReaders() {
  const config = {simulated: false}
  terminal.discoverReaders(config).then(function(discoverResult) {
    if (discoverResult.error) {
      console.log('Failed to discover: ', discoverResult.error);
    } else if (discoverResult.discoveredReaders.length === 0) {
      console.log('No available readers.');
    } else {
      // You should show the list of discoveredReaders to the
      // cashier here and let them select which to connect to (see below).
      console.log(discoverResult);
      connectReader(discoverResult);
    }
  });
}

function connectReader(discoverResult)
{
    // first, check for saved readerId
    // if not saved, show a dialog to select the reader

    var savedReaderId = storage.getItem('readerId');

    var readers = discoverResult.discoveredReaders;

    if(savedReaderId != null)
    {
        // a reader has already been selected
        // look for it in the discoverResult array
        for(var i=0; i<readers.length; i++)
        {
            var id = readers[i]['id'];

            if(id == savedReaderId)
            {
                connectToReader(discoverResult.discoveredReaders[i]);
            }
        }
    }
    else
    {
        // no reader has been selected yet
        // show available readers
        Livewire.emit('showStripeReaders', readers);
    }
}

function connectToReader(selectedReader)
{
    terminal.connectReader(selectedReader).then(function(connectResult)
    {
        if (connectResult.error)
        {
            console.log('Failed to connect: ', connectResult.error);
        }
        else
        {
            storage.setItem('readerId', selectedReader['id']);
            Livewire.emit('closeStripeLoading');
            console.log('Connected to reader: ', connectResult.reader.label);
        }
    });
}

function connectFromSelection(readerId)
{
    const config = {simulated: false};
    terminal.discoverReaders(config).then(function(discoverResult)
    {
        if (discoverResult.error)
        {
            // need error handling
            console.log('Failed to discover: ', discoverResult.error);
        }
        else if (discoverResult.discoveredReaders.length === 0)
        {
            // need error handling
            console.log('No available readers.');
        }
        else
        {
            // search for selected reader and connect
            var readers = discoverResult.discoveredReaders;

            for(var i=0; i<readers.length; i++)
            {
                var id = readers[i]['id'];

                if(id == readerId)
                {
                    connectToReader(discoverResult.discoveredReaders[i]);
                }
            }

            // need error handling if this point is reached
        }
    });
}

// updates the screen on the card reader for the customer
window.addEventListener('prices-updated', event => {

    console.log('prices-updated');
    console.log(event.detail.info);

    var info = [];

    $(event.detail.info).each(function($index)
    {
        info[$index] = {
            description: this[0],
            quantity: this[1],
            amount: this[2] * 100,
        }
    });

    var subtotal = $('#subtotal').val();
    var tax = $('#tax').val();
    var total = $('#total').val();

    terminal.setReaderDisplay({

        type: 'cart',
        cart: {
            line_items: info,
            tax: tax * 100,
            total: total * 100,
            currency: 'usd',
        }

    });

});

</script>