🚀 Blogger में Razorpay Checkout Setup (Shipping + Payment एक साथ)

अगर आप Blogger पर Gokwik जैसा Checkout Page बनाना चाहते हैं, जहाँ Shipping Details + Payment एक साथ हो, तो इस Step-by-Step Guide को फॉलो करें।

🔹 Step 1: Razorpay में Account बनाएं & API Key लें

Razorpay की वेबसाइट पर जाएं और Sign Up करें।
Dashboard में Settings → API Keys पर जाएं।
Live Mode Enable करें और Key ID & Secret Key कॉपी करें।

🔹 Step 2: Blogger Checkout Form Code Add करें

अब Blogger के Page Section में जाकर एक नया पेज बनाएं और नीचे दिया गया HTML Code Add करें।

📝 Checkout Form Code:


{<!DOCTYPE html>
<html>
<head>
    <title>Checkout | Your Store</title>
    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
</head>
<body>
    <h2>🛍 Your Order</h2>
    <label>Product Name:</label>
    <input type="text" id="product_name" value="Stylish Dress" readonly>
  
    <label>Price (INR):</label>
    <input type="text" id="product_price" value="999" readonly>

    <h2>📍 Shipping Details</h2>
    <input type="text" id="name" placeholder="Full Name" required>
    <input type="text" id="mobile" placeholder="Mobile Number" required>
    <input type="text" id="address" placeholder="Full Address" required>

    <h2>💳 Payment Method</h2>
    <label><input type="radio" name="payment" value="COD" checked> Cash on Delivery (COD)</label>
    <label><input type="radio" name="payment" value="Prepaid"> Prepaid (Online Payment)</label>

    <button type="button" id="payNow">Proceed to Pay</button>

    <script>
        document.getElementById("payNow").addEventListener("click", function() {
            var paymentMethod = document.querySelector('input[name="payment"]:checked').value;
            var productName = document.getElementById("product_name").value;
            var productPrice = document.getElementById("product_price").value;
            var customerName = document.getElementById("name").value;
            var customerMobile = document.getElementById("mobile").value;
            var customerAddress = document.getElementById("address").value;

            if (!customerName || !customerMobile || !customerAddress) {
                alert("Please fill all shipping details.");
                return;
            }

            if (paymentMethod === "COD") {
                alert("Order Confirmed! COD Selected.");
                sendOrderDetails("COD", productName, productPrice, customerName, customerMobile, customerAddress);
            } else {
                startRazorpayPayment(productName, productPrice, customerName, customerMobile, customerAddress);
            }
        });

        function startRazorpayPayment(productName, productPrice, customerName, customerMobile, customerAddress) {
            var options = {
                "key": "YOUR_RAZORPAY_KEY",
                "amount": productPrice * 100,
                "currency": "INR",
                "name": "Your Store",
                "description": productName,
                "handler": function (response) {
                    alert("Payment Successful! Order ID: " + response.razorpay_payment_id);
                    sendOrderDetails("Prepaid", productName, productPrice, customerName, customerMobile, customerAddress);
                }
            };
            var rzp1 = new Razorpay(options);
            rzp1.open();
        }

        function sendOrderDetails(paymentStatus, productName, productPrice, customerName, customerMobile, customerAddress) {
            var orderDetails = {
                "payment_status": paymentStatus,
                "product_name": productName,
                "product_price": productPrice,
                "customer_name": customerName,
                "customer_mobile": customerMobile,
                "customer_address": customerAddress
            };

            fetch("https://your-server.com/order-confirmation.php", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(orderDetails)
            })
            .then(response => response.text())
            .then(data => {
                console.log("Order Saved: " + data);
            });
        }
    </script>
</body>
</html>
 }

🔹 Step 3: API Key Replace करें

कोड में "YOUR_RAZORPAY_KEY" को अपनी Razorpay Key ID से रिप्लेस करें।

🔹 Step 4: Order Confirmation System Set करें

आपका ऑर्डर डेटा सेव करने के लिए:

🚀 Google Forms Trick (No Server Required)

🔥 अब आपका Blogger Checkout System Ready है!

💡 Advanced Setup (Auto WhatsApp Message & Email Confirmation)

अगर आपको Auto WhatsApp Message और Email भेजना है, तो Twilio API या Google Sheets Script का उपयोग कर सकते हैं।

❓ कोई दिक्कत हो रही है?

अगर आपको Practical Video चाहिए, तो मुझे बताएं, मैं Step-by-Step Video Guide बना सकता हूँ। 🚀

Earn By Fun

🚀 Blogger में Razorpay Checkout Setup (Shipping + Payment एक साथ)

🔹 Step 1: Razorpay में Account बनाएं & API Key लें

🔹 Step 2: Blogger Checkout Form Code Add करें

📝 Checkout Form Code:

🔹 Step 3: API Key Replace करें

🔹 Step 4: Order Confirmation System Set करें

🚀 Google Forms Trick (No Server Required)

🔥 अब आपका Blogger Checkout System Ready है!

💡 Advanced Setup (Auto WhatsApp Message & Email Confirmation)

❓ कोई दिक्कत हो रही है?

Post a Comment

0 Comments

Popular Posts

BEST MONEY EARNING APP 2024 : Earn Daily ₹3,000 Real Cash Without Investment

Best AI Tools for Online Business in 2026 (High-Income Skills Guide)

7 Legit Ways to Make Money Online in 2026 (Beginner Friendly)

How to Choose the Best Life Insurance Policy in 2025: Ultimate Guide

Labels

Recent Posts

BEST MONEY EARNING APP 2024 : Earn Daily ₹3,000 Real Cash Without Investment

7 Legit Ways to Make Money Online in 2026 (Beginner Friendly)

Best AI Tools for Online Business in 2026 (High-Income Skills Guide)

How to Choose the Best Life Insurance Policy in 2025: Ultimate Guide

Search This Blog

Pages

Contact Form

Contact form

🚀 Blogger में Razorpay Checkout Setup (Shipping + Payment एक साथ)

🔹 Step 1: Razorpay में Account बनाएं & API Key लें

🔹 Step 2: Blogger Checkout Form Code Add करें

📝 Checkout Form Code:

🔹 Step 3: API Key Replace करें

🔹 Step 4: Order Confirmation System Set करें

🚀 Google Forms Trick (No Server Required)

🔥 अब आपका Blogger Checkout System Ready है!

💡 Advanced Setup (Auto WhatsApp Message & Email Confirmation)

❓ कोई दिक्कत हो रही है?

Post a Comment

0 Comments

Popular Posts

Labels

Social Plugin

Recent Posts

Search This Blog

Pages

Contact Form

Contact form