Stripe Elements error Unexpected identifier

#1

I am trying to use stripe elements in one of my views.

I get the error ’ Unexpected identifier’

Here is my code.

@layout('layouts.main')

@section('pageTitle')
  Pay Invoice # {{invoice.id}}
@endsection

@section('content')
<div class="text-blue text-xl mb-5 font-semibold">{{invoice.description}}</div>
  <div class="font-semibold text-lg">Invoice Lines</div>
  @!component('user.payments.invoice.invoicelines', lines=invoice.invoiceLines, invoiceTotal=invoiceTotal)

  <div class="mt-10">
  <div class="text-2xl font-semibold">Total to Pay: £{{invoiceTotal}}</div>
  <div>
      <form action="/charge" method="post" id="payment-form">
        <div class="form-row">
          <label for="card-element">
            Credit or debit card
          </label>
          <div id="card-element">
            <!-- A Stripe Element will be inserted here. -->
          </div>
      
          <!-- Used to display Element errors. -->
          <div id="card-errors" role="alert"></div>
        </div>
      
        <button>Submit Payment</button>
      </form>
  </div>
  </div>
  <script>
  var stripe = Stripe('pk_test_dQwL6N1GWlQJeVcyt8zz9o9I');
  var elements = stripe.elements();
  $('document').ready(()=>{
    // Custom styling can be passed to options when creating an Element.
    var style = {
      base: {
        // Add your base input styles here. For example:
        fontSize: '16px',
        color: "#32325d",
      }
    };

    // Create an instance of the card Element.
    var card = elements.create('card', {style: style});

    // Add an instance of the card Element into the `card-element` <div>.
    card.mount('#card-element');
  })
  </script>
@endsection

The debugger show this code as causing an error

* If template fn is a string, make sure to run
     * it inside a scope.
     */
    if (typeof (this.templateFn) === 'string') {
      /* eslint no-new-func: "off" */
      templateFn = new Function(this.templateFn) //*****Error is here
    }

    return templateFn.bind(this.scope)()
  }
}

This is my controller function

async index({ request, params, response, view, auth }) {
    var user = await auth.getUser()
    var invoice = await Invoice.query()
      .where('user_id', user.id)
      .where('id', params.invoiceid)
      .with('invoiceLines')
      .first()
    var invoiceTotal = await invoice.invoiceLines().getSum('value')
    return view.render('user.payments.pay.index', { invoice: invoice.toJSON(), invoiceTotal: invoiceTotal })
  }
0 Likes

#2

I got it working I had to put the stripe javascript code in a javascript file under the public folder and link to it in my view with {{ script('path/to/file') }}

0 Likes