- Joined
- Oct 2, 2021
- Messages
- 1
- Reaction score
- 0
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stripe</title>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4 offset-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">stripe payment</h4>
<form id="payment_form">
<div class="form-group">
<label class="font-weight-bold">Full namde</label>
<input type="text" name="fullname" class="form-control" placeholder="full name">
</div>
<div class="form-group">
<label class="font-weight-bold">Email</label>
<input type="email" name="email" class="form-control" placeholder="email">
</div>
<!--card-->
<div class="form-group">
<label class="fonts-weight-bold">Card Details</label>
<div id="card-element">
<!-- Elements will create input elements here -->
</div>
<!-- We'll put the error messages in this element -->
<div id="card-errors" role="alert"></div>
</div>
<!--card end-->
<div class="form-group">
<button id="submit" class="btn btn-block btn-success">pay now</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://js.stripe.com/v3/"></script>
<script type="text/javascript">
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
var stripe = Stripe('pk_test_51JWkHLK7X12cK8Ptf5y5DQn6Ugf6miu3AqSuhH9wdLsyTB9ouf0TY31vDQxq19xIt6YH76uMTEX1kU9HMyrcEb6w00MTxHnGxc');
var elements = stripe.elements();
// Set up Stripe.js and Elements to use in checkout form
var style = {
base: {
color: "#32325d",
}
};
var card = elements.create("card", { style: style });
card.mount("#card-element");
card.on('change', ({error}) => {
let displayError = document.getElementById('card-errors');
if (error) {
displayError.textContent = error.message;
} else {
displayError.textContent = '';
}
});
var form = document.getElementById('payment_form');
form.addEventListener('submit', function(ev) {
ev.preventDefault();
// If the client secret was rendered server-side as a data-secret attribute
// on the <form> element, you can retrieve it here by calling `form.dataset.secret`
stripe.confirmCardPayment('<= $$intent->client_secret; >', {
payment_method: {
card: card,
billing_details: {
name: 'Jenny Rosen'
}
}
}).then(function(result) {
if (result.error) {
// Show error to your customer (e.g., insufficient funds)
console.log(result.error.message);
$('#card-errors').text(result.error.message);
} else {
// The payment has been processed!
if (result.paymentIntent.status === 'succeeded') {
// Show a success message to your customer
// There's a risk of the customer closing the window before callback
// execution. Set up a webhook or plugin to listen for the
// payment_intent.succeeded event that handles any business critical
// post-payment actions.
$('#card-errors').text('Payment Completed');
}
}
});
});
</script>
<script>
// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = require('stripe')('sk_test_51JWkHLK7X12cK8PthlqsgUO3VAWHrZsupyEbVuYTjsIuSO13TdY30UKEXXdF3xrGNrgpJYO39hCnnO6o8B6zekpY005JuCEk3y');
(async () => {
const paymentIntent = await stripe.paymentIntents.create({
amount: 10099,
currency: 'aed',
// Verify your integration in this guide by including this parameter
metadata: {integration_check: 'accept_a_payment'}});
});
</script>
</body>
</html>
hi need help with this cant process any payment pls guide me