kwac_code

[eager timber]

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1326122440136589365

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[stone spruce]

onMounted(async () => {
 await initializeStripe();
});


const initializeStripe = async () => {
  stripe = await loadStripe(stripePk);
  const res = await fetch('/api/payment/create-payment-intent', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      amount: total 
    })
  });
  const result = await res.json();
  clientSecret = result.client_secret;
  elements = stripe.elements({ clientSecret });
  paymentElement = elements.create('payment', {
      fields: {
        billingDetails: {
          address: {
            country: 'never'
            }
        }
      },
  });
  paymentElement.mount('#payment-element');
};


const countryCode = getCountryCode(user.value?.country);

const pay = async () => {
  isProcessing.value = true;
  try {
    const { error } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        payment_method_data: {
          billing_details: {
            name: user.value?.firstname,
            email: user.value?.email,
            phone: user.value?.phone,
            address: {
              country: countryCode
            },
          },
        },
      },
      redirect: 'if_required' 
    });

    if (error) {
      console.error('Payment error:', error);
      document.querySelector('#payment-error').textContent = error.message;
      isProcessing.value = false;
    } else {
      console.log('Payment succeeded');
      // Handle post-payment success actions, like showing a success message
    }
  } catch (error) {
    console.error('Payment processing error:', error);
    document.querySelector('#payment-error').textContent = 'An error occurred. Please try again.';
    isProcessing.value = false;
  }
};

[sweet ermine]

hi! that's a normal integration yes; you create the PaymentIntent when the page loads

[stone spruce]

so that's fine and it should look like this everytime user enters my payment page (without doing anything)?

[sweet ermine]

yes that's normal if using an integration like this since a PI is created on each page load. You only need to handle successful payments