Skip to content
Advertisement

cors blocked cant fetch [closed]

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/

in localhost when i click donate button i am redirected to https://checkout.stripe.com/pay/cs_test_a1TfyroDYXPwuj1n6FKfKOT9k9PLt8Nnh9WGAkveSBxMs4YnMOepeOMgVR#fidkdWxOYHwnPyd1blpxYHZxWjA0T1JuTUlOMl00N2ZOPVVxYzB8MEFUazNQYmMzaGxwNkR0VnBtTTxyYUl2fFFHPGpwYzVRXDY0c0FUfXQ0PH1McTNcTTIzcEhRQF00blA8TUh8d2ZAZzNyNTVIUX1Na0J9ZicpJ2hsYXYnP34nYnBsYSc%2FJ2RhZGY1NGM1KDVkZ2EoMTRnNChkZ2M0KDU1ZGMzPTBmNWQ1Yzc2MT1jMScpJ2hwbGEnPyc8MDExZmQ9Nig0MjMyKDE9NjMoZ2QzPChkYzcyYTE8PDc1YDAwPWYxY2MnKSd2bGEnPyc2YGNjNGczZigwPTA3KDE2ZDYoZDUzMigxZ2RgYDZnN2E2PDJnYD1jZzMneCknZ2BxZHYnP15YKSdpZHxqcHFRfHVgJz8ndmxrYmlgWmxxYGgnKSd3YGNgd3dgd0p3bGJsayc%2FJ21xcXU%2FKippamZkaW1qdnE%2FMTcxNyd4JSUl

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

User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement