stc pay for mobile app

Last updated: July 15, 2026

Accept stc pay payments on your app with Flow for mobile, our pre-built, customizable payment user interface that you can embed directly into your mobile application. Flow enables you to accept payments using Checkout.com's global network of payment methods with a single integration.

The customer opens the checkout screen.
You perform a server-side request to create a payment session.
You use the payment session data on the client side to create and render Flow for mobile.
Flow for mobile displays the available payment methods to the customer. For stc pay, the customer enters their phone number and verifies it with a one-time password (OTP) sent via SMS.
When the customer confirms the OTP, Flow for mobile performs a payment request and handles any additional actions required.
You receive a webhook notifying you of the payment status.

Make sure you have a test account with Checkout.com.

Create a public key and a secret key from the Dashboard, with the following key scopes:

Public key – payment-sessions:pay and vault-tokenization
Secret key – payment-sessions

To receive webhooks for the payment events, configure your webhook server.

Integrate with Flow for mobile before continuing.

Ensure your account has stc pay enabled. To enable stc pay, contact your account manager or request support.

In your project-level build.gradle, add the following repositories:


1repositories {
2    mavenCentral()
3    maven { url = uri("https://jitpack.io") }
4    maven { url = uri("https://maven.fpregistry.io/releases") }
5}

In your app-level build.gradle, add the following dependency:


1dependencies {
2    implementation 'com.checkout:checkout-android-components:$latest_version'
3    implementation('com.checkout:checkout-android-components-payment-methods-redirect:$latest_version')
4}

To add payment methods to your iOS app, enable the CheckoutPaymentMethods plugin.

If you have already added the checkout-ios-components package:

In Xcode, select your project, then select the Package Dependencies tab.
Find checkout-ios-components and select the pencil icon to edit it.
Select CheckoutPaymentMethods in the product list and confirm.

If you are adding the package for the first time:

Select File > Add Package Dependencies.
Enter the checkout-ios-components repository URL.
Select both CheckoutComponents and CheckoutPaymentMethods from the product list.
Select Add Package.

When the customer is ready to pay, send a server-side request to securely create a PaymentSession object. The PaymentSession contains the information required to handle all steps of the payment flow.

Note

Do not embed your secret key in your client-side code.

Call the Create a Payment Session endpoint.

Information

Your base URL's {prefix} value is unique to your account and environment. To learn how to retrieve your base URLs for the sandbox and production environments, see API endpoints.

post

https://{prefix}.api.checkout.com/payment-sessions


1{
2  "amount": 1000,
3  "currency": "SAR",
4  "reference": "ORDER_01234",
5  "display_name": "Online shop",
6  "payment_type": "Regular",
7  "billing": {
8    "address": {
9      "country": "SA"
10    }
11  },
12  "customer": {
13    "name": "Jia Tsang",
14    "email": "jia.tsang@example.com"
15  },
16  "items": [
17    {
18      "reference": "0001",
19      "name": "Gold Necklace",
20      "quantity": 1,
21      "unit_price": 1000
22    }
23  ],
24  "success_url": "https://example.com/payments/success",
25  "failure_url": "https://example.com/payments/failure"
26}

In the request body, provide the following:

Field	Description
`currency`	The three-letter ISO 4217 currency code. Set to `SAR`. Required
`billing.address.country`	The customer's billing country. Set to `SA`. Required
`reference`	Your unique reference for the payment.


1{
2  "id": "ps_2Un6I6lRpIAiIEwQIyxWVnV9CqQ",
3  "payment_session_secret": "pss_9823241e-2cec-4c98-b23d-7b29ow4e2e34"
4}

The payment session response also determines which payment methods can be displayed to the customer. The response is determined by the customer's device and region.

Enable stc pay in Flow for mobile when creating a CheckoutComponents instance.

Pass StcPay.NAME when creating a flow or standalone component. StcPay.NAME is a pre-built PaymentMethodName("stcpay") constant exposed by the SDK:


1import com.checkout.components.paymentmethods.redirect.stcpay.StcPay
2
3// Include stc pay in a Flow component (renders all available payment methods)
4val flow = checkoutComponents.create(ComponentName.Flow)
5
6// Or create a standalone stc pay component
7val stcPayComponent = checkoutComponents.create(StcPay.NAME)

Render the component in Compose UI with Render() or in a View container with provideView():


1// Compose
2stcPayComponent.Render()
3
4// View
5stcPayComponent.provideView(containerView)

Pass the providers you want to support to the providers: parameter when you create a flow component:


1import CheckoutComponents
2import CheckoutPaymentMethods
3
4let sdk = CheckoutComponents(configuration: configuration)
5
6let flow = try sdk.create(
7  .flow(
8    options: [.card()],
9    providers: [CheckoutPaymentMethods.Provider.stcPay]
10  )
11)

Additionally, if you only want to render stc pay, you can create a standalone component:


1import CheckoutComponents
2import CheckoutPaymentMethods
3
4let sdk = CheckoutComponents(configuration: configuration)
5
6let stcPay = try sdk.create(CheckoutPaymentMethods.Provider.stcPay)

Note

stc pay uses a phone number and one-time password (OTP) verification step rather than a redirect. While the customer is on the phone-entry step, the pay button is not required. If you render your own custom pay button, check isPayButtonRequired() (Android) or isPayButtonRequired (iOS) to know when to show it. See the PaymentMethodComponent and Actionable library reference pages.

Depending on the payment outcome, Checkout.com redirects the customer to the success_url or failure_url you specified when you created the PaymentSession.

We send you a webhook notifying you of changes to the payment's status. Wait for the webhook callback before you start your order fulfillment process. For the full list of stc pay supported webhook events, see the Webhooks section.

For payments submitted with Flow, the PaymentSession ID appears in the webhook payload's data.metadata.cko_payment_session_id field.

Customize Flow for mobile

Learn how to customize Flow for mobile.

Flow for mobile library reference

See the configuration options and error handling steps for Flow for mobile.

stc pay for mobile app

How it works

Before you start

Add the SDK dependency

Create a new payment session
Server side

Note

Information

Request example

Response example

Enable stc pay in Flow for mobile

Note

Handle the payment response
Client side

Next steps

Customize Flow for mobile

Flow for mobile library reference

How it works

Before you start

Add the SDK dependency

Create a new payment session Server side

Note

Information

Request example

Response example

Enable stc pay in Flow for mobile

Note

Handle the payment response Client side

Next steps

Customize Flow for mobile

Flow for mobile library reference

Create a new payment session
Server side

Handle the payment response
Client side