Use with Android Compose

important

To use SDK in compose project you need to follow the same steps in Installation section, then proceed with the following steps.

The SDK currently provides two types of payment We can use any of them by first preparing Moyasar's PaymentRequest object as follows:

val paymentRequest = PaymentRequest(
      apiKey = "pk_test_vcFUHJDBwiyRu4Bd3hFuPpTnRPY4gp2ssYdNJMY3",
        amount = 1000, // Amount in the smallest currency unit For example: 10 SAR = 10 * 100 Halalas
        currency = "SAR",
        description = "Sample Android SDK Payment",
        manual = false,
        metadata = mapOf(
            "order_id" to "order_123"
        ),
        saveCard = false,
        buttonType = MoyasarButtonType.PAY, // [determine button title: Optional]; by default, it's set to `MoyasarButtonType.PAY`.
        allowedNetworks = listOf(
        CreditCardNetwork.Visa,
        CreditCardNetwork.Mastercard,
        CreditCardNetwork.Mada
    ) // [set your supported networks: Optional]
)

Credit Card Payments

Then, we initialize and display Moyasar's PaymentFragment as follows:

class PayWithMoyasarActivity : AppCompatActivity() {

    companion object {
    fun startPaymentWithMoyasar(
      context: Context,
      getResult: ActivityResultLauncher<Intent>,
    ) {
      val intent = Intent(context, PayWithMoyasarActivity::class.java)
      getResult.launch(intent)
    }

  }

    override fun onCreate(savedInstanceState: Bundle?) {
        // Other setup code

        val paymentFragment = PaymentFragment.newInstance(this.application, paymentConfig) { this.handlePaymentResult(it) }

        this.supportFragmentManager.beginTransaction().apply {
            // Id for the payment container view
            replace(R.id.paymentSheetFragment, paymentFragment)
            commit()
        }
    }

    fun handlePaymentResult(result: PaymentResult) {
        // ...
    }

    fun handleCompletedPayment(payment: Payment) {
        // ..
    }
}

info

An error will be thrown if the API key format is incorrect.

info

You must create a new activity that contains the Moysar UI logic and ensure it extends from AppCompatActivity. Then, navigate to this from any composable function

And your composable function will be like this

@Composable
fun Pay(payData: Any, modifier: Modifier = Modifier) {
  val context = LocalContext.current
  val startForResult =
    rememberLauncherForActivityResult(ActivityResultContracts.StartActivityForResult()) { result: ActivityResult ->
      if (result.resultCode == Activity.RESULT_OK) {
        val data = result.data
       // ... here you can get the payment result
      }
    }
      PayWithMoyasarActivity.startPaymentWithMoyasar(context, startForResult)
}

The payment fragment appears as follows::

Android SDK Dark Arabic	Android SDK Light English

2 - STC Pay Payments integration

Then, we initialize and display Moyasar's EnterMobileNumberFragment:

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // Other setup code

        val enterMobileNumberFragment = EnterMobileNumberFragment.newInstance(this.application, paymentRequest) { this.handlePaymentResult(it) }

        this.supportFragmentManager.beginTransaction().apply {
            //ID for the payment container view
            replace(R.id.paymentSheetFragment, enterMobileNumberFragment)
            commit()
        }
    }

    fun handlePaymentResult(result: PaymentResult) {
        // ...
    }

    fun handleCompletedPayment(payment: Payment) {
        // ..
    }
}

info

An error will be thrown if the API key format is incorrect.

Handling Payment Result for (Credit Card or STC Pay)

Now, we can handle the Credit Card payment result as follows:

 fun handlePaymentResult(result: PaymentResult) {
    when (result) {
        is PaymentResult.Completed -> {
            handleCompletedPayment(result.payment);
        }
        is PaymentResult.Failed -> {
            // Handle error
            val error = result.error;
        }
        PaymentResult.Canceled -> {
            // User has canceled the payment
        }

        else -> { /* Handle other statuses */ }
    }
}

fun handleCompletedPayment(payment: Payment) {
     when (payment.status) {
        "paid" -> { /* Handle successful payment */ }
        "failed" -> {
            val errorMessage = payment.source["message"]
            /* Handle failed payment */
        }
        else -> { /* Handle other statuses */ }
    }
}

warning

• A Completed payment does not guarantee success; it indicates that the payment process has been finalized successfully.
• You need to check the payment status to ensure the payment is successful.

info

Payment Status Reference

warning

Ensure that the payment view is removed after obtaining the result.

Java interoperability

The SDK is developed in Kotlin and supports interoperability with Java.

Demo Example

You can explore the SDK driver demo in the moyasar-android-sdk repository.