HyperPay Flutter Plugin

This plugin is a wrapper around HyperPay iOS and Android SDK, it's still in alpha release, and supports limited set of functionality and brands.

Note: this plugin is unofficial.

Support Checklist

✔️ Brands: VISA, MasterCard, MADA
✔️ Get a checkout ID
✔️ Get payment status
✔️ Perform sync/async payment
✔️ Custom UI
✖️ Ready UI

Getting Started

iOS Setup

Add your Bundle Identifier as a URL Type.
Open ios folder using Xcode, make sure you select Runner traget, then go to Info tab, and there add a new URL type, then paste your Bundle Identifier and append .payments to it.
Open Podfile, and paste the following inside of it:

target 'Runner' do
  use_frameworks!
  use_modular_headers!

  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))

  $static_framework = ['hyperpay']

  pre_install do |installer|
    Pod::Installer::Xcode::TargetValidator.send(:define_method, :verify_no_static_framework_transitive_dependencies) {}
    installer.pod_targets.each do |pod|
        if $static_framework.include?(pod.name)
          def pod.build_type;
            Pod::BuildType.static_library
          end
        end
      end
  end
end

Android Setup

Download the oppwa.mobile android SDK.
Assuming you are using VS Code, right click on the android folder and click Open in Android Studio.
Switch to project view.
Right click on your main app directory, then click New > Directory, name it oppwa.mobile.
Drag and drop the aar file you just downloaded into the directory.
Copy this build.gradle file content and make a new file inside the same directory with same content.
Open android/app/build.gradle and add the following lines:

implementation project(":oppwa.mobile")

Open app/build.gradle and make sure that the minSdkVersion is 21
Open settings.gradle, and make sure you have this line to the top:

include ':oppwa.mobile'

Click on Build > Make Project.
Open your AndroidManifest.xml, and make sure it looks like the example app.
IMPORTANT: the scheme you choose should match exactly your application ID but without any underscores, and then append .payments to it.
For example: com.nyartech.hyperpay_example becomes com.nyartech.hyperpayexample.payments

🐛 A fix for an Android issue

You might hit the following error if you tried to compile on Android:

AAPT: error: style attribute 'attr/hintTextAppearance (aka com.example.app:attr/hintTextAppearance)' not found.

To fix it, add the following dependnecies to app/buid.gradle:

dependencies {
    implementation "androidx.appcompat:appcompat:1.4.1"
    implementation "com.google.android.material:material:1.5.0"
}

Setup Required Endpoints

It's important to setup your own server with 2 endpoints:

Get Checkout ID
Get payment status

Find full details on set up your server page.

After that, setup 2 Uri objects with your endpoints specifications, refer to example/lib/constants for an example.

String _host = 'YOUR_HOST';

Uri checkoutEndpoint = Uri(
  scheme: 'https',
  host: _host,
  path: '',
);

Uri statusEndpoint = Uri(
  scheme: 'https',
  host: _host,
  path: '',
);

Setup HyperPay App Configuration

The first time you launch your app, setup the plugin with your configurations, it's highly recommended to use flavors to switch between modes.

Implement HyperpayConfig class and put your merchant entity IDs as provided to you by HyperPay.

class TestConfig implements HyperpayConfig {
  String? creditcardEntityID = '';
  String? madaEntityID = '';
  Uri checkoutEndpoint = _checkoutEndpoint;
  Uri statusEndpoint = _statusEndpoint;
  PaymentMode paymentMode = PaymentMode.test;
}

Then you might consider using Dart environment variables to switch between Test and Live modes.

const bool isDev = bool.fromEnvironment('DEV');

void setup() async {
  await HyperpayPlugin.instance.setup(
    config: isDev? TestConfig() : LiveConfig(),
  );
}

Usage

Refer to example directory for a full app usage example. As this is still an alpha release, consider testing your implementation first in the example app before starting in your own app.