Build your app

How to build

You can build and customize your app in 2 ways:

• through the App Builder
• through the API

Okra recommends using the App Builder because it requires no coding experience, and enables you to preview your Okra app, and to check any changes you make in real time. This guide gives you details about both methods.

Watch a quick summary on how to create an app via the App Builder, and see what the user flow looks like:

Dive into the App Builder and try creating a similar test app!

App Builder

You can build your apps in the App Builder through 2 flows: Quick link and Full Customization.

Both flows have the same result: you create an Okra app with unique properties like the short_URL and the integration snippet. You can use these properties to integrate the Okra app into your product or website.

The App builder enables you to edit or further customize apps that you have already created.

Quick link

Quick link has a simple build process: in only 3 steps, you can create a custom Okra app that you can directly embed into your app or website.

1. Select the products that you want to retrieve user data for. Check out Payments and Account data for more details.
2. Add your app name, and the types of accounts that you want your users to connect. Optionally, you can set up your company logo, your app's callback URL, and redirect URL.
3. Create the app.

Full customization

In this flow, you have 2 options:

• You can choose from a list of use case templates based on your business profile. This option creates a pre-configured app that you can further customize.
• You can start from scratch and define every aspect of your Okra app through a full customization.

Both options enable you to define these aspects of the Okra app:

• the products that you want to retrieve user data for,
• the account types and financial institutions that you want your users to connect,
• your company logo, button texts and success messages,
• and the callback and redirect URLs that you want to use in your app or website.

Recommended steps

While these steps are not mandatory, Okra highly recommends that you go through them in order to make the most of your implementation.

Set up webhooks

• Go to the Webhooks page in the dashboard to set up our webhook URLs. The Okra API will send webhook notifications to this URL.
• Read about how Webhooks work in the Okra API. You can set up different ebhook URLs for the apps you create, or even a shared webhook for every app.
• When you build your app via the API or initialize it through one of Okra’s SDKs, use the callback_url` parameter to definie your app-level webhook URL.

Set up a redirect URL

• When you build a web integration, you can use the redirect URL to take users back to your website from the Okra app after they have completed their payments.
• When you build your app via the API or initialize it through one of Okra’s SDKs, use the redirect_url parameter to definie this redirect URL.

Define metadata

• Metadata is only available when you initialize your app through one of Okra’s SDKs. Metadata is a great way to add an extra layer of data to your app, like custom identifiers, user IDs, payment reference, and so on.
• Check out the options for metadata in the Okra app reference.

Build through the API

When you build with the API, Okra creates your app based on the options that you provide programmatically. The API returns an app link in the response payload. You can direclty share this link with your users and enable them to go through the account connection flow in their browsers. This method can be useful if you want to speed up the onboarding process for specific users.

How to use

Send a POST request to the /links/new endpoint to generate an app link. Include the customization options that fit your use case and business needs in your request payload:

Example

curl -X POST https://api.okra.ng/v2/links/new
-H 'Content-Type: application/json' 
-H 'Authorization: Bearer <secretKey>'

{
    "name": "Your App",
    "countries": ["NG"],
    "products": ["auth","identity", "balance", "transactions"], 
    "color": "STRING", // The hex color code for your Okra app.
    "callback_url": "STRING", // The callback URL.
    "continue_cta": "STRING" // Customize the call-to-action button text.
}

{
    "status": "success",
    "message": "Link successfully created!",
    "data": {
        "status": true,
        "link": {
          "url": "https://app.okra.ng/SHORT_URL",
          // ... additional link details
        }
    }
}

Next steps

After you build your Okra app, let's embed it into your product or website.

Continue in the Embed your app guide!