I am receiving this error on my console
bigdunes.lovestoblog.com/:1 Access to fetch at 'https://infinityfree.net/errors/404/' (redirected from 'http://bigdunes.lovestoblog.com/checkout_sessions') from origin 'http://bigdunes.lovestoblog.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Here is my link of web you can see also http://bigdunes.lovestoblog.com/
but on my web i see cross error
var stripe = Stripe('pk_test_51JWkHLK7X12cK8Ptf5y5DQn6Ugf6miu3AqSuhH9wdLsyTB9ouf0TY31vDQxq19xIt6YH76uMTEX1kU9HMyrcEb6w00MTxHnGxc'); var cause = document.getElementById('cause'); var amount = document.getElementById('amount'); var currency = document.getElementById('currency'); var btn = document.getElementById('btn'); btn.addEventListener('click', async (e) => { e.preventDefault(); fetch('/checkout_sessions', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ cause: cause.value, currency: currency.value, amount: parseInt(amount.value * 100, 10), }), }) .then((response) => response.json()) .then((session) => { stripe.redirectToCheckout({ sessionId: session.id }); }) .catch((error) => { console.error('Error:', error); }); }); })();
<!doctype html> <html lang="en"> <head> <title>Title</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://js.stripe.com/v3/"></script> <style> .small-img-group { display: flex; justify-content: space-between; } .small-img-col { flex-basis: 24%; cursor: pointer; } .counter1 { float: left; display: flex; justify-content: space-between; overflow-x: hidden; overflow-y: hidden; } .counter2 { float: left; display: flex; justify-content: space-between; overflow-x: hidden; overflow-y: hidden; padding-left: 15px; } .up, .down { display: inline-block; color: rgb(0, 0, 0); font-size: 29px; margin: 1px 1px; cursor: pointer; width: 23px; line-height: 14px; height: 26px; text-align: center; font-weight: bold; border: 1px solid orangered; user-select: none; } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #dad55e; background: orangered; color: #ffffff; } .up:hover, .down:hover { color: #fd0b3f; text-align: center; } .adults { padding-right: 5px; } .children { padding-right: 5px; } input { appearance: none; height: 28px; text-align: center; width: 63px; line-height: 24px; font-size: 20px; border-radius: 5px; border-color: orangered; } input[type="radio"] { display: none; } label[for=private] { position: relative; color: orangered; font-size: 20px; border: 2px solid orangered; border-radius: 5px; align-items: left; display: flex; cursor: pointer; margin-right: 10px; } label[for=shared] { position: relative; color: orangered; font-size: 20px; border: 2px solid orangered; border-radius: 5px; align-items: left; display: flex; cursor: pointer; } label[for=withatv] { position: relative; color: orangered; font-size: 20px; border: 2px solid orangered; border-radius: 5px; align-items: left; display: flex; cursor: pointer; margin-right: 10px; } label[for=withoutatv] { position: relative; color: orangered; font-size: 20px; border: 2px solid orangered; border-radius: 5px; align-items: left; display: flex; cursor: pointer; } input[type="radio"]:checked+label { background-color: orangered; color: white; } input[type="radio"]:checked+label:before { height: 16px; width: 16px; border: 10px solid white; background-color: orangered; } </style> </head> <body> <section class="container sproduct my-5 pt-5"> <div class="row mt-5"> <div class="col-lg-5 col-md-12 col-12"> <img class="img-fluid w-100 pb-1" src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="" id="MainImg" width="450"> <div class="small-img-group"> <div class="small-img-col"> <img src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg" width="100%" class="small-img" alt=""> </div> <div class="small-img-col"> <img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt=""> </div> <div class="small-img-col"> <img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt=""> </div> <div class="small-img-col"> <img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt=""> </div> </div> </div> <div class="col-lg-6 col-md-12 col-12"> <h6 style="padding-top: 20px;">Home / Morning Safari</h6> <h3>Morning Safari</h3> <h2><label> Total AED:</label><input type="number" id="amount"class="total Price" readonly></label></h2> <p><input type="text" id="datepicker" style="width: 120px;" autocomplete="off" placeholder="Date" readonly/></p> <div class="counter1"> <Label class="Adults">Adults</Label> <div class='down' onclick='decreaseCount(event, this)'>-</div> <input id="adults" type='text' value='1' readonly> <div class='up' onclick='increaseCount(event, this)'>+</div> </div> <div class="counter2"> <Label class="Children">Children</Label> <div class='down' onclick='decreaseCount2(event, this)'>-</div> <input id="children" type='text' value='0' readonly> <div class='up' onclick='increaseCount(event, this)'>+</div> </div> <div style="display: flex; width: 100%"> <input type="radio" name="occupancy" id="private" checked="checked" onclick="updateTotal()"> <label for="private" style="width: 74px;">Private</label> <input type="radio" name="occupancy" id="shared" onclick="updateTotal()"> <label for="shared" style="width: 74px;">Shared</label> </div> <div style="display: flex; width:100%"> <input type="radio" name="atv" id="withatv" checked="checked" onclick="updateTotal()"> <label for="withatv" style="width: 94px;">With ATV</label> <input type="radio" name="atv" id="withoutatv" onclick="updateTotal()"> <label for="withoutatv" style="width: 119px;">Without ATV</label> </div> <div class="field"> <label for="cause">Cause</label> <select id="cause"> <option value="cause-a">cause a</option> <option value="cause-b">cause b</option> </select> </div> <div class="field"> <label for="currency">Currency</label> <select class="field" id="currency"> <option value="cad">CAD</option> <option value="eur">EUR</option> <option value="usd">USD</option> </select> </div> <div class="field"> <button type="submit" id="btn">Donate</button> </div> </div> </div> </section> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="donate.js" charset="utf-8"></script> <script> function increaseCount(e, el) { var input = el.previousElementSibling; var value = parseInt(input.value, 10); value = isNaN(value) ? 0 : value; value++; input.value = value; updateTotal(); } function decreaseCount(e, el) { var input = el.nextElementSibling; var value = parseInt(input.value, 10); if (value > 1) { value = isNaN(value) ? 0 : value; value--; input.value = value; updateTotal(); } } function decreaseCount2(e, el) { var input = el.nextElementSibling; var value = parseInt(input.value, 10); if (value > 0) { value = isNaN(value) ? 0 : value; value--; input.value = value; updateTotal(); } } $('#datepicker').datepicker({ minDate:0 }) var MainImg = document.getElementById('MainImg'); var smallimg = document.getElementsByClassName('small-img'); smallimg[0].onclick = function() { MainImg.src = smallimg[0].src; } smallimg[1].onclick = function() { MainImg.src = smallimg[1].src; } smallimg[2].onclick = function() { MainImg.src = smallimg[2].src; } smallimg[3].onclick = function() { MainImg.src = smallimg[3].src; } function calculateTotal() { const privateAdultPrice = 100; const sharedAdultPrice = 40; const privateChildrenPrice = 50; const sharedChildrenPrice = 30; const withAtvAdultPrice = 100; const withAtvChildrenPrice = 80; const noAtvPrice = 0; const adults = +document.querySelector('#adults').value; const children = +document.querySelector('#children').value; const isPrivate = document.getElementById('private').checked; const isWithAtv = document.getElementById('withatv').checked; const adultTripPrice = isPrivate ? privateAdultPrice : sharedAdultPrice; const childrenTripPrice = isPrivate ? privateChildrenPrice : sharedChildrenPrice; const adultVehiclePrice = isWithAtv ? withAtvAdultPrice : noAtvPrice; const childrenVehiclePrice = isWithAtv ? withAtvChildrenPrice : noAtvPrice const adultPrice = adults * (adultTripPrice + adultVehiclePrice) const childrenPrice = children * (childrenTripPrice + childrenVehiclePrice) return adultPrice + childrenPrice; } function updateTotal() { const total = calculateTotal(); console.log(total); document.querySelector('#amount').value = total; } updateTotal(); </script> </body> </html>
<?php ini_set('display_errors',1); error_reporting(E_ALL); use SlimHttpRequest; use SlimHttpResponse; use StripeStripe; require 'vendor/autoload.php'; $dotenv = DotenvDotenv::create(__DIR__); $dotenv->load(); require './config.php'; $app = new SlimApp; $app->add(function ($request, $response, $next) { Stripe::setApiKey(getenv('STRIPE_SECRET_KEY')); return $next($request, $response); }); $app->get('/', function (Request $request, Response $response, array $args) { return $response->write(file_get_contents(getenv('STATIC_DIR') . '/index.html')); }); $app->post('/checkout_sessions', function(Request $request, Response $response) use ($app) { $params = json_decode($request->getBody()); $payment_method_types = [ 'usd' => ['card'], 'eur' => ['card'], 'cad' => ['card'] ]; $products = [ 'cause-a' => 'prod_KP3YP2a3IGYqsb', 'cause-b' => 'prod_KP3iZRGcEjn5W8', ]; $session = StripeCheckoutSession::create([ 'success_url' => 'http://localhost:4242/?success=true', 'cancel_url' => 'http://localhost:4242/?cancel=true', 'mode' => 'payment', 'payment_method_types' => $payment_method_types[$params->currency], 'metadata' => [ 'cause' => $params->cause, 'currency' => $params->currency, ], 'submit_type' => 'donate', 'line_items' => [[ 'price_data' => [ 'currency' => $params->currency, 'product' => $products[$params->cause], 'unit_amount' => $params->amount, ], 'quantity' => 1, ]] ]); return $response->withJson([ 'id' => $session->id ]); }); $app->post('/webhook', function(Request $request, Response $response) { $params = json_decode($request->getBody(), true); $event = StripeEvent::constructFrom($params); switch($event->type) { case 'checkout.session.completed': $session = $event->data->object; ob_start(); var_dump('Checkout session completed!' . $session->id); error_log(ob_get_clean(), 4); break; } return $response->withJson([ 'status' => 'success' ])->withStatus(200); }); $app->run();
Advertisement
Answer
hosting provider was blocking redirection problem solved by contacting them