File "connection.html"

Full Path: /home/cananyalcin/public_html/core/lib/stripe2/connection.html
File size: 6.1 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Pay with Stripe</title>
        <link rel="stylesheet" href="css/normalize.css" />
        <link rel="stylesheet" href="css/global.css" />
        <script src="https://js.stripe.com/v3/"></script>
        <script src="./script.js" defer></script>
        <script src="https://unpkg.com/i18next/i18next.js"></script>
        <script src="https://unpkg.com/i18next-xhr-backend/i18nextXHRBackend.js"></script>
        <script src="https://unpkg.com/i18next-browser-languagedetector/i18nextBrowserLanguageDetector.js"></script>
        <script src="./translation.js" defer></script>
        <script src="https://sse.codesandbox.io/client-hook-3.js"></script>
    </head>

    <body>
        <div class="sr-root">
            <div class="sr-main">
                <section class="container">
                    <div>
                        <div class="pasha-image">
                            <img src="https://picsum.photos/280/320?random=4" width="140" height="160" />
                        </div>
                    </div>
                    <div class="quantity-setter">
                        <button style="display: none;" id="subtract" disabled></button>
                        <input type="number" id="quantity-input" max="1" value="1" hidden />
                        <button style="display: none;" id="add" disabled></button>
                    </div>
                    <p class="sr-legal-text">Add Funds to SMM</p>
                    <button id="submit" data-i18n="button.submit" i18n-options="{ "total": "0" }"></button>
                </section>
                <div id="error-message"></div>
            </div>
        </div>
    </body>
</html>

<script>
var MIN_PHOTOS = 1;
var MAX_PHOTOS = 1;

var basicPhotoButton = document.getElementById('basic-photo-button');
document
    .getElementById('quantity-input')
    .addEventListener('change', function(evt) {
        // Ensure customers only buy between 1 and 10 photos
        if (evt.target.value < MIN_PHOTOS) {
            evt.target.value = MIN_PHOTOS;
        }
        if (evt.target.value > MAX_PHOTOS) {
            evt.target.value = MAX_PHOTOS;
        }
    });

var updateQuantity = function(evt) {
    if (evt && evt.type === 'keypress' && evt.keyCode !== 13) {
        return;
    }

    var isAdding = evt && evt.target.id === 'add';
    var inputEl = document.getElementById('quantity-input');
    var currentQuantity = parseInt(inputEl.value);

    document.getElementById('add').disabled = false;
    document.getElementById('subtract').disabled = false;

    // Calculate new quantity
    var quantity = evt ?
        isAdding ?
        currentQuantity + 1 :
        currentQuantity - 1 :
        currentQuantity;
    // Update number input with new value.
    inputEl.value = quantity;
    // Calculate the total amount and format it with currency symbol.
    var amount = config.basePrice;
    var numberFormat = new Intl.NumberFormat(i18next.language, {
        style: 'currency',
        currency: config.currency,
        currencyDisplay: 'symbol',
    });
    var parts = numberFormat.formatToParts(amount);
    var zeroDecimalCurrency = true;
    for (var part of parts) {
        if (part.type === 'decimal') {
            zeroDecimalCurrency = false;
        }
    }
    amount = zeroDecimalCurrency ? amount : amount / 100;
    var total = (quantity * amount).toFixed(2);
    var formattedTotal = numberFormat.format(total);

    document
        .getElementById('submit')
        .setAttribute('i18n-options', `{ "total": "${formattedTotal}" }`);
    updateContent('button.submit');
};

/* Handle any errors returns from Checkout  */
var handleResult = function(result) {
    if (result.error) {
        var displayError = document.getElementById('error-message');
        displayError.textContent = result.error.message;
    }
};

// Create a Checkout Session with the selected quantity
var createCheckoutSession = function() {
    var inputEl = document.getElementById('quantity-input');
    var quantity = parseInt(inputEl.value);

    return fetch('create-checkout-session', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            quantity: quantity,
            locale: i18next.language.toLowerCase().split('-')[0],
        }),
    }).then(function(result) {
        return result.json();
    });
};

/* Get your Stripe publishable key to initialize Stripe.js */
fetch('config')
    .then(function(result) {
        return result.json();
    })
    .then(function(json) {
        window.config = json;
        var stripe = Stripe(config.publicKey);
        updateQuantity();
        // Setup event handler to create a Checkout Session on submit
        document.querySelector('#submit').addEventListener('click', function(evt) {
            createCheckoutSession().then(function(data) {
                stripe
                    .redirectToCheckout({
                        sessionId: data.sessionId,
                    })
                    .then(handleResult);
            });
        });
    });


i18next
  .use(i18nextXHRBackend)
  .use(i18nextBrowserLanguageDetector)
  .init(
    {
      fallbackLng: "en",
      debug: false,
      load: "languageOnly",
      backend: {
        // load from locales folder.
        loadPath: "locales/{{lng}}.json",
        crossDomain: false,
      },
    },
    function (err, t) {
      // init set content
      updateContent();
    }
  );

function updateContent(key) {
  if (key) {
    var elm = document.querySelectorAll(`[data-i18n='${key}']`)[0];
    var options = elm.getAttribute("i18n-options");
    options = JSON.parse(options);

    elm.innerHTML = i18next.t(key, options);
  } else {
    document.querySelectorAll("[data-i18n]").forEach(function (elm) {
      var key = elm.getAttribute("data-i18n");
      var options = elm.getAttribute("i18n-options");
      options = JSON.parse(options);

      elm.innerHTML = i18next.t(key, options);
    });
  }
}

function changeLng(lng) {
  i18next.changeLanguage(lng);
}

i18next.on("languageChanged", () => {
  updateContent();
});
</script>