1. Set Up Authentication
You can use a library like Supabase or Firebase for authentication. Both support Google OAuth and email/password authentication.
Example with Supabase:
Install Supabase:
npm install @supabase/supabase-js
Initialize Supabase in your project:
import { createClient } from '@supabase/supabase-js';
const supabaseUrl = 'https://your-supabase-url.supabase.co';
const supabaseKey = 'your-anon-key';
export const supabase = createClient(supabaseUrl, supabaseKey);
Add Google OAuth and email/password sign-up:
// Google OAuth
async function signInWithGoogle() {
const { user, error } = await supabase.auth.signInWithOAuth({
provider: 'google',
});
if (error) console.error(error);
return user;
}
// Email/password sign-up
async function signUpWithEmail(email, password) {
const { user, error } = await supabase.auth.signUp({ email, password });
if (error) console.error(error);
return user;
}
2. Integrate Razorpay for Payments
Include Razorpay’s script in your project:
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
Create a payment button and handle the payment flow:
async function handlePayment() {
const options = {
key: 'your-razorpay-key-id', // Replace with your Razorpay key
amount: 50000, // Amount in paise (e.g., 50000 = ₹500)
currency: 'INR',
name: 'Your Company Name',
description: 'Subscription Payment',
image: 'https://your-logo-url.com/logo.png',
handler: async function (response) {
// Payment successful
console.log('Payment ID:', response.razorpay_payment_id);
await completeSignUp(); // Proceed with user sign-up
},
prefill: {
email: 'user-email@example.com', // Prefill user email
},
theme: {
color: '#F37254',
},
};
const razorpay = new Razorpay(options);
razorpay.open();
}
3. Link Payment Success to User Sign-Up
Store the user’s authentication details temporarily (e.g., in a session or local storage) before payment.
After payment, create the user account:
async function completeSignUp() {
const user = await signUpWithEmail('user-email@example.com', 'password');
if (user) {
console.log('User signed up successfully:', user);
// Redirect to dashboard or success page
}
}
4. Handle Payment Failure
Add a modal_close callback to Razorpay to handle payment abandonment:
const options = {
...
modal: {
ondismiss: function () {
console.log('Payment dismissed');
// Optionally, show a message to the user
},
},
};
5. Backend Validation (Optional but Recommended)
Use Razorpay’s webhooks to verify the payment:
// In your SvelteKit API route
export async function post(request) {
const { payment_id } = request.body;
// Verify payment with Razorpay API
const isValid = await verifyPayment(payment_id);
if (isValid) {
// Complete sign-up
} else {
// Reject sign-up
}
}
6. Putting It All Together
- Create a sign-up form for email/password or Google OAuth.
- On form submission, store the user’s details temporarily and initiate the Razorpay payment.
- On payment success, complete the sign-up process.
- On payment failure, discard the temporary user data.
Example Workflow:
- User fills out the sign-up form or clicks “Sign up with Google.”
- User clicks the payment button, and Razorpay opens.
- If payment is successful:
- Create the user account.
- Redirect to the dashboard.
- If payment fails:
- Show an error message.
- Do not create the user account.
Option 1: Load the Script in a Svelte Component
<script>
import { onMount } from 'svelte';
let Razorpay;
onMount(async () => {
// Dynamically load the Razorpay script
const script = document.createElement('script');
script.src = 'https://checkout.razorpay.com/v1/checkout.js';
script.async = true;
document.body.appendChild(script);
script.onload = () => {
// Razorpay is now available globally
Razorpay = window.Razorpay;
console.log('Razorpay script loaded');
};
});
function handlePayment() {
if (!Razorpay) {
console.error('Razorpay script not loaded yet');
return;
}
const options = {
key: 'your-razorpay-key-id', // Replace with your Razorpay key
amount: 50000, // Amount in paise (e.g., 50000 = ₹500)
currency: 'INR',
name: 'Your Company Name',
description: 'Subscription Payment',
image: 'https://your-logo-url.com/logo.png',
handler: function (response) {
console.log('Payment ID:', response.razorpay_payment_id);
// Handle successful payment
},
prefill: {
email: 'user-email@example.com', // Prefill user email
},
theme: {
color: '#F37254',
},
};
const rzp = new Razorpay(options);
rzp.open();
}
</script>
<button on:click={handlePayment}>Pay with Razorpay</button>
Option 2: Load the Script in src/app.html
Open the src/app.html file in your SvelteKit project.
Add the Razorpay script tag inside the head or at the end of the body:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
<title>Your App</title>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
</head>
<body>
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
Now, the Razorpay object will be available globally in your app, and you can use it directly in any component or page:
<script>
function handlePayment() {
const options = {
key: 'your-razorpay-key-id',
amount: 50000,
currency: 'INR',
name: 'Your Company Name',
description: 'Subscription Payment',
handler: function (response) {
console.log('Payment ID:', response.razorpay_payment_id);
},
};
const rzp = new Razorpay(options);
rzp.open();
}
</script>
<button on:click={handlePayment}>Pay with Razorpay</button>