Integrate Stripe JavaScript Library
- To begin integrating Stripe, include the Stripe.js library in your HTML file. This script is crucial as it enables secure payment handling and tokenization.
<script src="https://js.stripe.com/v3/"></script>
Create and Style the Payment Form
- Design an HTML form structure to capture customer details and payment information. This typically includes fields for card details, like card number, expiry date, and CVC.
<form id="payment-form">
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
<button type="submit">Submit Payment</button>
</form>
Initialize Stripe Elements
- Stripe Elements are pre-built UI components that help you create your own checkout forms. Initialize Stripe and create an instance of Stripe elements to securely capture card information.
// Set up Stripe.js and the Elements API
var stripe = Stripe('your-publishable-key-from-stripe-dashboard');
var elements = stripe.elements();
var style = {
base: {
color: "#32325d",
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: "antialiased",
fontSize: "16px",
"::placeholder": {
color: "#aab7c4"
}
},
invalid: {
color: "#fa755a",
iconColor: "#fa755a"
}
};
var card = elements.create('card', {style: style});
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.on('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
Handling Form Submission
- Add an event listener to handle the form submission. On submit, call Stripe.js to create a secure token from the card details.
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();
}
Process the Payment on Server-side
- Once you receive the token on your server, you can use Stripe’s server-side libraries to charge the card. This step requires server-side code that securely interacts with the Stripe API.
require 'vendor/autoload.php';
\Stripe\Stripe::setApiKey('your-secret-key-from-stripe-dashboard');
$token = $_POST['stripeToken'];
$charge = \Stripe\Charge::create([
'amount' => 999,
'currency' => 'usd',
'description' => 'Example charge',
'source' => $token,
]);
Test and Go Live
- Make sure you thoroughly test the entire payment flow in Stripe’s test mode. Verify different scenarios and error handling. When ready, switch to live mode by replacing test API keys with live ones.
