Created
March 8, 2024 07:30
-
-
Save erdum/1fae111f6f7a5d7e07cd7d9d39a0c8af to your computer and use it in GitHub Desktop.
Stripe Add Card Form (for testing)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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