Payment Gateway

[zleypner]

GitHub Issue: Implement Payment Gateway Interface with Mock Data

Overview

Create a responsive payment gateway interface that allows users to process payments through multiple payment methods (Credit Card, Stellar Wallet, and Crypto), with interactive tabs for Make Payment, Payment Methods, and Transaction History.

UI Requirements

Navigation Tabs

• Make Payment (default active tab)
• Payment Methods
• Transaction History

Payment Details Section

• Payment method selection (Credit Card, E-Wallet, Crypto) with icons
• Amount input field with currency symbol
• Purpose dropdown selection
• Proceed to Payment button
• Responsive layout for all screen sizes

Payment Summary Section

• Dynamic amount display
• Processing fee calculation
• Total amount calculation
• Secure payment information notice

Technical Requirements

Frontend

• Implement using React.js with TypeScript
• Use CSS Modules or Styled Components for styling
• Implement form validation
• Add loading states for payment processing
• Implement error handling
• Add responsive design breakpoints

Mock Data Structure

// Payment Methods
interface PaymentMethod {
  id: string;
  name: string;
  icon: string;
  isActive: boolean;
}

const mockPaymentMethods = [
  {
    id: 'cc',
    name: 'Credit Card',
    icon: 'credit-card-icon',
    isActive: true
  },
  {
    id: 'ew',
    name: 'E-Wallet',
    icon: 'wallet-icon',
    isActive: true
  },
  {
    id: 'crypto',
    name: 'Crypto',
    icon: 'crypto-icon',
    isActive: true
  }
];

// Transaction History
interface Transaction {
  id: string;
  date: string;
  amount: number;
  method: string;
  status: 'completed' | 'pending' | 'failed';
  purpose: string;
}

const mockTransactions = [
  {
    id: 'tx1',
    date: '2025-01-20',
    amount: 299.99,
    method: 'Credit Card',
    status: 'completed',
    purpose: 'Software License'
  },
  {
    id: 'tx2',
    date: '2025-01-19',
    amount: 149.50,
    method: 'E-Wallet',
    status: 'pending',
    purpose: 'Subscription'
  }
];

// Payment Purposes
const mockPurposes = [
  'Software License',
  'Subscription',
  'One-time Purchase',
  'Service Fee',
  'Other'
];

Make sure to follow the Git Guidelines for Atomic Commits and read Contributing Guide

The Pull request needs to have the format mentioned below in the Git Guideline

• Contributing Guide
• Git Guidelines

[Supa-mega]

I’d love to work on this task.

[ekumamatthew]

Can I take care of this issue?

[derianrddev]

I’m Derian Rodríguez, a member of the Dojo Coding community ⛩️💻. I’d like to work on this.

[respp]

Payment Gateway

Hello @zleypner! I am Renzo Barcos, a Dojo Coding member⛩️, and I’m excited about the opportunity to contribute to SafeTrust.

I’d be happy to take on creating the Payment Gateway Interface. As a full-stack developer, I specialize in developing efficient, scalable, and secure solutions.

For more: my website: www.renzobarcos.site

Steps to Resolve:

1) Understand the Requirements

• Review the project description to understand the components and layout.

2) Implement the Navigation Interface

• Create interactive tabs: "Make Payment", "Payment Methods", "Transaction History".
• Ensure "Make Payment" is the default active tab.

3) Develop the Payment Details Section

• Create the fields to select payment method (Credit Card, E-Wallet, Crypto).
• Add an input field for the amount, with the currency symbol.
• Implement a dropdown menu for selecting the payment purpose.
• Add the "Proceed to Payment" button.

4) Develop the Payment Summary Section

• Display the entered amount dynamically.
• Calculate and display the processing fee and total amount.
• Add a security notice for payment information.

5) Implement the Payment Methods

• Use mockPaymentMethods data to show available payment methods.

6) Implement Transaction History

• Use mockTransactions data to show previous transaction history.

7) Style and Ensure Responsiveness

• Ensure the page is fully responsive using Tailwind CSS or another utility framework.
• Apply a dark theme to the interface.

8) Add Validations and Error Handling

• Add form validations for required fields.
• Implement loading states for payment processing and error handling for failed transactions.

9) Testing

• Test the interface to ensure it works correctly on all devices and for all features.
• Verify that payment methods are selectable and transaction history is displayed properly.

10) Finalize and Submit

• Commit the changes to a branch named feature/payment-gateway.
• Open a pull request with a detailed summary of the implementation.

**Estimated Time:** 1-3 days

Thank you for the opportunity to contribute!

[Wendyalbert]

Is this issue still available?

[Benjtalkshow]

I am a Full Stack Developer specializing in Next.js, TypeScript, Node.js, Cairo and Rust . With over 50 contributions across projects in the OnlyDust ecosystem, I’ve developed strong proficiency in delivering high-quality solutions and resolving complex issues within tight deadlines. My experience spans frontend, backend, smart contracts, and the optimization and maintenance of scalable codebases.
I can handle this task. Kindly assign.

[Michaelkingsdev]

Can I jump on this task?

[mimisavage]

Let me try this one!

[therealemino]

Hi, I've over 4 years professional experience working on frontend applications (React, Vue, Next, Nuxt, TS). I've gone through the repository and Figma design. I would love to contribute to this project and I believe this is an excellent issue for me to take on. My draft PR should be ready within 24 hrs.
Can take on this task?

[Jagadeeshftw]

Proposal to Work on the Issue

I am eager to contribute to this issue and believe I am well-suited for the task, given my extensive experience in Cairo programming and building decentralized applications on StarkNet. My expertise spans across multiple domains crucial for this implementation:

• Smart Contracts & Blockchain Development: Proven expertise in StarkNet, Stellar, and Rust, with hands-on experience in developing secure and efficient smart contracts, blockchain integrations, and high-performance backend systems.
• Backend Engineering: Strong background in designing and managing scalable APIs, handling server-side operations, and ensuring robust backend performance for blockchain applications.
• Frontend Development: Proficient in building intuitive and responsive frontend interfaces using React and Next.js, ensuring seamless interaction between users and blockchain-based applications.

Why Assign This to Me?

I have a track record of delivering high-quality solutions efficiently, with a deep understanding of smart contract security, decentralized architectures, and full-stack development. My ability to bridge frontend, backend, and blockchain components ensures a well-rounded, optimized solution.

Estimated Timeline

I anticipate delivering a fully functional solution within 3 days. Please let me know if I can proceed.

I am excited about the opportunity to contribute and look forward to collaborating!

Best regards,
Jagadeesh B

[chiscookeke11]

I'd like to take this issue.

[BigBen-7]

Hi, I’m Benard, a proficient front-end developer with experience in React.js, TypeScript, Next.js, and Tailwind CSS. I’m confident I can create a responsive and user-friendly payment gateway interface for your project.

Approach:

1. Setup: Use Next.js for optimized performance and Tailwind CSS for responsive and reusable styling.
2. Tabs Navigation: Implement the Make Payment, Payment Methods, and Transaction History tabs using a state-driven component with Tailwind for styling.
3. Payment Details: Build a dynamic form with inputs for payment methods, amount, and purpose, styled and validated using Tailwind and React Hook Form for robust validation.
4. Payment Summary: Use mock data to calculate and display payment details, fees, and totals dynamically.
5. UX/UI Enhancements: Add loading states, error handling, and secure payment notices for a smooth user experience.

I’m excited to contribute and bring this interface to life.

[Bran18]

Hello there!

My name is Brandon Andrey Fernandez, and I am part of the Dojo Coding Community ⛩️💻, KindFi, StarkPlay and https://bitcash.org/en. I’m thrilled about the opportunity to contribute to your project during the Only Dust Boost program and to continue contributing beyond it.

I am a full-stack developer with over five years of experience in Web3 and blockchain technologies. You can find my profiles and links here:

• GitHub: https://github.com/Bran18?tab=repositories
• OnlyDust: https://app.onlydust.com/u/Bran18
• X https://x.com/branfdez_18
• LinkedIn: https://www.linkedin.com/in/brandonfdez18/

I am particularly interested in this issue because it aligns perfectly with my passions—blockchain and modern web development. I am highly motivated by the opportunity to contribute to the development of this amazing project and apply my skills.

I have participated in several hackathons, including ODH, Winter from STK, and other Web2-based hackathons.

Pura Vida! ⛩️💻

[pablomadrigal]

I'm Pablo Madrigal.

I'm a Fullstack Developer with more than 5 years of experience primary on React and Node.js and now learning web3, I'm also part of Dojo Coding ⛩️

Problem

Implement Payment Gateway Interface with Mock Data

Solution

I'm going to Implement the visuals for the Payment Gateway using the shadcn components three different tabs: 

• Make Payment
• Payment Methods
• Transaction History

ETA: 3 days

Steps

1. Implement the Tabs

Create the interactive tabs following the design

2. Create the "Make Payment" form

Create the form for payment, and ensure the fields have the required validations. Test that the functionality works fine

3. Make the Payment summary section

Make the dynamic amount display
Ensure all the calculations are done in the right way

4. Add loading Skeletons

[Bran18]

Thanks for the issue, team! I will start working on it this afternoon and provide the PR by the end of the day

CC. @zleypner