` tag in the HTML of your page.
2. Replace `"PUBLISHABLE STRIPE API KEY"` with your actual publishable API key from Stripe.
3. Replace `"LAZY SERVER LINK"` with the endpoint URL of your published app that you received after pressing the test button.
4. Replace `"PRICE_ID"` with the actual price ID you want to use for the transaction. You can find this in your Stripe dashboard under Products.
Here is the frontend code snippet you'll need to add to your WordPress page:
By following these steps, you will have successfully integrated a custom Stripe payment gateway into your WordPress site using the Lazy template. Your users will now be able to make secure payments directly on your site.
<script src="https://js.stripe.com/v3/"></script>
<script>
const stripe = Stripe("PUBLISHABLE STRIPE API KEY");
initialize();
function getUTMParameters() {
const params = new URLSearchParams(window.location.search);
return {
utm_source: params.get('utm_source') || '',
utm_medium: params.get('utm_medium') || '',
utm_campaign: params.get('utm_campaign') || '',
utm_term: params.get('utm_term') || '',
utm_content: params.get('utm_content') || ''
};
}
async function initialize() {
const months = 1;
const utmParams = getUTMParameters();
const response = await fetch("LAZY SERVER LINK/create-checkout-session", {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
months,
price: 'PRICE_ID',
...utmParams
})
});
const { clientSecret } = await response.json();
const checkout = await stripe.initEmbeddedCheckout({
clientSecret,
});
checkout.mount('#checkout');
}
</script>