82 lines
2.3 KiB
JavaScript
82 lines
2.3 KiB
JavaScript
// Set your publishable key: remember to change this to your live publishable key in production
|
|
// See your keys here: https://dashboard.stripe.com/account/apikeys
|
|
var stripe = Stripe('pk_test_51Icq29K2XyHQRTs2DeltUIWrbFb5evfJVGaQzMv4r50g8Q7HAUkSFr7BBGv0aP1damXIhM6fZ4Yf9Wz0qW6TpTVi00dWcW7J1O');
|
|
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.addEventListener('change', ({error}) => {
|
|
const displayError = document.getElementById('card-errors');
|
|
if (error) {
|
|
displayError.textContent = error.message;
|
|
} else {
|
|
displayError.textContent = '';
|
|
}
|
|
});
|
|
|
|
|
|
var submitButton = document.getElementById('submit');
|
|
|
|
function GetClientSecret() {
|
|
var result = "";
|
|
$.ajax({
|
|
async: false,
|
|
url: "getstripepaymentintent",
|
|
type: "get", //send it through get method
|
|
dataType: "json",
|
|
data: {
|
|
charge_data: $("#charge_data").html()
|
|
},
|
|
success: function(response) {
|
|
console.log('pay success');
|
|
console.log(response.stripesessionid);
|
|
console.log('rc: '+response.rc);
|
|
if (response.rc == 0) {
|
|
result = response.stripeclientsecret;
|
|
}
|
|
},
|
|
error: function(xhr) {
|
|
console.log('getstripepaymentintent error');
|
|
//Do Something to handle error
|
|
}
|
|
});
|
|
|
|
return result;
|
|
}
|
|
|
|
submitButton.addEventListener('click', function(ev) {
|
|
var clientSecret = GetClientSecret();
|
|
stripe.confirmCardPayment(clientSecret, {
|
|
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);
|
|
} 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.
|
|
alert("Payment succeeded!!!");
|
|
}
|
|
}
|
|
});
|
|
});
|