Mobile SDKs
Flutter SDK

9min
Overview
Easily accept payments through Apple Pay or Credit Card (with managed 3DS step) in your Flutter app with Moyasar.
Features
Use this plugin to support:
Apple Pay: Quickly and safely accept Apple Pay payments.
Credit Card: Easily accept many card companies while not worrying about managing the required 3DS step.
Getting Started
Prerequisites
Accepting Apple Pay Payments on iOS
Complete the following steps to easily accept Apple Pay payments:
Follow Apple Pay Using Developer Account﻿ to set up your Apple developer account and integrate it with Moyasar.
Follow this guide to enable accepting Apple Pay in your application using Xcode.
Accepting Credit Card Payments on Android
Due to depending on the flutter_webview package to manage the 3DS step, make sure to set the correct minSdkVersion in android/app/build.gradle if it was previously lower than 21:
Gradle
android {
    defaultConfig {
        minSdkVersion 21
    }
}
android {
    defaultConfig {
        minSdkVersion 21
    }
}
﻿
Installation
Shell
Text
flutter pub get moyasar
flutter pub get moyasar
﻿
Usage
JS
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'),
  );

  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,
        )
      ],
    );
  }
}
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'),
  );

  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,
        )
      ],
    );
  }
}
﻿
Migration Guides
From 1.0 to 2.0
This upgrade changes how Apple Pay is configured. Do the following changes to complete the upgrade:
Delete the default_payment_profile_apple_pay.json file under your assets file.
Update the paymentConfig instance to include the new applePay configuration.
Dart
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')
);
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')
);
﻿
﻿
Updated 01 Sep 2024
Did this page help you?
Android SDK
Hosted Checkout