Step-by-Step Guide: Implementing Stripe Payment Gateway with Custom Fields in PHP

// Create a Stripe client
// Use your stripe Publishable key here
var stripe = Stripe('');

// Create an instance of Elements
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
  base: {
    color: '#32325d',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};



// Style button with Bbootstrap
document.querySelector('#payment-form button').classList =
  'btn btn-primary btn-block mt-4';




// Create an instance of the card Element
var card = elements.create('cardNumber', { 
	style: style,
	
	 });

// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');


// Create an instance of the card Element for expiry date
var cardExpiry = elements.create('cardExpiry', { style: style });
cardExpiry.mount('#card-expiry-element');


// Create an instance of the card Element for CVC
var cardCvc = elements.create('cardCvc', { style: style });
cardCvc.mount('#card-cvc-element');





// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

// Handle form submission
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();

  stripe.createToken(card).then(function(result) {
    if (result.error) {
      // Inform the user if there was an error
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      // Send the token to your server
      stripeTokenHandler(result.token);
    }
  });
});

function stripeTokenHandler(token) {
  // Insert the token ID into the form so it gets submitted to the server
  var form = document.getElementById('payment-form');
  var hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  form.appendChild(hiddenInput);

  // Submit the form
  form.submit();
}

<?php

   //include the Stripe PHP library into your project
	require_once('stripe-php/init.php');
    

// Set your Stripe API key
\Stripe\Stripe::setApiKey('');

// Collect form data
$first_name         = $_POST['first_name'];
$last_name          = $_POST['last_name'];
$email              = $_POST['email'];
$price              = $_POST['price'];
$token              = $_POST['stripeToken']; 

// Create a customer

try {
    $customer = \Stripe\Customer::create([
        'email' => $email,
        'name' => $first_name . ' ' . $last_name,
        'source' => $token,
    ]);
} catch (\Stripe\Exception\ApiErrorException $e) {
    // Handle API error
    echo 'Error creating customer: ' . $e->getMessage();
    exit;
}

// Charge the customer
try {
    $charge = \Stripe\Charge::create([
        'amount' => $price, // Amount in cents
        'currency' => 'jpy',
        'description' => 'Lorem Ipsum is simply dummy text of.',
        'customer' => $customer->id, // Customer ID obtained from creating customer
    ]);
    
     // Prepare the data to be sent in the header as an array
    $data = array(
        'tid'            => $charge->id,
        'product'        => $charge->description,
        'price'          => $charge->amount,
        'email'          => $customer->email,
        'cname'          => $customer->name
        
    );

    // Encode the data as JSON
    $jsonData = json_encode($data);

    // Set the appropriate content type header
    header('Content-Type: application/json');

    // Send the JSON data in the header
    header('Location: success.php?data=' . urlencode($jsonData));
  

} catch (\Stripe\Exception\ApiErrorException $e) {
    // Handle API error
    echo 'Error charging customer: ' . $e->getMessage();
    exit;
}

<?php
// Check if the data parameter is set in the URL
if (isset($_GET['data'])) {
    // Decode the JSON data into an array
    $jsonData = json_decode(urldecode($_GET['data']), true);

    // Ensure the data is properly decoded and contains the expected fields
    if ($jsonData && isset($jsonData['tid'], $jsonData['product'], $jsonData['price'], $jsonData['email'], $jsonData['cname'])) {
        $t_id = htmlspecialchars($jsonData['tid']);
        $des = htmlspecialchars($jsonData['product']);
        $price = htmlspecialchars($jsonData['price']);
        $email = htmlspecialchars($jsonData['email']);
        $name = htmlspecialchars($jsonData['cname']);
    } else {
        // Redirect to the homepage if the data is not valid
        header('Location: index.php');
        exit;
    }
} else {
    // Redirect to the homepage if the data parameter is not set
    header('Location: index.php');
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thank You</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
    <style>
        /* Custom CSS for styling */
        body {
            background-color: #f8f9fa; /* Light gray background */
        }
        .container {
            margin-top: 50px; /* Space from top */
            max-width: 800px; /* Limit container width */
            border-radius: 10px; /* Rounded corners */
            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); /* Box shadow */
            padding: 30px; /* Padding inside container */
            background-color: #ffffff; /* White background */
        }
        h1 {
            text-align: center; /* Center heading */
            margin-bottom: 30px; /* Space after heading */
        }
        table {
            width: 100%; /* Full width table */
        }
        th, td {
            padding: 10px; /* Cell padding */
        }
        th {
            text-align: left; /* Align title to left */
            width: 30%; /* Set a fixed width for title column */
        }
        td {
            text-align: right; /* Align value to right */
        }
        .token {
            word-break: break-all; /* Break long token string */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Thank You for Your Purchase!</h1>
        <table class="table">
            <tbody>
                <tr>
                    <th>Customer Name:</th>
                    <td><?= $name; ?></td>
                </tr>
                <tr>
                    <th>Email:</th>
                    <td><?= $email; ?></td>
                </tr>
                <tr>
                    <th>Purchase ID:</th>
                    <td><?= $t_id; ?></td>
                </tr>
                <tr>
                    <th>Product Price:</th>
                    <td><?= $price; ?> Yen</td>
                </tr>
                <tr>
                    <th>Product Description:</th>
                    <td><?= $des; ?></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>