import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: Container(
child: Column(
children: [
SizedBox(
height: 50,
),
Image.network(
'https://images.unsplash.com/photo-1611186871348-b1ce696e52c9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YXBwbGUlMjBsYXB0b3B8ZW58MHx8MHx8&w=1000&q=80',
height: 250,
width: 350,
),
SizedBox(
height: 20,
),
Text('macbook pro'),
SizedBox(
height: 20,
),
Text('description'),
SizedBox(
height: 20,
),
Text('rs200000'),
SizedBox(
height: 20,
),
ElevatedButton(onPressed: () {}, child: Text('buy now'))
],
),
),
));
}
}
Let's suppose this is the project then when we click on buynow button then razorpay popup should be open in website
**Could you guys help me in this because I think razorpay doesn't provide any plugin for Flutter web **
Add this package razorpay_web: ^1.1.0
in pubspec.yaml
file
Then copy the full code and paste in main.dart
and run it works then enjoy..
import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:razorpay_web/razorpay_web.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: Container(
child: Column(
children: [
SizedBox(
height: 50,
),
Image.network(
'https://images.unsplash.com/photo-1611186871348-b1ce696e52c9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YXBwbGUlMjBsYXB0b3B8ZW58MHx8MHx8&w=1000&q=80',
height: 250,
width: 350,
),
SizedBox(
height: 20,
),
Text('macbook pro'),
SizedBox(
height: 20,
),
Text('description'),
SizedBox(
height: 20,
),
Text('rs200000'),
SizedBox(
height: 20,
),
Builder(
builder: (context) => Center(
child: RaisedButton(
color: Colors.blue,
child: Text("Buy Now"),
onPressed: () => Navigator.push(
context,
MaterialPageRoute(builder: (context) => Payments()),
),
),
),
),
],
),
),
));
}
}
class Payments extends StatefulWidget {
const Payments({Key? key}) : super(key: key);
@override
_PaymentsState createState() => _PaymentsState();
}
class _PaymentsState extends State<Payments> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: RazorpayWeb(
rzpKey: "rzp_test_DNaSxot4oJHykG", // Enter Your Razorpay Key Here
options: RzpOptions(
amount: 1000,
name: "Razorpay",
description: "Test Payment",
image: "https://i.imgur.com/3g7nmJC.png",
prefill: const PrefillData(
name: "Razorpay",
email: "rzp@gmail.com",
contact: "9876543210",
),
colorhex: "#FF0000",
),
onPaymentSuccess: (String paymentId) {
print("Payment Success");
log(paymentId);
},
onPaymentError: (String error) {
print("Payment Error");
},
),
),
);
}
}
If payment is successful onPaymentSuccess Function will contain the payment_id from razorpay.