Copyright Derek O'Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.

Stripe E-Commerce Payments

We can use stripe.com to accept credit card payments.

Example of a Stripe e-commerce website (Run Example)

Click here to download a .zip file with this project.

configuration.php

<?php
/* * ************************ You need to set the values below to match your project ************************ */

// localhost website and localhost database
$localHostSiteFolderName = "D00123456";

$localhostDatabaseName = "D00123456";
$localHostDatabaseHostAddress = "localhost";
$localHostDatabaseUserName = "root";
$localHostDatabasePassword = "";



// remotely hosted website and remotely hosted database       /* you will need to get the server details below from your host provider */
$serverWebsiteName = "http://mysql02.comp.dkit.ie/D00123456"; /* use this address if hosting website on the college students' website server */

$serverDatabaseName = "D00123456";
$serverDatabaseHostAddress = "mysql02.comp.dkit.ie";         /* use this address if hosting database on the college computing department database server */
$serverDatabaseUserName = "D00123456";
$serverDatabasePassword = "ABCD";




$useLocalHost = true;      /* set to false if your database is NOT hosted on localhost */

$useTestStripeKey = true;

if ($useTestStripeKey == true)
{
    $privateStripeKey = "sk_test_BQokikJOvBiI2HlWgH4olfQ2"; 
    $publicStripeKey = "pk_test_6pRNASCoBOKtIshFeQd4XMUh"; 
}
else // live system
{
    $privateStripeKey = "place your private live key"; 
    $publicStripeKey = "place your public live key here"; 
}

/* * ******************************* WARNING                                 ******************************** */
/* * ******************************* Do not modify any code BELOW this point ******************************** */

if ($useLocalHost == true)
{
    $siteName = "http://localhost/" . $localHostSiteFolderName;
    $dbName = $localhostDatabaseName;
    $dbHost = $localHostDatabaseHostAddress;
    $dbUsername = $localHostDatabaseUserName;
    $dbPassword = $localHostDatabasePassword;
}
else  // using remote host
{
    $siteName = $serverWebsiteName;
    $dbName = $serverDatabaseName;
    $dbHost = $serverDatabaseHostAddress;
    $dbUsername = $serverDatabaseUserName;
    $dbPassword = $serverDatabasePassword;
}


chmod("configuration.php", 0600); // do not allow anyone to view this file
?>

index.html

<!DOCTYPE html>
<html>
<head>
<title>Stripe Example</title>  

<link rel="stylesheet" href="assets/demo.css">
<link rel="stylesheet" href="assets/form-validation.css">
<link rel="stylesheet" href="assets/awesome.css">
<link href="assets/main.css" rel="stylesheet" type="text/css"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="./assets/dkit.png">


<script>
    function calculteCost()
    {
        let numberOfProductA = document.getElementById('numberOfProductA').value;
        let numberOfProductB = document.getElementById('numberOfProductB').value;
        let paymentAmount;
        
        paymentAmount = (25 * numberOfProductA) + (50 * numberOfProductB);
        
        document.getElementById('paymentAmount').value = paymentAmount;
        document.getElementById('paymentDetails').value = "€" + paymentAmount;

        if (paymentAmount > 0)
        {
            document.getElementById('paymentAmountError').style.visibility = "hidden";
        }
        else
        {
            document.getElementById('paymentAmountError').style.visibility = "visible";
        }
    }


    function atLeastOneProductBought()
    {
        if (document.getElementById('paymentAmount').value === '0')
        {
            document.getElementById('paymentAmountError').style.visibility = "visible";
            return false;
        }
        else
        {
            return true;
        }
    }
</script>
</head>

<body>
<div class="main-content">

<form autocomplete="off" class="form-validation" id="dor_payment_form" onsubmit="return atLeastOneProductBought()" action="make_payment.php" method="post">
<img src="./assets/dkit.png" style="width:50px" alt=""/> <h1>Stripe Example</h1>
<h2>Step 1 of 3 (Calculate Cost)</h2>

<p>Product A €25 each.<br>
Product B €50 each.</p>

<label for="email">Email: </label>
<input type="email" id = "email" name = "email" required autofocus><br><br>

<label id="paymentAmountError">You must select at least one product</label><br>

<label for="numberOfProductA">Number Of Product A: </label>
<input type="number" id="numberOfProductA" name="numberOfProductA" min="0" max="10" value="0" onchange="calculteCost()"><br><br>

<label for="numberOfProductB">Number Of Product B: </label>
<input type="number" id="numberOfProductB" name="numberOfProductB" min="0" max="10" value="0" onchange="calculteCost()"><br><br>

<label for="paymentDetails">Cost: </label>
<input type="text" id = "paymentDetails" value = "€0" tabIndex="-1" readonly><br><br>
<input type="hidden" id="paymentAmount" name="paymentAmount" value="0">

<input type="submit" value="Step 2">
</form>

</div> 
</body>
</html>

make_payment.php

<?php
$email = ltrim(rtrim(filter_input(INPUT_POST, "email", FILTER_SANITIZE_STRING)));
if (empty($email) || (!filter_var($email, FILTER_VALIDATE_EMAIL)))
{
    header("location: index.html"); // deal with invalid input
    exit();
}


$numberOfProductA = filter_input(INPUT_POST, "numberOfProductA", FILTER_SANITIZE_NUMBER_INT);
if (!isset($numberOfProductA))
{
    if (!filter_var($numberOfProductA, FILTER_VALIDATE_INT))
    {
        header("location: index.html"); // deal with invalid input
        exit();
    }
}


$numberOfProductB = filter_input(INPUT_POST, "numberOfProductB", FILTER_SANITIZE_NUMBER_INT);
if (!isset($numberOfProductB))
{
    if (!filter_var($numberOfProductB, FILTER_VALIDATE_INT))
    {
        header("location: index.html"); // deal with invalid input
        exit();
    }
}

$paymentAmount = filter_input(INPUT_POST, "paymentAmount", FILTER_SANITIZE_NUMBER_INT);
if (!isset($paymentAmount))
{
    if (!filter_var($paymentAmount, FILTER_VALIDATE_INT))
    {
        header("location: index.html"); // deal with invalid input
        exit();
    }
}
?>

<!DOCTYPE html>
<html>
<head>
<title>Stripe Example</title>  

<link rel="stylesheet" href="assets/demo.css">
<link rel="stylesheet" href="assets/form-validation.css">
<link rel="stylesheet" href="assets/awesome.css">
<link href="assets/main.css" rel="stylesheet"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="./assets/dkit.png">
</head>

<body>
<div class="main-content">

<form class="form-validation" id="dor_payment_form">
<img src="./assets/dkit.png" style="width:50px" alt=""/> <h1>Stripe Example</h1> 
<h2>Step 2 of 3 (Payment)</h2>

<label>Email: </label>
<input type="text" value = "<?php echo $email ?>" tabIndex="-1" readonly><br><br>

<label>Number Of Product A: </label>
<input type="text" value = "<?php echo $numberOfProductA ?>" tabIndex="-1" readonly><br><br>

<label>Number Of Product B: </label>
<input type="text" id="numberOfProductB"  value = "<?php echo $numberOfProductB ?>" tabIndex="-1" readonly><br><br>

<label>Cost: </label>
<input type="text" value = "€<?php echo $paymentAmount ?>" tabIndex="-1" readonly><br><br>
</form>


<form  action="payment_confirmation.php" style="text-align: center" method="post">
<input type="hidden" name = "email" value = "<?php echo $email ?>">
<input type="hidden" name = "numberOfProductA" value = "<?php echo $numberOfProductA ?>">
<input type="hidden" name = "numberOfProductB" value = "<?php echo $numberOfProductB ?>">
<input type="hidden" name = "paymentAmount" value = "<?php echo $paymentAmount ?>">

<?php   require_once 'configuration.php'; ?>
<script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"    

    data-key="<?php echo $publicStripeKey ?>"
    data-email= "<?php echo $email ?>"
    data-currency="EUR"
    data-amount="<?php echo $paymentAmount . '00' ?>"
    data-name="The Company Name"
    data-description="Stripe Sales Example"
    data-image="./assets/dkit.png"
    data-locale="auto">
</script>

</form>
<form style="text-align: center">
<button type="button" class ="cancel_button" onclick = "window.history.back()"><span>Change Details</span></button>
</form><br>

</div> 
</body>
</html>

 

payment_confirmation.php

<?php
$stripeToken = ltrim(rtrim(filter_input(INPUT_POST, "stripeToken", FILTER_SANITIZE_STRING)));
if (empty($stripeToken))
{
    header("location: index.html"); // deal with invalid input
    exit();
}

$email = ltrim(rtrim(filter_input(INPUT_POST, "email", FILTER_SANITIZE_STRING)));
if (empty($email) || (!filter_var($email, FILTER_VALIDATE_EMAIL)))
{
    header("location: index.html"); // deal with invalid input
    exit();
}

$numberOfProductA = filter_input(INPUT_POST, "numberOfProductA", FILTER_SANITIZE_NUMBER_INT);
if (!isset($numberOfProductA))
{
    if (!filter_var($numberOfProductA, FILTER_VALIDATE_INT))
    {
        header("location: index.html"); // deal with invalid input
        exit();
    }
}

$numberOfProductB = filter_input(INPUT_POST, "numberOfProductB", FILTER_SANITIZE_NUMBER_INT);
if (!isset($numberOfProductB))
{
    if (!filter_var($numberOfProductB, FILTER_VALIDATE_INT))
    {
        header("location: index.html"); // deal with invalid input
        exit();
    }
}

$paymentAmount = filter_input(INPUT_POST, "paymentAmount", FILTER_SANITIZE_NUMBER_INT);
if (!isset($paymentAmount))
{
    if (!filter_var($paymentAmount, FILTER_VALIDATE_INT))
    {
        header("location: index.html"); // deal with invalid input
        exit();
    }
}

require_once 'configuration.php';
// make stripe payment
require_once('./Stripe/init.php');
\Stripe\Stripe::setApiKey($privateStripeKey);
try
{
    $charge = \Stripe\Charge::create(array(
                "amount" => $paymentAmount . "00",
                "currency" => "eur",
                "card" => $stripeToken,
                "description" => "Stripe Sales Example")
    );
}
catch (Stripe_CardError $e)
{
    echo("Your card has been declined.<br>Error Details: " . $e . "<br><br><a href='index.html'>Click here to continue</a>");
    die();
}
catch (Exception $e)
{
    echo("Your card has been declined.<br>Error Details: " . $e . "<br><br><a href='index.html'>Click here to continue</a>");
    die();
}
// end of Stripe payment code
?>




<!DOCTYPE html>
<html>
<head>
<title>Stripe Example</title>  

<link rel="stylesheet" href="assets/demo.css">
<link rel="stylesheet" href="assets/form-validation.css">
<link rel="stylesheet" href="assets/awesome.css">
<link href="assets/main.css" rel="stylesheet" type="text/css"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="./assets/dkit.png">
</head>

<body>
<div class="main-content">

<form class="form-validation" id="dor_payment_form">
<img src="dk./assets/dkitit.png" style="width:50px" alt=""/> <h1>Stripe Example</h1> 
<h2>Step 3 of 3 (Payment Confirmed)</h2>
<p>Your payment is confirmed. Thank you for your order.</p>
<a href="https://www.dkit.ie">Click here to return to our website</a>
</form>

</div> 
</body>

<?php 
// send confirmation email
$subject = "Stripe Example";
$comment = "Your payment is confirmed. Thank you for your order.";

$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
mail($email, $subject, $comment, $headers);
?>
</html>

Click here to download a .zip file with this project.

Modify the above code so that it shows a progress bar, as shown here. Hint: The progress bar is Bootstrap code.

Click here to download a .zip file with the solution to this exercise.

Copyright Derek O' Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.

 
<div align="center"><a href="../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>