To display the PayByBankApp as a Payment Method for iOS:

1. In the info.plist of app and LSApplicationQueriesSchemes:

<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>judo</string>
			</array>
		</dict>
	</array>
	<key>LSApplicationQueriesSchemes</key>
	<array>
		<string>zapp</string>
	</array>

2. Add deeplink to the pbbaConfiguration object:

  self.pbbaConfig = [JPPBBAConfiguration new];
    self.pbbaConfig.deeplinkScheme = @"judo://pay";

3. To enable the PayByBankApp set the following options:

To integrate with the Judopay SDK directly to your iOS app, you can use either a:

let authorization: JPAuthorization = JPBasicAuthorization(token: JUDO_TOKEN,
    andSecret: JUDO_SECRET)
        judoKit = JudoKit(authorization: authorization)
        judoKit.isSandboxed = true

To ensure a good customer experience, it is recommended to only display the PayByBankApp button when the consumer has a compatible mobile Banking app.

Before adding the PayByBankApp button in Step 3, check if any compatible PayByBankApp Bank apps are installed, using the JudoKit isBankingAppAvailable method:

if (JudoKit.isBankingAppAvailable()) {
    // Add the PBBA button
}

Figure 1. PayByBankApp Button:

The PayByBankApp Button uses the delegate property. The delegate property points to any class that implements the JPPBBAButtonDelegate interface:

let pbbaButton = JPPBBAButton(frame: container.bounds);
    pbbaButton.delegate = self
        view.addSubview(pbbaButton)

The JPPBBAButtonDelegate interface has only one method: pbbaButtonDidPress(sender:), which is responsible for handling the button tap action.

Recommended PayByBankApp Button Size:

The delegate method is responsible for the button tap action.

To add the delegate method you must call the invokePBBA method in the Judopay SDK and provide the required configuration parameters:

func pbbaButtonDidPress(_ sender: JPPBBAButton) {

    // 1
    let amount = JPAmount(AMOUNT_VALUE, currency: "GBP")
    let reference = JPReference(consumerReference: CONSUMER_REF)

    configuration = JPConfiguration(judoID: JUDO_ID, amount: amount, reference: reference)

    // 2
    let pbbaConfiguration = JPPBBAConfiguration()
    pbbaConfiguration.mobileNumber = YOUR_MOBILE_NUMBER
    pbbaConfiguration.emailAddress = YOUR_EMAIL_ADDRESS
    pbbaConfiguration.appearsOnStatement = YOUR_APPEARS_ON_STATEMENT
    pbbaConfiguration.deeplinkScheme = YOUR_DEEPLINK_SCHEME

    configuration.pbbaConfiguration = pbbaConfiguration

    // 3
    judoKit.invokePBBA(with: configuration) { [weak self] (response, error) in
        if let response = response {
            // Handle response
        }

        if let error = error {
            // Handle error
        }
    }
}

The deeplinkScheme

A deeplinkScheme identifies your app during the redirect process. When a consumer has completed their transaction using their Bank app, the Bank app will attempt to redirected the consumer back to your app.

The deeplinkURL

The deeplink URL enables the app to open the consumer's mobile Banking app, so they can complete the transaction.

When the Bank app redirects the consumer back to your app, it also provides you with a URL that you can use to poll the transaction status.

Add the deeplinkURL to the main configuration object. This will be sent as a parameter to the transaction method.

For more details, see Step 5: Handling the deeplinkURL.

The most important information from the response is the orderId, accessed via response.orderDetails.orderId.

The orderId is used to manually check the transaction status. For more details, see Manually Checking the Transaction Status.

Following the completed transaction, the bank flow will be triggered when the invokePBBA method is called, even if the deeplinkURL parameter is not provided.

However, if the deeplinkURL parameter is provided, calling invokePBBA will trigger the transaction status polling logic.

To handle the deeplinkURL:

To capture the redirect URL:

func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {

     if let url = launchOptions?[.url] as? URL {
         UserDefaults.standard.set(url, forKey: "deeplinkURL")
     }

     ...
}

func application(
    _ app: UIApplication, open url: URL,
    options: [UIApplication.OpenURLOptionsKey : Any] = [:]
    ) -> Bool {

     UserDefaults.standard.set(url, forKey: "deeplinkURL")

     ...
}

For the purpose of this exercise, the deeplinkURL is saved in the app's UserDefaults. You can save the deeplinkURL in the Keychain or any alternative.

Once the Bank app has redirected the consumer back to your app, you can start polling the transaction status.

To start the PayByBankApp polling status:

func handleDeeplink() {
     guard let url = UserDefaults.standard.url(forKey: "deeplinkURL") else {
         return
     }

     configuration.pbbaConfiguration?.deeplinkURL = url

     judoKit.invokePBBA(with: configuration) { [weak self] (response, error) in
         if let response = response {
             // Handle response
         }

         if let error = error {
             // Handle error
         }
     }
 }

judoKit.invokePBBA(with: configuration) { [weak self] (response, error) in 
    if let response = response { 
        let orderId = response.orderDetails?.orderId 
            // Persist the orderId for later use 
} 
}

let apiService = JPApiService(authorization: authorization, isSandboxed: true)

    apiService.invokeOrderStatus(withOrderId: orderId) { (response, error) in
    // Handle response
}

To display the PayByBankApp as a Payment Method for Android:

1. Add the intent-filter to the AndroidManifest.xml file

<activity
            android:name=".MainActivity"
            android:launchMode="singleTask">
              <intent-filter>
                <action android:name="android.intent.action.VIEW" />

                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />

                <data
                    android:scheme="your"
                    android:host="scheme" />
            </intent-filter>
        </activity>

2. Create the Judo object:

3. Create the PBBAConfiguration object:

 val pbbaConfiguration = PBBAConfiguration.Builder()
        .setDeepLinkScheme("your://scheme")
        .build()
Judo.Builder(PaymentWidgetType.PAY_BY_BANK_APP)
            .setJudoId(judoId)
            .setApiToken(token)
            .setApiSecret(secret)
            .setAmount(amount)
            .setReference(reference)
            .setIsSandboxed(isSandboxed)
            .setSupportedCardNetworks(networks)
            .setPaymentMethods(paymentMethods)
            .setUiConfiguration(uiConfiguration)
            .setGooglePayConfiguration(googlePayConfiguration)
            .setPBBAConfiguration(pbbaConfiguration)
            .build()

4. Override the onNewIntent method to catch the deeplink URL

 override fun onNewIntent(intent: Intent?) {
        checkForDeepLink(intent)
        super.onNewIntent(intent)
    }
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        ...
        checkForDeepLink()
        ...
    }
    
    private fun checkForDeepLink(intent: Intent? = this.intent) {
        val uri = intent?.data
        val newIntent = Intent(this, JudoActivity::class.java)
        if (uri.contains("your://scheme")) {  
            val newPbbaConfig = pbbaConfiguration.newBuilder()
                .setDeepLinkURL(uri)
                .build()
            val judo = getJudo(PaymentWidgetType.PAY_BY_BANK_APP).newBuilder()
                .setPBBAConfiguration(newPbbaConfig)
                .build()
            newIntent.putExtra(JUDO_OPTIONS, judo)
            startActivityForResult(newIntent, JUDO_PAYMENT_WIDGET_REQUEST_CODE)
        }
    }
    
    private fun getJudo(widgetType: PaymentWidgetType): Judo {
        return Judo.Builder(widgetType)
            .setJudoId(judoId)
            .setApiToken(token)
            .setApiSecret(secret)
            .setAmount(amount)
            .setReference(reference)
            .setIsSandboxed(isSandboxed)
            .setSupportedCardNetworks(networks)
            .setPaymentMethods(paymentMethods)
            .setUiConfiguration(uiConfiguration)
            .setGooglePayConfiguration(googlePayConfiguration)
            .setPBBAConfiguration(pbbaConfiguration)
            .build()

5. To catch the first response, create a broadcastReceiver:

private val broadcastReceiver = object : BroadcastReceiver() {
    override fun onReceive(context: Context?, intent: Intent?) {
    val result = intent?.getParcelableExtra<JudoResult>(PBBA_RESULT)
        // Handle result
    }
}

6. Register the defined receiver in onCreate:

LocalBroadcastManager.getInstance(this).registerReceiver(
    orderIdReceiver,
    IntentFilter(BR_PBBA_RESULT)
)

7. Catch the result in the onActivityResult method:

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)

        if (requestCode == JUDO_PAYMENT_WIDGET_REQUEST_CODE) {
            when (resultCode) {
                PAYMENT_SUCCESS -> {
                    val result = data?.getParcelableExtra<JudoResult>(JUDO_RESULT)
                    //Process successful payment
                }
                PAYMENT_CANCELLED -> {
                    val result = data?.getParcelableExtra<JudoResult>(JUDO_RESULT)
                    //Process cancelled payment
                } 
                PAYMENT_ERROR -> {
                    val error = data?.getParcelableExtra<JudoError>(JUDO_ERROR)
                    //Process unsuccessful payment
                }    
            }
        }
    }

To implement the PayByBankApp button for Android, if you are not using the Payments Widget:

1. Insert the button in the layout file:

<com.judokit.android.ui.common.PayByBankButton
        android:id="@+id/payByBankButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

2. Add intent-filter to the AndroidManifest.xml file.

activity
            android:name=".MainActivity"
            android:launchMode="singleTask">
              <intent-filter>
                <action android:name="android.intent.action.VIEW" />

                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />

                <data
                    android:scheme="your"
                    android:host="scheme" />
            </intent-filter>
        </activity>

3. Create the Judo object

 val pbbaConfiguration = PBBAConfiguration.Builder()
        .setDeepLinkScheme("your://scheme")
        .build()
Judo.Builder(PaymentWidgetType.PAY_BY_BANK_APP)
            .setJudoId(judoId)
            .setApiToken(token)
            .setApiSecret(secret)
            .setAmount(amount)
            .setReference(reference)
            .setIsSandboxed(isSandboxed)
            .setSupportedCardNetworks(networks)
            .setPaymentMethods(paymentMethods)
            .setUiConfiguration(uiConfiguration)
            .setGooglePayConfiguration(googlePayConfiguration)
            .setPBBAConfiguration(pbbaConfiguration)
            .build()

4. Override the onNewIntent method to catch the deeplink URL

   override fun onNewIntent(intent: Intent?) {
        checkForDeepLink(intent)
        super.onNewIntent(intent)
    }
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        ...
        checkForDeepLink()
        ...
    }
    
    private fun checkForDeepLink(intent: Intent? = this.intent) {
        val uri = intent?.data
        val newIntent = Intent(this, JudoActivity::class.java)
        if (uri.contains("your://scheme")) {  
            val newPbbaConfig = pbbaConfiguration.newBuilder()
                .setDeepLinkURL(uri)
                .build()
            val judo = getJudo(PaymentWidgetType.PAY_BY_BANK_APP).newBuilder()
                .setPBBAConfiguration(newPbbaConfig)
                .build()
            newIntent.putExtra(JUDO_OPTIONS, judo)
            startActivityForResult(newIntent, JUDO_PAYMENT_WIDGET_REQUEST_CODE)
        }
    }
    
    private fun getJudo(widgetType: PaymentWidgetType): Judo {
        return Judo.Builder(widgetType)
            .setJudoId(judoId)
            .setApiToken(token)
            .setApiSecret(secret)
            .setAmount(amount)
            .setReference(reference)
            .setIsSandboxed(isSandboxed)
            .setSupportedCardNetworks(networks)
            .setPaymentMethods(paymentMethods)
            .setUiConfiguration(uiConfiguration)
            .setGooglePayConfiguration(googlePayConfiguration)
            .setPBBAConfiguration(pbbaConfiguration)
            .build()

5. To catch the first response, create a broadcastReceiver:

private val broadcastReceiver = object : BroadcastReceiver() {
    override fun onReceive(context: Context?, intent: Intent?) {
    val result = intent?.getParcelableExtra<JudoResult>(PBBA_RESULT)
        // Handle result
    }
}

6. Register the defined receiver in onCreate:

LocalBroadcastManager.getInstance(this).registerReceiver(
    orderIdReceiver,
    IntentFilter(BR_PBBA_RESULT)
)

7. Set OnClickListener to the previously defined PayByBankApp button

payByBankButton.setOnClickListener {
            val intent = Intent(this, JudoActivity::class.java)
            intent.putExtra(JUDO_OPTIONS, judo)
            startActivityForResult(intent, JUDO_PAYMENT_WIDGET_REQUEST_CODE)
        }

8. Catch the result in the onActivityResult method:

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)

        if (requestCode == JUDO_PAYMENT_WIDGET_REQUEST_CODE) {
            when (resultCode) {
                PAYMENT_SUCCESS -> {
                    val result = data?.getParcelableExtra<JudoResult>(JUDO_RESULT)
                    //Process successful payment
                }
                PAYMENT_CANCELLED -> {
                    val result = data?.getParcelableExtra<JudoResult>(JUDO_RESULT)
                    //Process cancelled payment
                } 
                PAYMENT_ERROR -> {
                    val error = data?.getParcelableExtra<JudoError>(JUDO_ERROR)
                    //Process unsuccessful payment
                }    
            }
        }
    }

To display the PayByBankApp as a Payment Method for ReactNative:

export interface JudoPBBAConfiguration {
mobileNumber?: string
emailAddress?: string
appearsOnStatement?: string
deeplinkScheme?: string
deeplinkURL?: string
}

2. With the JudoPBBAConfiguration set, pass it to the main JudoConfiguration:

const pbbaConfig: JudoPBBAConfiguration = {
mobileNumber: "myMobileNumber",
emailAddress: "myEmailAddress",
appearsOnStatement: "myStatement",
deeplinkScheme: 'my://app'
}
const config: JudoConfiguration = {
...
pbbaConfiguration: pbbaConfig
...
}

3. Call the invokePayByBankApp method

4. Handle the response:

try {
const judo = new JudoPay(token, secret)
const response = await judo.invokePayByBankApp(config)
// Handle response
} catch (exception) {
// Handle exception
}

To implement the PayByBankApp button for ReactNative, if you are not using the Payments Widget:

Instead of calling invokePayByBankApp:

import { JudoPBBAButton } from 'judo-react-native'
<TouchableOpacity onPress={this.invokePayByBankApp}>
<JudoPBBAButton style={{ flex: 1 }} />
</TouchableOpacity>