[Market] BNPL Integration guide - Basic

This section explains the simplest approach to embed BNPL options to your (Market) platform without data sharing functionality.

Let's integrate BNPL within 30 mins!

TIP

This page does not use the data sharing feature of serviceX.

If you want to use the data sharing function, then you may want to have a look at this guide.

Here is the Skeleton repository: https://github.com/credify-pte-ltd/bnpl-skeleton-nodejs for your reference.

Sample UI:

TIP

This is a sandbox environment for you to play around with our BNPL systems. If you need the production environment, please let us know (email: info@credify.one).

0. Preparation

If you have not set up a Market yet, please refer to Getting started - Set up.

Please make sure that you allow BNPL providers to access your scope schemas. In the sandbox environment, you can test BNPL with BNPL provider under Others section as the following screenshot.

Also, please ensure you create API keys. To use BNPL, you need to grant claim_provider to the API keys.

1. Set up the backend project

What you have to do regarding the backend integration is

• Create BNPL order
• Handle updates of order status notified via webhook
• Return BNPL successful page URL

• Node.js
• Others

Please fork this repository, clone it to your machine, and check v1.js. The sample code is all implemented.

First, you need to generate a JWT token with your API key.

API docs - client authentication

For the further API calls, you will need to use this JWT token you have just generated.

Secondly, you will create Order ID by calling Order creation API. This Order ID should be saved in your system for your reference. That being said, you may pass an internal order ID in your system to this API, so you can look up corresponding order information if you visit our Dashboard.

You can receive the order status update via webhook. Here is the details of Credify's webhook.

Thirdly, you will need to expose an endpoint https://you api domain/xxxxx/push-claims (POST). If you do not share any of your user data, you won't have to do any process. You will just need to return 200 status.

Lastly, you have to set up an API endpoint to redirect users back to your platform from the BNPL provider's context. In this page, you have to tell the payment is successful/failed. The endpoint should be https://your api domain/xxxxx/bnpl/orders/:orderId/redirect. If it's failed, an API request will have a query param error_message.

2. Integrate frontend SDK into your platform

Integration models - Frontend integration has URLs to our SDKs.

Before going through this section, please make sure you have approved an offer about BNPL.

Besides, please update the organization information. All you have to update is api base URL.

1. Install SDK

• Swift
• Kotlin
• React.js

If you use Swift Package Manager, please input https://github.com/credify-pte-ltd/credify-ios-sdk.

Once you successfully install the SDK, you have to instantiate a Credify object.

import UIKit
import Credify

let API_KEY = "bkhoiuoitcrtxttfhsokyyfcsrtnnlqigyuimzpifdvzrxgbikmgfspasxagbtzt"
let APP_NAME = "BNPL demo market"
let APP_ID = "a0f9a736-ad97-d09b-abf7-d23ebca20bde"

class SampleViewContoller: UIViewController {
    private let bnpl = serviceX.BNPL()
    private let passport = serviceX.Passport()
    
    private var user: CredifyUserModel!
    private var canUseBNPL: Bool = false
     
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let config = serviceXConfig(apiKey: API_KEY, env: .sandbox, appName: APP_NAME)
        serviceX.configure(config)
        
    }
}

The SDK supports API level 23 and above (distribution stats).

Update the build.gradle(app level). You can check the SDK versions via Maven.

dependencies {
    implementation 'one.credify.sdk:android-sdk:[last_version]'
}

Sync project with Gradle file.

Note: If you get the below error when you build your project.

Then you need to add this line tools:replace="android:supportsRtl" into the application element in the AndroidManifest.xml.

Once you have successfully installed the SDK, you have to instantiate a CredifySDK object.

If you haven't created a class that extends from Application class you will create a new one and add below code to onCreate method.

package one.credify.marketsample.bnplandroid

import android.app.Application
import one.credify.sdk.CredifySDK
import one.credify.sdk.core.model.Environment

class DemoApplication : Application() {
    override fun onCreate() {
        super.onCreate()

        CredifySDK.Builder()
            .withApiKey(API_KEY)
            .withContext(this)
            .withEnvironment(Environment.SANDBOX)
            .withMarketId(APP_ID)
            .build()
    }

    companion object {
        private val API_KEY = "bkhoiuoitcrtxttfhsokyyfcsrtnnlqigyuimzpifdvzrxgbikmgfspasxagbtzt"
        private val APP_NAME = "BNPL demo market"
        private val APP_ID = "a0f9a736-ad97-d09b-abf7-d23ebca20bde"
    }
}

AND update your AndroidManifest.xml file.

<application
    android:name=".DemoApplication"
    >
    ...
</application>

After creating the CredifySDK instance, you can access the singleton like following:

val credifySDK = CredifySDK.instance

Here is the package link.

# npm
$ npm install credify-web-sdk
# yarn
$ yarn add credify-web-sdk 

Once you install the package, you can configure the project.

///
import { Environment, initialize } from "credify-web-sdk";

initialize(Environment.SANDBOX, API_KEY)

function SamplePage() {
  
  const API_KEY = "bkhoiuoitcrtxttfhsokyyfcsrtnnlqigyuimzpifdvzrxgbikmgfspasxagbtzt";
  const APP_NAME = "BNPL demo market"
  const APP_ID = "a0f9a736-ad97-d09b-abf7-d23ebca20bde"
  
  ///
  
}

2. Set a user object

• Swift
• Kotlin

Some of our functions need to receive a user object (CredifyUserModel). To interact with our BNPL functionalities, we need your users to be logged in. Your internal user class needs to be mapped to CredifyUserModel.

Some of our functions need to receive a user object (UserProfile). To interact with our BNPL functionalities, we need your users to be logged in. Your internal user class needs to be mapped to UserProfile.

3. Check BNPL availability

• Swift
• Kotlin
• React.js

Once you map your user to CredifyUserModel, you can call bnpl.getBNPLAvailability to see if this user can use BNPL options.

Please make sure that you update API base URL on Dashboard.

If you always get isAvailable: false, please let us know. We need to whitelist your organization in our system.

class SampleViewContoller: UIViewController {
    
    ///
    
    func getBNPLAvailability() {
        bnpl.getBNPLAvailability(user: self.user) { result in
            switch result {
            case .success((let isAvailable, let credifyId)):
                self.user.credifyId = credifyId
            
                if isAvailable {
                    self.canUseBNPL = true
                } else {
                    self.canUseBNPL = false
                }
            
            case .failure(let error):
                print(error)
            }
        }
    }
}

Once you map your user to UserProfile, you can call CredifySDK.instance.bnplApi.getBNPLAvailability to see if this user can use BNPL options.

Please make sure that you update API base URL on Dashboard.

If you always get isAvailable: false, please let us know. We need to whitelist your organization in our system.

package one.credify.marketsample.bnplandroid

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import io.reactivex.android.schedulers.AndroidSchedulers
import io.reactivex.schedulers.Schedulers
import one.credify.sdk.CredifySDK
import one.credify.sdk.core.model.UserProfile

class MainActivity : AppCompatActivity() {
    private var mUser: UserProfile // you need to initialize the UserProfile object

    private fun getBNPLAvailability() {
        CredifySDK.instance.bnplApi.getBNPLAvailability(userProfile = mUser)
            .observeOn(AndroidSchedulers.mainThread())
            .subscribeOn(Schedulers.io())
            .subscribe(
                { bnplInfo ->
                    val isAvailable = bnplInfo.isAvailable
                },
                {
                    // Errors
                }
            )
    }
}

Once you map your user to UserProfile, you can call getBNPLInfo to see if this user can use BNPL options.

Please make sure that you update API base URL on Dashboard.

If you always get isAvailable: false, please let us know. We need to whitelist your organization in our system.

import {
  BNPLInfo,
  Environment,
  getBNPLInfo,
  initialize,
  UserProfile
} from "credify-web-sdk";

interface Props {
  user: UserProfile;
}

initialize(Environment.SANDBOX, API_KEY)

function SamplePage(props: Props) {

  const [loading, setLoading] = useState(false);
  const [bnplInfo, setBnplInfo] = useState<BNPLInfo | null>(null)

  useEffect(() => {
    getBNPLInformation().then(() => {})
  }, [])

  const getBNPLInformation = async () => {
    setLoading(true)
    const u = props.user;
    const options = {
      phoneNumber: u.phoneNumber,
      countryCode: u.countryCode,
      credifyId: u.credifyId,
      productTypes: [],
    }
    const info = await getBNPLInfo(u.id, options)
    setLoading(false)
    setBnplInfo(info)
  }
}

4. Create Order ID

If a user uses BNPL options, you will have to create Order ID. In Set up the backend project, you have created POST /orders endpoint. You may want to call this endpoint via your internal backend systems. In this instruction, the frontend app calls into the Skeleton service directly for convenience.

• Swift
• Kotlin
• React.js

In this example, the project has installed 2 new packages as following, but these are not required in the actual integration. It depends on your existing project.

• Alamofire for API call
• NVActivityIndicatorView for loading view

import UIKIt
import Credify
import Alamofire
import NVActivityIndicatorView

///

let CREATE_ORDER_API_URL = "http://localhost:8000/v1/orders"
let ORDER_DATA: [String: Any] = [
    "reference_id": "testtest",
    "total_amount": [
        "value": "9000000",
        "currency": "VND"
    ],
    "order_lines": [
        [
            "name": "AirPods Pro",
            "reference_id": "airpods_pro",
            "image_url": "https://www.apple.com/v/airpods/shared/compare/a/images/compare/compare_airpods_pro__e9uzt0mzviem_large_2x.png",
            "product_url": "https://www.apple.com/vn/airpods-pro/",
            "quantity": 1,
            "measment_unit": "EACH", 
            "unit_price": [
                "value": "4000000",
                "currency": "VND"
            ],
            "subtotal": [
                "value": "4000000",
                "currency": "VND"
            ]
        ],
        [
            "name": "Apple Watch 3",
            "reference_id": "apple_watch_series_three",
            "image_url": "https://www.apple.com/v/apple-watch-series-3/v/images/overview/hero__e4ykmvto2gsy_large_2x.jpg",
            "product_url": "https://www.apple.com/vn/apple-watch-series-3/",
            "quantity": 2,
            "measment_unit": "EACH", 
            "unit_price": [
                "value": "2500000",
                "currency": "VND"
            ],
            "subtotal": [
                "value": "5000000",
                "currency": "VND"
            ]
        ]
    ]
]

class SampleViewContoller: UIViewController {
    
    private lazy var activityIndicatorView = {
        return NVActivityIndicatorView(frame: CGRect(origin: CGPoint(x: UIScreen.main.bounds.size.width * 0.5 - 40, y: UIScreen.main.bounds.size.height * 0.5 - 40), size: CGSize(width: 80, height: 80)), type: .ballRotateChase, color: .red)
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(activityIndicatorView)
        
        ///
    }
    
    ///
    
    func createOrder(completion: @escaping (OrderInfo) -> Void) {
        // Start loading view if necessary
        activityIndicatorView.startAnimating()

        AF.request(CREATE_ORDER_API_URL,
                   method: .post,
                   parameters: ORDER_DATA,
                   encoding: JSONEncoding.default)
            .responseJSON { (data) in
                DispatchQueue.main.async {
                    self.activityIndicatorView.stopAnimating()
                }
                switch data.result {
                case .success(let value):
                    guard let v = value as? [String: Any] else { return }
                
                    guard let id = v["id"] as? String else { return }
                    guard let amountObj = v["totalAmount"] as? [String: Any] else { return }
                    guard let amount = amountObj["value"] as? String else { return }
                
                    let orderInfo = OrderInfo(orderId: id, orderAmount: FiatCurrency(value: amount, currency: .vnd))
                    completion(orderInfo)
                case .failure(let err):
                    print(err)
                }
            }
    }
}

In this example, the project is using Volley for API call, but these are not required in the actual integration. It depends on your existing project.

package one.credify.marketsample.bnplandroid

import android.app.Dialog
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import com.android.volley.toolbox.StringRequest
import com.android.volley.toolbox.Volley
import com.google.gson.Gson
import com.google.gson.JsonObject
import one.credify.marketsample.bnplandroid.model.Order
import one.credify.marketsample.bnplandroid.model.OrderLine
import one.credify.marketsample.bnplandroid.model.PaymentRecipient
import one.credify.marketsample.bnplandroid.model.TotalAmount
import one.credify.sdk.core.model.*

class MainActivity : AppCompatActivity() {
    private var mDialog: Dialog? = null

    private var mUser: UserProfile = UserProfile(
        id = "113", // Your user's id
        name = null,
        phone = UserPhoneNumber( // Your user's phone number
            countryCode = "+84",
            phoneNumber = "987654321"
        ),
        email = null,
        dob = null,
        address = null,
        credifyId = null
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        createDialog()

        createOrder { orderInfo ->
            Log.i("MainActivity", "Order id: ${orderInfo?.orderId}")
        }
    }

    private fun createDialog() {
        mDialog = Dialog(this).apply {
            setContentView(R.layout.dialog_progressing)
            setCancelable(false)
            window?.setBackgroundDrawableResource(android.R.color.transparent)
        }
    }

    private fun showLoading() {
        mDialog?.show()
    }

    private fun hideLoading() {
        if (mDialog?.isShowing == true) {
            mDialog?.dismiss()
        }
    }

    private fun createOrderObject(): Order {
        val paymentRecipient = PaymentRecipient(
            name = "bank_name",
            number = "454545454545",
            branch = "bank_branch",
            bank = "bank_bank"
        )

        val orderLines = listOf(
            OrderLine(
                name = "Diane 35 - Bayer (H/21v)",
                referenceId = "reference_id_1",
                imageUrl = "https://apharma.vn/wp-content/uploads/Diane-35.png",
                productUrl = "https://apharma.vn/wp-content/uploads/Diane-35.png",
                quantity = 40,
                unitPrice = TotalAmount(value = "115000", currency = CurrencyType.VND),
                subtotal = TotalAmount(value = "${115000 * 40}", currency = CurrencyType.VND),
                measurementUnit = "EA"
            ),
            OrderLine(
                name = "Marvelon Bayer (H/21v)",
                referenceId = "reference_id_2",
                imageUrl = "https://images.fpt.shop/unsafe/fit-in/600x600/filters:quality(90):fill(white)/nhathuoclongchau.com/images/product/2021/05/00004687-marvelon-h3-vi-7225-60ad_large.jpg",
                productUrl = "https://images.fpt.shop/unsafe/fit-in/600x600/filters:quality(90):fill(white)/nhathuoclongchau.com/images/product/2021/05/00004687-marvelon-h3-vi-7225-60ad_large.jpg",
                quantity = 60,
                unitPrice = TotalAmount(value = "63100", currency = CurrencyType.VND),
                subtotal = TotalAmount(value = "${63100 * 60}", currency = CurrencyType.VND),
                measurementUnit = "EA"
            ),
        )

        val totalAmount = TotalAmount(
            value = orderLines.sumBy { it.subtotal.value.toInt() }.toString(),
            currency = CurrencyType.VND
        )

        return Order(
            referenceId = "reference_id_${System.currentTimeMillis()}",
            totalAmount = totalAmount,
            orderLines = orderLines,
            paymentRecipient = paymentRecipient,
            userId = mUser.id
        )
    }

    private fun createOrder(onResult: (orderInfo: OrderInfo?) -> Unit) {
        showLoading()

        val order = createOrderObject()
        val queue = Volley.newRequestQueue(this)

        val stringRequest = object : StringRequest(
            Method.POST,
            CREATE_ORDER_URL,
            { str ->
                val jsonObject = Gson().fromJson(str, JsonObject::class.java)
                onResult(
                    OrderInfo(
                        orderId = jsonObject.get("id").asString,
                        orderAmount = FiatCurrency(
                            value = order.totalAmount.value,
                            currency = order.totalAmount.currency
                        )
                    )
                )
                hideLoading()
            },
            { error ->
                // error
                onResult(null)
                hideLoading()
            }
        ) {
            override fun getBody(): ByteArray {
                val body = Gson().toJson(order)
                return body.toByteArray(Charsets.UTF_8)
            }

            override fun getBodyContentType(): String {
                return "application/json"
            }
        }

        // Add the request to the RequestQueue.
        queue.add(stringRequest)
    }

    companion object {
        private const val CREATE_ORDER_URL = "http://localhost:8000/v1/create-order"
    }
}

This is the sample order information.

export const ORDER_DATA = {
  "reference_id": "testtest",
  "total_amount": {
    "value": "9000000",
    "currency": "VND"
  },
  "order_lines": [
    {
      "name": "AirPods Pro",
      "reference_id": "airpods_pro",
      "image_url": "https://www.apple.com/v/airpods/shared/compare/a/images/compare/compare_airpods_pro__e9uzt0mzviem_large_2x.png",
      "product_url": "https://www.apple.com/vn/airpods-pro/",
      "quantity": 1,
      "measurement_unit": "EA",
      "unit_price": {
        "value": "4000000",
        "currency": "VND"
      },
      "subtotal": {
        "value": "4000000",
        "currency": "VND"
      }
    },
    {
      "name": "Apple Watch 3",
      "reference_id": "apple_watch_series_three",
      "image_url": "https://www.apple.com/v/apple-watch-series-3/v/images/overview/hero__e4ykmvto2gsy_large_2x.jpg",
      "product_url": "https://www.apple.com/vn/apple-watch-series-3/",
      "quantity": 2,
      "measurement_unit": "EA", 
      "unit_price": {
        "value": "2500000",
        "currency": "VND"
      },
      "subtotal": {
        "value": "5000000",
        "currency": "VND"
      }
    }
  ]
}

The actual code to create order ID is

import axios from "axios";

const CREATE_ORDER_API_URL = "https://bnpl-demo.herokuapp.com/v1/orders"

function SamplePage(props: Props) {

  ///

  const createOrder = async () => {
    const res = await axios.post(CREATE_ORDER_API_URL, ORDER_DATA)
    return res.data;
  }
}

5. Start Credify SDK

Now it's ready to kick off BNPL flow with our SDK.

• Swift
• Kotlin
• React.js

class SampleViewContoller: UIViewController {
  
    ///
    
    @IBAction func checkout(_ sender: Any) {
        createOrder { orderInfo in
            self.startBNPL(orderInfo: orderInfo)
        }
    }
   
    func startBNPL(orderInfo: OrderInfo) {
        let task: ((String, ((Bool) -> Void)?) -> Void) = { credifyId, result in
            result?(true)
        }
        
        bnpl.presentModally(
            from: self,
            userProfile: self.user,
            orderInfo: orderInfo,
            pushClaimTokensTask: task
        ) { [weak self] status, orderId, isPaymentCompleted in
            self?.dismiss(animated: false) {
                print("Status: \(status.rawValue), order id: \(orderId), payment completed: \(isPaymentCompleted)")
            }
        }
    }
}

Let's run the app and test it!

You will see this screen! Congratulations! 🎉

package one.credify.marketsample.bnplandroid

import android.content.Context
import android.os.Bundle
import android.util.Log
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity
import com.android.volley.toolbox.JsonObjectRequest
import com.android.volley.toolbox.Volley
import one.credify.sdk.CredifySDK
import one.credify.sdk.core.model.*
import org.json.JSONObject

class MainActivity : AppCompatActivity() {
    private val mTag = "MainActivity"

    private var mUser: UserProfile = UserProfile(
        id = "1463", // Your user's id
        name = null,
        phone = UserPhoneNumber( // Your user's phone number
            countryCode = "+84",
            phoneNumber = "374720660"
        ),
        email = null,
        dob = null,
        address = null,
        credifyId = null
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val btnCheckout = findViewById<Button>(R.id.btnCheckout)
        btnCheckout.setOnClickListener {
            createOrder { orderInfo ->
                Log.i(mTag, "Order id: ${orderInfo?.orderId}")

                if (orderInfo != null) {
                    startBNPL(
                        context = this,
                        user = mUser,
                        orderInfo = orderInfo,
                    )
                }
            }
        }
    }

    private fun pushClaims(
        context: Context,
        useId: String,
        credifyId: String,
        onResult: (isSuccess: Boolean) -> Unit,
    ) {
        onResult(true)
    }

    private fun startBNPL(context: Context, user: UserProfile, orderInfo: OrderInfo) {
        CredifySDK.instance.bnplApi.showBNPL(
            context = context,
            userProfile = user,
            orderInfo = orderInfo,
            pushClaimCallback = object : CredifySDK.PushClaimCallback {
                override fun onPushClaim(
                    credifyId: String,
                    resultCallback: CredifySDK.PushClaimResultCallback
                ) {
                    pushClaims(
                        context = context,
                        useId = user.id,
                        credifyId = credifyId
                    ) { isSuccess ->
                        resultCallback.onPushClaimResult(isSuccess)
                    }
                }
            },
            bnplPageCallback = object : CredifySDK.BNPLPageCallback {
                override fun onClose(
                    status: RedemptionResult,
                    orderId: String,
                    isPaymentCompleted: Boolean
                ) {
                    Log.i(
                        mTag,
                        "Status: $status, order id: $orderId, payment completed: $isPaymentCompleted"
                    )
                }
            }
        )
    }

}

Let's run the app and test it!

You will see this screen! Congratulations! 🎉

import {
  BNPLInfo,
  Environment,
  getBNPLInfo,
  initialize,
  OfferFlowPayloadBnpl,
  startOfferFlowBnpl,
  UserProfile
} from "credify-web-sdk";

interface Props {
  user: UserProfile;
}


function SamplePage(props: Props) {

  const [loading, setLoading] = useState(false);
  const [bnplInfo, setBnplInfo] = useState<BNPLInfo | null>(null)
  
  ///

  // This needs to be exactly same params.
  const pushClaimsCB = async (externalId: string, resolve: (isSuccess: boolean) => void) => {
    resolve(true)
  }

  const startBNPL = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    e.preventDefault()

    if (!bnplInfo) { return }
    setLoading(true)
    createOrder().then((res) => {
      const payload: OfferFlowPayloadBnpl = {
        offers: bnplInfo.offers,
        profile: props.user,
        orderId: res.id,
        orderAmount: {
          value: ORDER_DATA.total_amount.value,
          currency: ORDER_DATA.total_amount.currency,
        },
        completeBnplProviders: bnplInfo.providers,
        marketId: APP_ID
      }

      setLoading(false)

      // If you pass `true`, you will use the same tab. 
      // If you pass `false`, you will use another small window for the BNPL flow.
      startOfferFlowBnpl(true, payload, pushClaimsCB);
    }).catch((err) => {
      setLoading(false)
      console.log(err);
    })
  }
}

Let's run the app and test it!

You will see this screen! Congratulations! 🎉

3. Handle status management and repayment

So far we see the flow of BNPL requests. Now that your users can authorize BNPL transactions. What's next to you is

• handle payment status
• request disbursement
• instruct users to repay

1. Handle payment status

You will receive status update via webhook. When order status becomes approved, you can proceed with the next step, such as delivery of products.

2. Request disbursement

You can see BNPL transaction list on Dashboard.

Once a transaction on your platform is done, you need to upload some documents to request disbursement. If you click on a Approved order, you can see the following popup where you can upload documents.

Once uploading documents is done and BNPL provider confirms it's OK, our system will automatically request disbursement.

For some reason if your user wants to cancel a BNPL transaction (Approved order), you can request cancellation on the same popup.

3. Instruct users to repay

We do not force users to install another app for BNPL. The users who enjoy BNPL can do everything inside your (Market) platform. We provide a function in SDK for your users to check necessary information.

• Swift
• Kotlin
• React.js

The following function opens BNPL related UI for your users to manage BNPL usage.

class SampleViewContoller: UIViewController {

    ///
    
    func showBNPLDetail() {
        passport.showDetail(
            from: self,
            user: user,
            marketId: APP_ID,
            productTypes: [.consumerBNPL]
        ) {
            print("page dismissed")
        }
    }
}

The following function opens BNPL related UI for your users to manage BNPL usage.

package one.credify.marketsample.bnplandroid

import android.content.Context
import android.os.Bundle
import android.util.Log
import androidx.appcompat.app.AppCompatActivity
import one.credify.sdk.CredifySDK
import one.credify.sdk.core.model.ProductType
import one.credify.sdk.core.model.UserProfile

class MainActivity : AppCompatActivity() {
    private val mTag = "MainActivity"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    private fun showBNPLDetail(context: Context, user: UserProfile) {
        CredifySDK.instance.passportApi.showServiceInstance(
            context = context,
            userProfile = user,
            productTypeList = listOf(ProductType.BNPL_CONSUMER),
            callback = object : CredifySDK.PageCallback {
                override fun onClose() {
                    Log.i(mTag, "Page showed")
                }

                override fun onShow() {
                    Log.i(mTag, "Page closed")
                }
            }
        )
    }
}

import {PRODUCT_TYPE, startServiceInstanceFlow, UserProfile} from "credify-web-sdk";

const APP_NAME = "Demo Store"

interface Props {
  user: UserProfile;
}

function MyPage(props: Props) {
  const openBNPLDetail = () => {
    startServiceInstanceFlow(APP_NAME, props.user, [
      PRODUCT_TYPE.CONSUMER_FINANCING__UNSECURED_LOAN__BNPL,
    ])
  }
  
  return (
    <>
      <button onclick={() => openBNPLDetail()}>
    </>
  )
}