· last year · Mar 28, 2024, 10:25 PM
1// Get API Key
2let STRIPE_PUBLISHABLE_KEY = document.currentScript.getAttribute('STRIPE_PUBLISHABLE_KEY');
3
4// Create an instance of the Stripe object and set your publishable API key
5const stripe = Stripe(STRIPE_PUBLISHABLE_KEY);
6
7// Select subscription form element
8const subscrForm = document.querySelector("#subscrForm"); // Get Id Form
9
10// Attach an event handler to subscription form
11subscrForm.addEventListener("submit", handleSubscrSubmit);
12
13let elements = stripe.elements();
14var style = {
15 base: {
16 lineHeight: "3rem",
17 fontSize: "1.6rem",
18 border: "1px solid #ced4da",
19 }
20};
21let cardElement = elements.create('card', {style: style});
22cardElement.mount('#card-element');
23cardElement.on('change', function (event){
24 displayError(event);
25});
26
27function displayError(event){
28 if (event.error) {
29 showMessage(event.error.message);
30 }
31}
32
33async function handleSubscrSubmit(e){
34 e.preventDefault();
35 setLoading(true);
36 let subscr_plan_id = document.getElementById("subscription_plan").value;
37 let customer_name = document.getElementById("name").value;
38 let customer_email = document.getElementById("email").value;
39
40 // Post the subscription info to the server-side script
41 fetch("payment_init.php",{
42 method: "POST",
43 headers: {"Content-Type": "application/json"},
44 body: JSON.stringify({ request_type:'create_customer_subscription', subscr_plan_id:subscr_plan_id,
45 name:customer_name, email:customer_email })
46 })
47 .then(response => response.json())
48 .then(data => {
49 if (data.subscriptionId && data.clientSecret) {
50 paymentProcess(data.subscriptionId, data.clientSecret, data.customerId);
51 }else{
52 showMessage(data.error);
53 }
54 setLoading(false);
55 })
56 .catch(console.error);
57}
58
59function paymentProcess(subscriptionId, clientSecret, customerId){
60 let subscr_plan_id = document.getElementById("subscription_plan").value;
61 let customer_name = document.getElementById("name").value;
62 // Create payment method and confirm payment intent
63 stripe.confirmCardPayment(clientSecret,{
64 payment_method : {
65 card : cardElement,
66 billing_details : {
67 name : customer_name,
68 }
69 }
70 }).then((result) =>{
71 if (result.error) {
72 showMessage(result.error.message);
73 setLoading(false);
74 }else{
75 /*
76 * successful subscription payment
77 * Post the transaction info to the server-side script and redirect to the payment status page
78 */
79 fetch("payment_init.php",{
80 method : "POST",
81 haders : {"Content-Type": "application/json"},
82 body : JSON.stringify({ request_type:'payment_insert', subscription_id:subscriptionId, customer_id:customerId,
83 subscr_plan_id:subscr_plan_id, payment_intent:result.paymentIntent})
84 })
85 .then(response => response.json())
86 .then(data => {
87 if (data.payment_id) {
88 window.location.href = 'payment_status.php?sid='+data.payment_id;
89 }else{
90 showMessage(data.error);
91 setLoading(false);
92 }
93 })
94 .catch(console.error);
95
96 }
97 });
98}
99
100// Display message
101function showMessage(messageText){
102 const messageContainer = document.querySelector("#paymentResponse");
103
104 messageContainer.classList.remove("hidden");
105 messageContainer.textContent = messageText;
106
107 setTimeout(function(){
108 messageContainer.classList.add("hidden");
109 messageText.textContent = "";
110 }, 5000);
111}
112
113// Show a spinner on payment submission
114function setLoading(isLoading){
115 if (isLoading) {
116 // Disable the button and show spinner
117 document.querySelector("#submitBtn").disabled = true;
118 document.querySelector("#spinner").classList.remove("hidden");
119 document.querySelector("buttonText").classList.add("show");
120 }else{
121 // Enable the button and hidde spinner
122 document.querySelector("#submitBtn").disabled =false;
123 document.querySelector("#spinner").classList.add("show");
124 document.querySelector("buttonText").classList.remove("hidden");
125 }
126}
127