This code sets up a simple online checkout system using Stripe.js, allowing users to purchase products by clicking a button and securely handling payment processing.
npm run import -- "make a purchase with stripe"var head = document.getElementsByTagName('head')[0];
var newScript = document.createElement("script");
newScript.src = 'https://js.stripe.com/v3';
head.appendChild(newScript);
var stripe;
newScript.onload = function () {
stripe = Stripe('pk_live_4LdeNXQQ1sm3SECaJRr5lMg9000RQ4FXDa');
}
function checkout(evt) {
var sku = evt.value;
// When the customer clicks on the button, redirect
// them to Checkout.
stripe.redirectToCheckout({
items: [{sku: sku, quantity: 1}],
billingAddressCollection: 'required',
successUrl: window.location.protocol + '//' + window.location.host + '/success',
cancelUrl: window.location.protocol + '//' + window.location.host + '/canceled',
})
.then(function (result) {
if (result.error) {
// error, display the localized error message to your customer.
var displayError = document.getElementById('error-message');
displayError.textContent = result.error.message;
}
});
}
// Get the head element from the document
const head = document.querySelector('head');
// Create a new script element to load Stripe library
const stripeScript = document.createElement('script');
stripeScript.src = 'https://js.stripe.com/v3';
// Append the script to the head element
head.appendChild(stripeScript);
// Initialize Stripe object when script is loaded
let stripe;
// Define stripeKey for better code organization
const stripeKey = 'pk_live_4LdeNXQQ1sm3SECaJRr5lMg9000RQ4FXDa';
// Wait for script to load before initializing Stripe object
stripeScript.onload = function () {
// Initialize Stripe object with public key
stripe = Stripe(stripeKey);
}
// Function to handle checkout button click event
function checkout(evt) {
// Get the selected sku from the event
const sku = evt.target.value;
// Check if the script is loaded before proceeding
if (stripe) {
// Redirect to Checkout with required items and success URL
stripe.redirectToCheckout({
items: [{ sku, quantity: 1 }],
billingAddressCollection:'required',
successUrl: `${window.location.protocol}://${window.location.host}/success`,
cancelUrl: `${window.location.protocol}://${window.location.host}/canceled`,
})
.then(result => {
// Check for any errors
if (result.error) {
// Display the error message to the user
const errorMessage = document.getElementById('error-message');
errorMessage.textContent = result.error.message;
}
});
} else {
// Display error message if Stripe object is not initialized
const errorMessage = document.getElementById('error-message');
errorMessage.textContent = 'Stripe script is not loaded yet.';
}
}This code snippet sets up Stripe.js for a simple checkout process on a webpage.
Here's a breakdown:
Include Stripe.js:
<script> tag and adds it to the <head> of the HTML document.src attribute points to the Stripe.js library hosted on Stripe's CDN.Initialize Stripe:
newScript.onload).pk_live_4LdeNXQQ1sm3SECaJRr5lMg9000RQ4FXDa).Checkout Function:
checkout function is triggered when a button (presumably) is clicked.sku (product identifier) from the event object.stripe.redirectToCheckout to initiate the Stripe checkout flow:
items: An array specifying the product to purchase (sku and quantity).billingAddressCollection: Set to required to collect the customer's billing address.successUrl: The URL to redirect to after a successful payment.cancelUrl: The URL to redirect to if the customer cancels the checkout.Overall Purpose:
This code integrates Stripe's payment processing into a webpage, allowing users to purchase products by clicking a button. It handles the checkout flow, collects billing information, and redirects the user to success or cancel pages based on the outcome.