Basic Integration

This guide illustrates the basic integration of Moyasar's React Native SDK to accept payments through Apple Pay or Credit Card in your Flutter app.

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'},
    applePay: ApplePayConfig(merchantId: 'YOUR_MERCHANT_ID', label: 'YOUR_STORE_NAME'),
    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 Column(
      children: [
        ApplePay(
            config: paymentConfig,
            onPaymentResult: onPaymentResult,
        ),
        const Text("or"),
        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 ).