I just started implementing the mollie api to handle payments on my website. You need a url to redirect to and a url as a webhook to update payment states. I'm still developing the website locally, but localhost as a url isn't an option ofcourse. I installed ngrok and tried the HTTPS URL assigned to me when running the ngrok http command.
when i access my website with the HTTP link everything looks fine, But when i go to my website via the HTTPS link my website fails to load in my own css scripts and chrome tells me the website is not secure, but my ssl certificate is valid (probably not secure because its self-signed)?
i tried to test the api anyhow by ordering something on the (broken https) website but after confirming the order i get a 419 error response (i develop my website in laravel 8).
So sorry if i left out crucial information, i'm the biggest noob when it comes to networking and i didn't even know where to begin.
EDIT: Here is additional information on what my problem is.
Im testing the payment api from mollie in my laravel controller where i create an order.
public function order(CreateOrderRequest $request){
$baseUrl = 'https://xxxx-xxx-xx-xxx-xx.ngrok.io/';
$payment = $this->mollie->payments->create([
"amount" => [
"currency" => "EUR",
"value" => "10.00"
],
"description" => "My first API payment",
"redirectUrl" => $baseUrl."/order/besteld",
"webhookUrl" => $baseUrl."/order/betaalupdate/".$id,
]);
dd($payment);
return redirect()->to($payment->getCheckoutUrl(), 303);
}
this controller is called from the route:
Route::post('/winkelwagen/bestellen/bevestig', [CartController::class, 'order'])->name('orderConfirmed');
which is called from the following form:
<form action="{{route('orderConfirmed')}}" method="post" class="d-block">
@csrf
<div class="row">
<div class="col-12 col-lg-6">
<h4 class="fat-title display-4 text-center mt20 text-white"><span class="text-color-light">AFLEVER</span>ADRESS</h4>
<hr class="hrdark mb40 mt40">
<div class="row">
<div class="col-12 col-md-6 mb20">
<label for="naam" class="fat-title">Volledige Naam</label>
<input id="naam" type="text" class="form-control" placeholder="Mary Fuego" name="naam"
@if($user != null) value="{{$user->naam}}" @endif required>
</div>
<div class="col-12 col-md-6 mb20">
<label for="email" class="fat-title">Email</label>
<input id="email" type="email" class="form-control" placeholder="Example@fuego.nl" name="email"
@if($user != null) value="{{$user->email}}" @endif required>
</div>
<div class="col-12 col-md-6 mb20">
<label for="tel" class="fat-title">Telefoonnummer</label>
<input id="tel" type="tel" class="form-control" placeholder="0612345678" name="tel">
</div>
<div class="col-12 col-md-6 mb20">
<label for="plaats" class="fat-title">Plaats</label>
<input id="plaats" class="form-control" type="text" placeholder="Holten" name="plaats" required>
</div>
<div class="col-6 col-md-3 mb20">
<label for="postcode" class="fat-title">Postcode</label>
<input id="postcode" class="form-control" type="text" minlength="4" maxlength="6" placeholder="7451PJ" name="postcode" required>
</div>
<div class="col-6 col-md-3 mb20">
<label for="huisnummer" class="fat-title">Huisnummer</label>
<input id="huisnummer" class="form-control" type="text" placeholder="1" min="1" name="huisnummer" required>
</div>
<div class="col-6 col-md-3 mb20">
<label for="toevoeging" class="fat-title">Toev. (opt.)</label>
<input id="toevoeging" class="form-control" type="text" placeholder="A" min="1" name="toevoeging">
</div>
<div class="col-6 col-md-3 mb20">
<label for="straat" class="fat-title">Straat</label>
<input id="straat" class="form-control" type="text" placeholder="Handelsweg" name="straat" required>
</div>
@if($user != null)
<div class="col-12 mb20">
<button class="btn darkgraybg text-white w-100 btn-widetxt"
data-bs-toggle="dropdown" aria-expanded="false" type="button">laad adress</button>
<div class="dropdown-menu softgreybg pb20 pt20 pr20 pl20">
<label for="addresscopy" class="fat-title">Adress</label>
<select class="form-select form-control" id="addresscopy" onchange="loadAdress(parseInt(this.value))">
<option value="0">Geen Adress Laden</option>
@foreach($addresses as $address)
<option value="{{$address->id}}">{{$address->plaats}} {{$address->straat}} {{$address->huisnummer}} {{$address->toevoeging}}</option>
@endforeach
</select>
</div>
</div>
<input type="hidden" name="user_id" value="{{$user->id}}">
@endif
</div>
</div>
<div class="col-12 col-lg-6">
<h4 class="fat-title display-4 text-center mt20 text-white"><span class="text-color-light">BETAAL</span>METHODE</h4>
<hr class="hrdark mb40 mt40">
<button type="submit" class="btn btn-orange btn-widetxt w-100">
BESTELLEN
</button>
</div>
</div>
</form>
After submitting this form on the https page i get a 419 PAGE EXPIRED, which isnt logged. After submitting it via http i get an error in the mollie client that i have to have an SSL
