deema Widget Integration

deema Card Snippet Integration Guide

These guidelines aim to present ways of integrating with deema widget.
The document is mainly dedicated to developers who are interested to add deema's widget into their applications.

🌟 Introduction

deema Widget is lightweight script to present information of deema's methods.
It tells some offers of deema.


πŸ” Authentication

Public Key: Used for client-side authentication

🚧

Never use secret keys in frontend code


βš’οΈ Integrate

Add the JavaScript SDK to your page

Define config and load JS script:

<script>
  var deemaWidgetConfiguration = {
     publicKey: "{YOUR_WIDGET_SECRET_KEY}",
  };
</script>

<script src="{ENVIRONMENT_URL}"></script>

<deema-widget amount="{AMOUNT}" currency="{CURRENCY_CODE}"></deema-widget>

https://sandbox-widget.deema.me
https://widget.deema.me

πŸ“˜

Make sure to use the correct base URL for Sandbox/Production environment


❌ Errors Handling

Supported Currencies Error:

If the currency provided in the <deema-widget> element is not supported, the following error will be logged to the browser console:

The provided currency: USD is invalid, supported currency is KWD

Triggered when:

  • Currency attribute contains value not in the supported currencies list.
  • Currency attribute is missing or empty.

Invalid Public Key Error:

If an invalid public key is provided in the configuration, this error will appear in the console:

Invalid public key. deema Widget will not be shown.

Triggered when:

  • Public key is missing from configuration
  • Public key format is invalid
  • Public key is rejected by deema's authentication system

πŸ’» Example

After you've installed the widget inside your app, it should appear like this:


Once you've clicked on "Learn More" button it will show the installments details:


Now you can run your application using deema's widget inside your app.

and setup the rest of the APIs to handle the purchases from your store using deema's APIs


What’s Next