This tutorial presents a methodical approach to incorporating the Stripe payment gateway into a PHP environment, providing a concise and straightforward guide. An online payment gateway facilitates the processing of credit card payments via websites or mobile applications. The addition of an online payment feature allows for transactions for goods or services from the comfort of one’s home.

In the current digital landscape, a payment gateway is a critical component for e-commerce platforms and business websites that offer a variety of products or services to their customer base. Numerous online payment gateway providers exist, with Stripe being a prominent option that supports credit card charges directly through websites. Stripe is compatible with a broad array of credit cards, including Visa, MasterCard, Discover, American Express, JCB, and more. Additionally, it’s crucial to understand how to save files in PHP, as this knowledge can be essential for handling payment transaction records.

Stripe Payment Gateway Integration Using PHP

To integrate the Stripe Payment Gateway with PHP, follow these technical steps:

  • Generate a database titled ‘allphptricks_cart’;
  • Construct a table within the database named ‘stripe_payment’;
  • Register for a Stripe account and obtain test API credentials;
  • Incorporate the Stripe PHP SDK;
  • Develop a ‘config.php’ file;
  • Establish a ‘dbclass.php’ file for database operations;
  • Compose an ‘index.php’ file as the main page;
  • Assemble a ‘stripe-checkout.js’ file within the JavaScript directory;
  • Craft a ‘stripe_header.php’ file for common header elements;
  • Formulate a ‘create_payment_intent.php’ file to handle payment intentions;
  • Create a ‘create_customer.php’ file for customer creation in Stripe;
  • Produce a ‘payment_insert.php’ file for recording payment details;
  • Design a ‘status.php’ file to display transaction status;
  • Initiate a ‘style.css’ file in the CSS directory for styling purposes.

1. Generate a database titled ‘allphptricks_cart’

To generate an “allphptricks_cart” database, execute the subsequent query in MySQL.

CREATE DATABASE allphptricks_cart;

2. Construct a table within the database named ‘stripe_payment’

To create the table, execute the following query in the previously created database.

CREATE TABLE `stripe_payment` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `fullname` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
  `email` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
  `item_description` varchar(250) COLLATE utf8_unicode_ci NOT NULL,
  `currency` varchar(10) COLLATE utf8_unicode_ci NOT NULL,
  `amount` double(10,2) NOT NULL,
  `transaction_id` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
  `payment_status` varchar(25) COLLATE utf8_unicode_ci NOT NULL,
  `created_at` datetime NOT NULL DEFAULT current_timestamp(),
   PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

This table serves as a repository for all payment-related data. It accommodates various necessary details pertinent to the application, such as customer address, city, and phone number. Attached in the tutorial’s downloadable file is the SQL schema of this table.

3. Register for a Stripe account and obtain test API credentials

Initiate by establishing a Stripe account. Stripe offers Test API Keys for validating integration prior to activation. Post-authentication, navigate to ‘Developers’ followed by ‘API keys’ to acquire the Publishable and Secret test keys. Utilize the ‘Reveal test key’ option for Secret key disclosure. Preserve these keys for subsequent inclusion in the configuration file. The presence of ‘TEST DATA’ notification in the account header indicates testing mode engagement.

4. Incorporate the Stripe PHP SDK

This step involves importing Stripe’s PHP SDK to facilitate online credit card transactions via the Stripe API. Two methods exist for including the PHP SDK: Composer and direct download of the SDK zip file.

  • Import via Composer (Recommended): Ensure Composer is installed on the system (installation guidance available for Windows 10/11). Navigate to the project directory for Stripe payment integration in PHP. Execute the command ‘composer require stripe/stripe-php’ in the command prompt. Successful importation creates a ‘vendor’ directory in the application, containing necessary APIs for Stripe card charging;
  • Download Stripe PHP SDK Zip File: For alternative SDK integration, download the Stripe PHP SDK zip file from the provided link.

5. Develop a ‘config.php’ file

Establish a ‘config.php’ file, embedding the subsequent code:

<?php 
//Stripe Credentials Configuration
define("STRIPE_SECRET_API_KEY", "YOUR STRIPE SECRET KEY");
define("STRIPE_PUBLISHABLE_KEY", "YOUR STRIPE PUBLISHABLE KEY");

//Sample Product Details
define('CURRENCY', 'USD');
define('AMOUNT', '10');
define('DESCRIPTION', 'Laptop Bag');

// Database Credentials Configuration 
define('DB_HOST', 'localhost');
define('DB_NAME', 'Your Database Name');
define('DB_USERNAME', 'Your Database Username');
define('DB_PASSWORD', 'Your Database Password');
?>

This ‘config.php’ file encompasses both Stripe API keys and database connection details. It is imperative to replace the placeholder values with actual credentials.

6. Establish a ‘dbclass.php’ file for database operations

Create a file called ‘dbclass.php’ and copy the following code into it.

<?php
// Start Database Class
class DB
{
	private $db_host = DB_HOST;	
	private	$db_name = DB_NAME;
	private $db_user = DB_USERNAME;
	private	$db_pass = DB_PASSWORD;

	private $dbh;
	private $error;
	private $stmt;
	
	public function __construct()
	{
		//Set DSN (Data Source Name)
		$dsn = 'mysql:host='.$this->db_host.';dbname='.$this->db_name;
		$db_options = array(
			PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
		);
		try
		{
			$this->dbh = new PDO($dsn, $this->db_user, $this->db_pass, $db_options);
		}
		catch(PDOException $e)
		{
			echo $this->error = $e->getMessage();
		}
	}

	public function query($query)
	{
		$this->stmt = $this->dbh->prepare($query);
	}	
	
	public function bind($param, $value, $type = null)
	{
		if(is_null($type))
		{
			switch(true)
			{
				case is_int($value);
					$type = PDO::PARAM_INT;
					break;
				case is_bool($value);
					$type = PDO::PARAM_BOOL;
					break;
				case is_null($value);
					$type = PDO::PARAM_NULL;
					break;
				default;
					$type = PDO::PARAM_STR;
			}
		}
		$this->stmt->bindValue($param, $value, $type); 	
	}

	public function execute($array = null)
	{
		return $this->stmt->execute($array);
	}

	public function lastInsertId()
	{
		return $this->dbh->lastInsertId();
	}

	public function rowCount()
	{
		return $this->stmt->rowCount();
	}	

	public function result($array = null)
	{
		$this->execute($array);
		return $this->stmt->fetch();
	}

	public function resultSet($array = null)
	{
		$this->execute($array);
		return $this->stmt->fetchAll(PDO::FETCH_ASSOC);
	}

	public function close()
	{
		return $this->dbh = null;
	}
}
// End Database Class
?>

dbclass.php facilitates the insertion of payment-related data into a specified database table. An accompanying tutorial delves into the specifics of this PDO database class, highlighting its use of PDO Prepared Statements for efficient data storage in the database.

7. Compose an ‘index.php’ file as the main page

Initiate the creation of an index.php file and proceed to embed the provided code within this file.

<?php
require_once 'config.php'; 
?>
<html>
<head>
<title>Demo Integrate Stripe Payment Gateway using PHP - AllPHPTricks.com</title>
<link rel='stylesheet' href='css/style.css' type='text/css' media='all' />
</head>
<body>

<div style="width:700px; margin:50 auto;">
<h1>Demo Integrate Stripe Payment Gateway using PHP</h1>

<!-- Display status message -->
<div id="stripe-payment-message" class="hidden"></div>

<p><strong>Charge $10.00 with Stripe Demo Payment</strong></p>

<form id="stripe-payment-form" class="hidden">
	<input type='hidden' id='publishable_key' value='<?php echo STRIPE_PUBLISHABLE_KEY;?>'>
	<div class="form-group">
		<label><strong>Full Name</strong></label>
		<input type="text" id="fullname" class="form-control" maxlength="50" required autofocus>
	</div>
	<div class="form-group">
		<label><strong>E-Mail</strong></label>
		<input type="email" id="email" class="form-control" maxlength="50" required>
	</div>
	<h3>Enter Credit Card Information</h3>
	<div id="stripe-payment-element">
        <!--Stripe.js will inject the Payment Element here to get card details-->
	</div>

	<button id="submit-button" class="pay">
		<div class="spinner hidden" id="spinner"></div>
		<span id="submit-text">Pay Now</span>
	</button>
</form>

<!-- Display the payment processing -->
<div id="payment_processing" class="hidden">
	<span class="loader"></span> Please wait! Your payment is processing...
</div>

<!-- Display the payment reinitiate button -->
<div id="payment-reinitiate" class="hidden">
	<button class="btn btn-primary" onclick="reinitiateStripe()">Reinitiate Payment</button>
</div>

<br>
<div style="clear:both;"></div>
<p><strong>List of Testing Credit Cards Details</strong></p>
<p>Use the following Sandbox environment testing credit cards details to test the payment process.</p>
<p>
	<ul style="padding-left: 20px;">
		<li>Successful Payment Card VISA (Without 3D Secure) - 4242424242424242</li>
		<li>Requires Authentication Card VISA (With 3D Secure) - 4000002500003155</li>
		<li>Failed Payment Card VISA - 4000000000009995</li>	
	</ul>
</p>
<p>Select any future valid expiration date (month/year) & CVC is <strong>123</strong>.</p>

</div>    
<script src="https://js.stripe.com/v3/"></script>
<script src="js/stripe-checkout.js" defer></script>
</body>
</html>

The specified code segment constructs an HTML form designed for the collection of various user details including Full Name, Email, and Credit Card Information. This encompasses Credit Card Number, Expiration Month/Year, CVC, and Country-specific data such as Zip Code for US or UK locations. The concluding section of index.php incorporates the Stripe.js v3 library, the most recent version from Stripe. This inclusion facilitates the secure transmission of sensitive credit card data directly to Stripe, ensuring enhanced data protection and security.

8. Assemble a ‘stripe-checkout.js’ file within the JavaScript directory

Generate a “stripe-checkout.js” file and insert the provided code snippet into it.

// Get Your Stripe Publishable API Key
let publishable_key = document.querySelector("#publishable_key").value;

// Set your Stripe publishable API key to an instance of Stripe Object
const stripe = Stripe(publishable_key);

// Define the card elements variable
let elements;

// Select a payment form element
const paymentForm = document.querySelector("#stripe-payment-form");

// Select a payment submit button
const submitButton = document.querySelector("#submit-button");

// Select a payment submit button text
const submitText = document.querySelector("#submit-text");

// Select a payment submit spinner
const spinner = document.querySelector("#spinner");

// Select a payment message response element
const messageContainer = document.querySelector("#stripe-payment-message");

// Select a payment processing element
const paymentProcessing = document.querySelector("#payment_processing");

// Select a payment reinitiate element
const payReinitiate = document.querySelector("#payment-reinitiate");

// Get a payment_intent_client_secret parameter from URL
const checkClientSecret = new URLSearchParams(window.location.search).get(
    "payment_intent_client_secret"
);

stripeProcessing(true);
// Check is payment_intent_client_secret parameter exist in the URL
if(!checkClientSecret){
    stripeProcessing(false);
    // Create a new instance of Stripe Elements UI library and attach the client secret to it
    initialize();
}

// Check the status of PaymentIntent creation
checkStatus();

// Attach a payment submit event handler to payment form
paymentForm.addEventListener("submit", handlePaymentSubmit);

// Fetch a payment intent and capture the client secret
let payment_intent_id;
async function initialize() {
    const { paymentIntentId, clientSecret } = await fetch("create_payment_intent.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
    }).then((r) => r.json());
    
    const appearance = {
        theme: 'stripe',
        rules: {
            '.Label': {
                fontWeight: 'bold',
            }
        }
    };
    
    elements = stripe.elements({ clientSecret, appearance });
    
    const paymentElement = elements.create("payment");
    paymentElement.mount("#stripe-payment-element");
    
    payment_intent_id = paymentIntentId;
}

// Function to handle payment form submit
async function handlePaymentSubmit(e) {
    e.preventDefault();
    setLoading(true);
    
    let fullname = document.getElementById("fullname").value;
    let email = document.getElementById("email").value;
    
    const { customer_id } = await fetch("create_customer.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ payment_intent_id: payment_intent_id, fullname: fullname, email: email }),
    }).then((r) => r.json());
    
    const { error } = await stripe.confirmPayment({
        elements,
        confirmParams: {
            // Make sure to change this to your payment completion page
            return_url: window.location.href+'?customer_id='+customer_id,
        },
    });
    
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Otherwise, your customer will be redirected to
    // your `return_url`. For some payment methods like iDEAL, your customer will
    // be redirected to an intermediate site first to authorize the payment, then
    // redirected to the `return_url`.
    if (error.type === "card_error" || error.type === "validation_error") {
        showMessage(error.message);
        paymentReinitiate();
    } else {
        showMessage("An unexpected error occured.");
        paymentReinitiate();
    }
    setLoading(false);
}

// Fetch the PaymentIntent status after payment submission
async function checkStatus() {
    const clientSecret = new URLSearchParams(window.location.search).get(
        "payment_intent_client_secret"
    );
    
    const customer_id = new URLSearchParams(window.location.search).get(
        "customer_id"
    );
    
    if (!clientSecret) {
        return;
    }
    
    const { paymentIntent } = await stripe.retrievePaymentIntent(clientSecret);
    
    if (paymentIntent) {
        switch (paymentIntent.status) { 
            case "succeeded":
                // Post the transaction data to the server-side script
                // and redirect to the payment status page
                fetch("payment_insert.php", {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ payment_intent: paymentIntent, customer_id: customer_id }),
                })
                .then(response => response.json())
                .then(data => {
                    if (data.transaction_id) {
                        window.location.href = 'status.php?tid='+data.transaction_id;
                    } else {
                        showMessage(data.error);
                        paymentReinitiate();
                    }
                })
                .catch(console.error);
                break;
            case "processing":
                showMessage("Your payment is processing.");
                paymentReinitiate();
                break;
            case "requires_payment_method":
                showMessage("Your payment was not successful, please try again.");
                paymentReinitiate();
                break;
            default:
                showMessage("Something went wrong.");
                paymentReinitiate();
                break;
        }
    } else {
        showMessage("Something went wrong.");
        paymentReinitiate();
    }
}

// Display message
function showMessage(messageText) {
    messageContainer.classList.remove("hidden");
    messageContainer.textContent = messageText;
    
    setTimeout(function () {
        messageContainer.classList.add("hidden");
        messageText.textContent = "";
    }, 10000);
}

// Show a spinner on payment submission
function setLoading(isLoading) {
    if (isLoading) {
        // Disable the submit button and show a spinner
        submitButton.disabled = true;
        spinner.classList.remove("hidden");
        submitText.classList.add("hidden");
    } else {
        // Enable the submit button and hide a spinner
        submitButton.disabled = false;
        spinner.classList.add("hidden");
        submitText.classList.remove("hidden");
    }
}

// Show/Hide a spinner of processing on payment form
function stripeProcessing(isProcessing) {
    if (isProcessing) {
        paymentForm.classList.add("hidden");
        paymentProcessing.classList.remove("hidden");
    } else {
        paymentForm.classList.remove("hidden");
        paymentProcessing.classList.add("hidden");
    }
}

// Display the payment reinitiate button
function paymentReinitiate() {
    paymentProcessing.classList.add("hidden");
    payReinitiate.classList.remove("hidden");
    submitButton.classList.add("hidden");
}

// Reinitiate stripe payment
function reinitiateStripe() {
    window.location.href=window.location.href.split('?')[0];
}

 

an opened laptop with card and sheet with pay word on it, a yellow cup in a blue circle

9. Craft a ‘stripe_header.php’ file for common header elements

Create a “stripe_header.php” file and place the provided code within the file.

<?php 
// Include the Stripe configuration file 
require_once 'config.php'; 
 
// Include the Stripe PHP SDK library 
require_once 'vendor/autoload.php'; 

// Set API key 
\Stripe\Stripe::setApiKey(STRIPE_SECRET_API_KEY); 

// Set content type to JSON 
header('Content-Type: application/json'); 

// Retrieve JSON from POST body 
$jsonStr = file_get_contents('php://input'); 
$jsonObj = json_decode($jsonStr); 
?>

10. Formulate a ‘create_payment_intent.php’ file to handle payment intentions

Generate a “create_payment_intent.php” file and insert the provided code into the file.

<?php 
require_once 'stripe_header.php';

// Define the product item price and convert it to cents
$product_price = round(AMOUNT*100);

try { 
    // Create PaymentIntent with amount, currency and description
    $paymentIntent = \Stripe\PaymentIntent::create([ 
        'amount' => $product_price,
        'currency' => CURRENCY, 
        'description' => DESCRIPTION, 
        'payment_method_types' => [ 
            'card' 
        ] 
    ]); 
    
    $output = [ 
        'paymentIntentId' => $paymentIntent->id, 
        'clientSecret' => $paymentIntent->client_secret 
    ]; 
    
    echo json_encode($output); 
} catch (Error $e) {
    http_response_code(500); 
    echo json_encode(['error' => $e->getMessage()]); 
} 
?>

Upon accessing the payment screen page, the initial step involves generating a client secret through the “create_payment_intent.php” file mentioned earlier. Subsequently, when you review your Stripe account, you will observe that a payment has been initiated with an “Incomplete” status.

11. Create a ‘create_customer.php’ file for customer creation in Stripe

Generate a “create_customer.php” file and insert the provided code into it.

<?php 
require_once 'stripe_header.php';

$payment_intent_id = !empty($jsonObj->payment_intent_id)?$jsonObj->payment_intent_id:''; 
$fullname = !empty($jsonObj->fullname)?$jsonObj->fullname:''; 
$email = !empty($jsonObj->email)?$jsonObj->email:''; 
    
// Add new customer fullname and email to stripe 
try {   
    $customer = \Stripe\Customer::create(array(  
        'name' => $fullname,  
        'email' => $email 
    ));  
}catch(Exception $e) {   
    $error = $e->getMessage();
} 
    
if(empty($error) && !empty($customer)){
    try {
        // Attach Customer Data with PaymentIntent using customer ID
        \Stripe\PaymentIntent::update($payment_intent_id, [
            'customer' => $customer->id 
        ]);
    } catch (Exception $e) {  
        $error = $e->getMessage();
    }
    $output = [
        'customer_id' => $customer->id 
    ];
    echo json_encode($output); 

}else{ 
    http_response_code(500);
    echo json_encode(['error' => $error]); 
} 
?>

After the user submits the payment form, the first action taken will be to create a customer using the provided Full Name and Email address. Subsequently, this customer will be linked to the initiated payment, and you will notice that the customer’s email has been associated with the Stripe-initiated payment.

12. Produce a ‘payment_insert.php’ file for recording payment details

Generate a “payment_insert.php” file and insert the provided code into the file.

<?php 
require_once 'stripe_header.php';
// Include the database connection file 
require_once 'dbclass.php';

$payment = !empty($jsonObj->payment_intent)?$jsonObj->payment_intent:''; 
$customer_id = !empty($jsonObj->customer_id)?$jsonObj->customer_id:''; 
    
// Retrieve customer information from stripe
try {
    $customerData = \Stripe\Customer::retrieve($customer_id);  
}catch(Exception $e) { 
    $error = $e->getMessage(); 
}

if(empty($error)) {
    // If transaction was successful
    if(!empty($payment) && $payment->status == 'succeeded'){
        // Retrieve transaction details
        $transaction_id = $payment->id; 
        $amount = ($payment->amount/100); 
        $currency = $payment->currency; 
        $item_description = $payment->description; 
        $payment_status = $payment->status; 
            
        $fulname = $email = ''; 
        if(!empty($customerData)){
            if(!empty($customerData->name)) {
                $fullname = $customerData->name;
            }
            if(!empty($customerData->email)) {
                $email = $customerData->email;
            }
        }

        $db = new DB;
        // Check if transaction data is already exists in DB with the same Transaction ID 
        $db->query("SELECT id FROM `stripe_payment` WHERE transaction_id=:transaction_id");
        $db->bind(":transaction_id", $transaction_id);
        $row = $db->result();
        if(empty($row)){
            // Insert transaction data into the `stripe_payment` database table
            $db->query("INSERT INTO `stripe_payment` (`fullname`, `email`, `item_description`, `currency`, `amount`, `transaction_id`,  `payment_status`) VALUES (:fullname, :email, :item_description, :currency, :amount, :transaction_id, :payment_status)");
            $db->bind(":fullname", $fullname);
            $db->bind(":email", $email);
            $db->bind(":item_description", $item_description);
            $db->bind(":currency", $currency);
            $db->bind(":amount", $amount);
            $db->bind(":transaction_id", $transaction_id);
            $db->bind(":payment_status", $payment_status);
            $db->execute();
        }
        $db->close();
        $output = [ 
            'transaction_id' => $transaction_id
        ];
        echo json_encode($output); 
    }else{ 
        http_response_code(500); 
        echo json_encode(['error' => 'Transaction has been failed!']); 
    } 
}else{ 
    http_response_code(500);
    echo json_encode(['error' => $error]); 
} 
?>

If your payment is successfully processed, the payment status will be updated to “Succeed,” and you will observe this status reflected on your Stripe Payment page.

13. Design a ‘status.php’ file to display transaction status

Create a “status.php” file and insert the following code into it.

<?php
// Include the DB config & class files
require_once 'config.php';
require_once 'dbclass.php';

// If transaction ID is not empty 
if(!empty($_GET['tid'])){
    $transaction_id  = $_GET['tid'];

    $db = new DB;
    // Fetch the transaction details from DB using Transaction ID
    $db->query("SELECT * FROM `stripe_payment` WHERE transaction_id=:transaction_id");
    $db->bind(":transaction_id", $transaction_id);
    $row = $db->result();
    $db->close();
    if(!empty($row)){
        $fullname = $row['fullname'];
        $email = $row['email'];
        $item_description = $row['item_description'];
        $currency = $row['currency'];
        $amount = $row['amount'];
    }
}else{ 
    header("Location: index.php"); 
    exit(); 
} 
?>
<html>
<head>
<title>Demo Integrate Stripe Payment Gateway using PHP - AllPHPTricks.com</title>
<link rel='stylesheet' href='css/style.css' type='text/css' media='all' />
</head>
<body>

<div style="width:700px; margin:50 auto;">
<h1>Demo Integrate Stripe Payment Gateway using PHP</h1>

<?php if(!empty($row)){ ?>
    <h2 style="color: #327e00;">Success! Your payment has been received successfully.</h2>
    <h3>Payment Receipt:</h3>
    <p><strong>Full Name:</strong> <?php echo $fullname; ?></p>
    <p><strong>Email:</strong> <?php echo $email; ?></p>
    <p><strong>Transaction ID:</strong> <?php echo $transaction_id; ?></p>
    <p><strong>Amount:</strong> <?php echo $amount.' '.$currency; ?></p>
    <p><strong>Item Description:</strong> <?php echo $item_description; ?></p>
<?php }else{ ?>
    <h1>Error! Your transaction has been failed.</h1>
<?php } ?>

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

Following an online payment transaction attempt, redirection to the status page occurs. Successful transactions result in a display of transaction details, whereas failed transactions prompt an error message display.

online payment word, laptop with payment on the screen among phone, card signs and dollar coins

14. Initiate a ‘style.css’ file in the CSS directory for styling purposes

Generate a style.css file and insert the provided code into it.

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}
.pay {
	  text-transform: uppercase;
    background: #F68B1E;
    border: 1px solid #F68B1E;
    cursor: pointer;
    color: #fff;
    padding: 8px 40px;
    margin-top: 10px;
}
.pay:hover {
	  background: #f17e0a;
    border-color: #f17e0a;
}
.form-control {
    display: block;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    margin-bottom: 10px;

}
#stripe-payment-message{
  padding: 20px;
  border-radius: 5px;
  padding-left: 30px;
  margin-bottom: 10px;
  color: #842029;
  background-color: #f8d7da;
  border: 1px solid #f5c2c7;
}
.btn-primary {
  font-weight: 600;
  color: rgb(255, 255, 255);
  text-align: center;
  background-color: rgb(0, 103, 171);
  border: 0 !important;
  border-radius: 6px !important;
  padding: 10px;
  cursor: pointer;
}
.hidden{
    display:none;
}
/* spinner/processing state, errors */
.spinner,
.spinner:before,
.spinner:after {
  border-radius: 50%;
}
.spinner {
    color: #ffffff;
    font-size: 22px;
    text-indent: -99999px;
    margin: 0px auto;
    position: relative;
    width: 20px;
    height: 20px;
    box-shadow: inset 0 0 0 2px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}
.spinner:before,
.spinner:after {
    position: absolute;
    content: "";
}
.spinner:before {
    width: 10.4px;
    height: 20.4px;
    background: #F68B1E;
    border-radius: 20.4px 0 0 20.4px;
    top: -0.2px;
    left: -0.2px;
    -webkit-transform-origin: 10.4px 10.2px;
    transform-origin: 10.4px 10.2px;
    -webkit-animation: loading 2s infinite ease 1.5s;
    animation: loading 2s infinite ease 1.5s;
}
.spinner:after {
    width: 10.4px;
    height: 10.2px;
    background: #F68B1E;
    border-radius: 0 10.2px 10.2px 0;
    top: -0.1px;
    left: 10.2px;
    -webkit-transform-origin: 0px 10.2px;
    transform-origin: 0px 10.2px;
    -webkit-animation: loading 2s infinite ease;
    animation: loading 2s infinite ease;
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@media only screen and (max-width: 600px) {
  form {
    width: 80vw;
    min-width: initial;
  }
}
.loader {
  display: block;
  margin: 20px;
  border: 14px solid #f3f3f3;
  border-radius: 50%;
  border-top: 14px solid #3498db;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#payment_processing{
  color: #078e29;
  font-weight: bold;
}

Implementing the specified CSS modifications enhances the visual appeal of the Stripe payment interface. To validate functionality, execute a transaction simulation using a test credit card, such as VISA (4242424242424242), accompanied by any future expiration date and a CVC code.

Transitioning Stripe Payment Gateway to Live Mode in PHP

Upon successful integration of the Stripe payment gateway in a PHP-based testing environment, transition to the Live environment is necessary for processing actual online payments. The process involves the following steps:

  • Access the Stripe account interface;
  • Navigate to ‘Developers’ followed by ‘API keys’ within the Stripe dashboard;
  • Deactivate ‘Test Mode’ via the option located in the top right header section;
  • Retrieve the Stripe LIVE Publishable and Secret keys upon activation of Live mode;
  • Update ‘config.php’ with the obtained LIVE Publishable and Secret keys;
  • Completion of these steps ensures readiness for accepting online payments using real credit cards through Stripe in a PHP environment.

Conclusion

This comprehensive guide outlines the steps for integrating the Stripe payment gateway within a PHP framework. Following these instructions facilitates a streamlined integration process.

Published On
By Jeffrey Morrison

Leave a Reply

Your email address will not be published. Required fields are marked *