Basic Integration

This guide illustrates the basic integration of Moyasar's Flutter SDK to accept Credit Card payments in your Flutter app. For Apple Pay, see the Apple Pay Integration Guide.

Configuring a Payment Request

import 'package:flutter/material.dart';
import 'package:moyasar/moyasar.dart';

class PaymentMethods extends StatelessWidget {
  PaymentMethods({super.key});

  final paymentConfig = PaymentConfig(
    publishableApiKey: 'YOUR_API_KEY',
    amount: 25758, // SAR 257.58
    description: 'order #1324',
    metadata: {'size': '250g'},
    givenID: Uuid().v4(), // Optional. The payment ID to be created from your side to apply Idempotency (UUID -- v4 is recommended).
  );

  void onPaymentResult(result) {
    if (result is PaymentResponse) {
      switch (result.status) {
        case PaymentStatus.paid:
          // handle success.
          break;
        case PaymentStatus.failed:
          // handle failure.
          break;
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return CreditCard(
      config: paymentConfig,
      onPaymentResult: onPaymentResult,
    );
  }
}

info

Use the optional parameter givenID when you need to apply Idempotency Retry Payment Creation if you encounter any of the following:

• A 5xx server error response.
• A network error.
• A timeout error (open, read, or write).

---

• ⚠️ Note: If you ever send the same givenID value for different payments, you will receive a 400 response with the error message Payment is already created.
• Read more about Idempotency to understand the givenID parameter and avoid duplicate payments.

Demo Example

You can explore the demo provided in the moyasar-flutter repository ( example dir ).