UddoktaPay is a platform that enables companies to manage online transactions and integrate payment gateways into their websites or applications across multiple currencies worldwide.

It is user-friendly and safe.

Numerous international apps use it, and it provides accurate reports.

To give you an idea of what we will be doing in this article, a sample video is provided below.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add the uddoktapay and http package

Depend on it, Run this command With Flutter:

$ flutter pub add uddoktapay

dependencies:
  uddoktapay: ^0.0.4
  http:

The version may get change depending on your usage. 
We have preferred this package because it is developed by stripe itself and it is well maintained project with error free code.

Important Tip:  if  you are facing like package pub get problem then you can use this gradle version "distributionUrl=https\://services.gradle.org/distributions/gradle-8.3-all.zip"

Step 3:Make a Payment

For Sandbox apply this code


UddoktaPay.createPayment(  

context: context,  

customer: CustomerDetails(  

fullName: 'Riad Rayhan',  

email: 'riadrayhan.cse@gmail.com',  

),  

amount: '100',  


);

and for production mode then apply this code



UddoktaPay.createPayment(  

context: context,  

customer: CustomerDetails(  

fullName: 'Riad Rayhan',  

email: 'riadrayhan.cse@gmail.com',  

),  

amount: '100',  

credentials: UddoktapayCredentials(  

apiKey: 'api_key',  

panelURL: 'https://pay.domain.com',  

),  
)


Complete Code:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:uddoktapay/models/customer_model.dart';
import 'package:uddoktapay/models/request_response.dart';
import 'package:uddoktapay/uddoktapay.dart';

class UddoktapayPage extends StatefulWidget {
  const UddoktapayPage({super.key});

  @override
  State<UddoktapayPage> createState() => _UddoktapayPageState();
}

class _UddoktapayPageState extends State<UddoktapayPage> {
  Future<void> uddoktapay(BuildContext context) async {
    final response = await UddoktaPay.createPayment(
      context: context,
      customer: CustomerDetails(
        fullName: 'riad',
        email: 'riadrayhan111@gmail.com',
      ),
      amount: '100',
    );

    // Handle the response based on the status
    if (response.status == ResponseStatus.completed) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text(
            "Payment Completed, trx ID: ${response.transactionId} ${response.senderNumber}",
          ),
          backgroundColor: Colors.green,
        ),
      );
    } else if (response.status == ResponseStatus.canceled) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: const Text("Payment Canceled..."),
          backgroundColor: Colors.red,
        ),
      );
    } else if (response.status == ResponseStatus.pending) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: const Text("Payment Pending...\nPlease wait"),
          backgroundColor: Colors.orange,
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text("Uddoktapay Payment"),
        backgroundColor: Colors.teal,
        elevation: 4,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // Header Section
            Container(
              padding: const EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.teal[100],
                borderRadius: BorderRadius.circular(12),
              ),
              child: Column(
                children: [
                  Text(
                    "Welcome to Uddoktapay",
                    style: TextStyle(
                      fontSize: 22,
                      fontWeight: FontWeight.bold,
                      color: Colors.teal[800],
                    ),
                  ),
                  const SizedBox(height: 8),
                  const Text(
                    "Secure and fast payment system for all your needs.",
                    style: TextStyle(fontSize: 16, color: Colors.black54),
                    textAlign: TextAlign.center,
                  ),
                ],
              ),
            ),
            const SizedBox(height: 20),

            // Payment Button Section
            ElevatedButton.icon(
              onPressed: () async {
                await uddoktapay(context);
              },
              icon: const Icon(Icons.payment,color: Colors.black54,),
              label: const Text(
                "Make a Payment",
                style: TextStyle(fontSize: 18,color: Colors.white),
              ),
              style: ElevatedButton.styleFrom(
                padding: const EdgeInsets.symmetric(vertical: 16),
                backgroundColor: Colors.teal,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
            ),
            const SizedBox(height: 10),

            ElevatedButton.icon(
              onPressed: () async {
                // You can add more payment methods here if needed
                await uddoktapay(context);
              },
              icon: const Icon(Icons.attach_money,color: Colors.black45,),
              label: const Text(
                "Pay via Alternative Method",
                style: TextStyle(fontSize: 18,color: Colors.white),
              ),
              style: ElevatedButton.styleFrom(
                padding: const EdgeInsets.symmetric(vertical: 16),
                backgroundColor: Colors.teal[700],
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
            ),

            const Spacer(),

            // Footer Section
            Container(
              alignment: Alignment.center,
              child: const Text(
                "Powered by Uddoktapay © 2024",
                style: TextStyle(color: Colors.black45),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Output:
When Payment is Successful:
When Payment is Cancelled: