Skip to content

Instantly share code, notes, and snippets.

@erdum
Created March 8, 2024 07:30
Show Gist options
  • Save erdum/1fae111f6f7a5d7e07cd7d9d39a0c8af to your computer and use it in GitHub Desktop.
Save erdum/1fae111f6f7a5d7e07cd7d9d39a0c8af to your computer and use it in GitHub Desktop.
Stripe Add Card Form (for testing)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment Form</title>
<!-- Include Stripe.js -->
<script src="https://js.stripe.com/v3/"></script>
</head>
<body>
<!-- Form to add a new card -->
<form id="add-card-form">
<div id="new-card-element">
<!-- Stripe Elements Placeholder for new card input -->
</div>
<button id="add-card-button" type="submit">Add New Card</button>
</form>
<br>
<script>
// Set up Stripe.js with your publishable key
const stripe = Stripe('');
// Create an instance of Elements for the new card form
const newCardElements = stripe.elements();
const newCard = newCardElements.create('card');
newCard.mount('#new-card-element');
// Handle form submission to add a new card
const addCardForm = document.getElementById('add-card-form');
addCardForm.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createPaymentMethod('card', newCard).then(function(result) {
if (result.error) {
console.error(result.error.message);
} else {
console.log(result.paymentMethod);
// Send payment method ID to your backend to associate with the user
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment