Skip to main content

Custom Payment UI Implementation

info

Unified config for Moyasar API​

  final paymentConfig = PaymentConfig(
    publishableApiKey: 'YOUR_API_KEY',
    amount: 25758, // SAR 257.58
    description: 'order #1324',
    metadata: {'size': '250g'},
    creditCard: CreditCardConfig(saveCard: true, manual: false),
    applePay: ApplePayConfig(
        merchantId: 'YOUR_MERCHANT_ID',
        label: 'YOUR_STORE_NAME',
        manual: false),
  );

1. Custom applePay UI​

  • Callback once the user clicks on the custom Apple Pay widget
  void onSubmitApplePay(applePay) async {
    final source = ApplePayPaymentRequestSource(
        applePay['token'], (paymentConfig.applePay as ApplePayConfig).manual);
    final paymentRequest = PaymentRequest(paymentConfig, source);

    final result = await Moyasar.pay(
        apiKey: paymentConfig.publishableApiKey,
        paymentRequest: paymentRequest);

    onPaymentResult(result);
  }

2. Custom Credit Card UI​

  • Callback once the user fills & submit their CC information using the custom form widget
  void onSubmitCcForm() async {
    final source = CardPaymentRequestSource(
        creditCardData: CardFormModel(
            name: 'John Doe',
            number: '4111111111111111',
            month: '05',
            year: '2025'),
        tokenizeCard: (paymentConfig.creditCard as CreditCardConfig).saveCard,
        manualPayment: (paymentConfig.creditCard as CreditCardConfig).manual);

    final paymentRequest = PaymentRequest(paymentConfig, source);

    final result = await Moyasar.pay(
        apiKey: paymentConfig.publishableApiKey,
        paymentRequest: paymentRequest);

    onPaymentResult(result);
  }

2. Custom STC UI​

  // STC Pay Implementation
  String? transactionUrl; // Store this as a class variable
  final phoneController = TextEditingController();
  final otpController = TextEditingController();

  // Callback when user submits their mobile number for STC Pay
  void onSubmitStcPay() async {
    final source = StcRequestSource(
      mobile: phoneController.text,
    );

    final paymentRequest = PaymentRequest(paymentConfig, source);

    final result = await Moyasar.pay(
      apiKey: paymentConfig.publishableApiKey,
      paymentRequest: paymentRequest,
    );

    if (result is PaymentResponse && result.status == PaymentStatus.initiated) {
      final stcResponse = result.source as StcResponseSource;
      setState(() {
        transactionUrl = stcResponse.transactionUrl;
      });
    } else {
      // Handle error
    }
  }

  // Callback when user submits OTP for STC Pay
  void onSubmitStcOtp() async {
    if (transactionUrl == null) return;

    final otpRequest = OtpRequestSource(
      otpValue: otpController.text,
    );

    final result = await Moyasar.verifyOTP(
      transactionURL: transactionUrl!,
      otpRequest: otpRequest,
    );

    onPaymentResult(result);
  }

Handling onPaymentResult​

  • Unified payment result processor
  void onPaymentResult(result) {
    if (result is PaymentResponse) {
      switch (result.status) {
        case PaymentStatus.initiated:
          // handle 3DS redirection.
          break;
        case PaymentStatus.paid:
          // handle success.
          break;
        case PaymentStatus.failed:
          // handle failure.
          break;
      }
    }
  }