Table.button is not a function

Good day, all. I am using Ajax to pull some data and populate a DataTable in Laravel. I now want to add export buttons to the table. I have tried the code below but the buttons do not load. After checking the console, I realized error saying "table.button is not a function". How can I solve this, please?

code to pull data:

      var table = $('#payments-table').DataTable({
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            processing: true,
            serverSide: true,
            ajax: '{{ route('get.payments') }}',
            order:[ [5,'desc'] ],
            columns: [

                { data: 'id', name: 'id' },
                { data: 'sub_id', name: 'sub_id' },
                { data: 'company_name', name: 'company_name'},
                { data: 'amount', name: 'amount'},
                { data: 'status', name: 'status'},
                { data: 'job_date', name: 'job_date'},
                { data: 'amount_payed', name: 'amount_payed'},
                { data: 'date_payed', name: 'date_payed'},
                { data: 'trn_ss', name: 'trn_ss'},
                { data: 'account_number', name: 'account_number'},
                { data: 'bank_name', name: 'bank_name'},
                { data: 'bank_branch', name: 'bank_branch'},
          ]

        });
        $('#btn-place').html(table.buttons().container()); 

HTML (Blade file)

    @extends('layouts.company')

    @section('content')
      <!-- Heading -->
      <div class="card mb-3">
        <div class="card-body d-sm-flex justify-content-between">
          <h4 class="h4-responsive mb-2 mb-sm-0 pt-1">
            <a href="{{route('admin.dashboard')}}">Home</a>
            <span><i class="fa fa-angle-double-right mx-2" aria-hidden="true"></i></span>
            <span>{{$title}}</span>
          </h4>
        </div>
      </div>

      @include('common.session_errors')

      <div class="card mb-2">
        <div class="card-body">
            <div id="btn-place" style="width: 25px; height: 25px"></div>
          <table class="table table-bordered" width="100%" id="payments-table">
            <thead>

              <tr>
                <th>Row-ID</th>
                <th>Sub ID</th>
                <th>Company Name</th>
                <th>Amount($)</th>
                <th>Status</th>
                <th>Job Date (y-m-d)</th>
                <th>Amount Paid ($)</th>
                <th>Date Paid (y-m-d)</th>
                <th>TRN/SS</th>
                <th>Account Number</th>
                <th>Bank</th>
                <th>Branch</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    @endsection