From c0df3fe09b917c1da08873837c956ee51fcf61f4 Mon Sep 17 00:00:00 2001 From: Andrei Solovev Date: Thu, 16 May 2024 15:32:07 +0700 Subject: [PATCH 1/5] Update Authorizing payment section in Readme and add commented code example for 3DS UI customization in Example App --- .../Views/ProductDetailViewController.swift | 11 +++ README.md | 84 ++++++++++++++----- 2 files changed, 76 insertions(+), 19 deletions(-) diff --git a/ExampleApp/Views/ProductDetailViewController.swift b/ExampleApp/Views/ProductDetailViewController.swift index aeaf8662..e0a837c2 100644 --- a/ExampleApp/Views/ProductDetailViewController.swift +++ b/ExampleApp/Views/ProductDetailViewController.swift @@ -55,11 +55,22 @@ class ProductDetailViewController: BaseViewController { let text = textField.text, let url = URL(string: text) else { return } +// let toolbarUI = ThreeDSToolbarCustomization( +// backgroundColorHex: "FFFFFF", +// headerText: "Secure Checkout", +// buttonText: "Close", +// textFontName: "Arial-BoldMT", +// textColorHex: "000000", +// textFontSize: 20 +// ) +// +// let customUI = ThreeDSUICustomization(toolbarCustomization: toolbarUI) self.omiseSDK.presentAuthorizingPayment( from: self, authorizeURL: url, expectedReturnURLStrings: ["https://omise.co"], threeDSRequestorAppURLString: AppDeeplink.threeDSChallenge.urlString, + threeDSUICustomization: nil, delegate: self ) }) diff --git a/README.md b/README.md index db76cde6..bf411e65 100644 --- a/README.md +++ b/README.md @@ -329,42 +329,88 @@ extension ProductDetailViewController: ChoosePaymentMethodDelegate { } ``` -### Authorizing payment +## Authorizing payment -Some payment methods require customers to authorize the payment using an authorize URL. This includes [3-D Secure verification](https://docs.opn.ooo/fraud-protection#3-d-secure), [Internet Banking payment](https://docs.opn.ooo/internet-banking), and [Alipay](https://docs.opn.ooo/alipay). The Opn Payments iOS SDK provides a built-in class to authorize payments. +Some payment methods require the customer to authorize the payment using an authorization URL. This includes [3-D Secure verification](https://docs.opn.ooo/fraud-protection#3-d-secure), [Internet Banking payment](https://docs.opn.ooo/internet-banking), [Mobile Banking SCB](https://docs.opn.ooo/mobile-banking-scb), etc. Opn Payments iOS SDK provides a built-in class to handle the authorization. -On payment methods that require opening the external application (e.g., mobile banking application) to authorize the transaction, set the *return_uri* to a **deep link** or **app link** to be able to open the merchant application. Otherwise, after the cardholder authorizes the transaction on the external application, the flow redirects to the normal link in the *return_uri*, and opens it on the browser application, resulting in the payment not being completed. - -#### Using built-in authorizing payment view controller - -You can use the built-in authorizing payment view controller with the `authorizeURL` provided with the charge and expected `return URL` patterns you create. +On payment methods that require opening the external app (e.g., mobile banking app) to authorize the transaction, set the _return_uri_ to a **deep link** or **app link** to be able to open the merchant app. Otherwise, after the cardholder authorizes the transaction on the external app, the flow redirects to the normal link in the _return_uri_, and opens it on the browser app, resulting in the payment not being completed. +Some authorized URLs will be processed using the in-app browser flow, and others will be processed using the native flow from the SDK (3DS v2), and the SDK automatically handles all of this. ```swift omiseSDK.presentAuthorizingPayment( from: self, authorizeURL: url, - returnURLs: [returnURLs], + expectedReturnURLStrings: ["https://omise.co"], + threeDSRequestorAppURLString: "merchantAppScheme://3ds_auth", + threeDSUICustomization: nil delegate: self ) ``` -Then implement the delegate to receive the `Source` or `Token` object after the user has selected: +Replace the string `authorizeURL` with the authorized URL that comes with the created charge and the array of string `expectedReturnURLStrings` with the expected pattern of redirected URLs array. +Replace the string `threeDSRequestorAppURLString` with the url of your app to allow the external bank apps to navigate back to your app when required. +Optional `threeDSUICustomization` parameter is used to customize the UI of the built-in 3DS SDK during the 3DS challenge flow. +If you want to customize the title of the authorizing payment activity, you must use the theme customization and pass the `headerText` in the `toolbarCustomization` in the `DEFAULT` theme parameter: ```swift -extension ViewController: AuthorizingPaymentWebViewDelegate { - func authorizingPaymentViewController(_ viewController: AuthorizingPaymentWebViewController, didCompleteAuthorizingPaymentWithRedirectedURL redirectedURL: URL) { - // Handle the `redirected URL` here - omiseSDK.dismiss() - } - - func authorizingPaymentViewControllerDidCancel(_ viewController: AuthorizingPaymentWebViewController) { - // Handle the case that the user taps cancel. - omiseSDK.dismiss() - } +let toolbarUI = ThreeDSToolbarCustomization( + backgroundColorHex: "FFFFFF", + headerText: "Secure Checkout", + buttonText: "Close", + textFontName: "Arial-BoldMT", + textColorHex: "000000", + textFontSize: 20 +) + +let customUI = ThreeDSUICustomization(toolbarCustomization: toolbarUI) +``` + +You can check out the [ThreeDSUICustomization](./OmiseSDK/Sources/3DS/UICustomization/ThreeDSUICustomization.swift) class to see customizable UI elements in the challenge flow. + +After the end-user completes the payment authorization process, the delegate +callback will be triggered, and you will receive different responses based on how the transaction was processed +and which flow it used. Handle it in this manner: + +```swift +extension ViewController: AuthorizingPaymentDelegate { + func authorizingPaymentDidComplete(with redirectedURL: URL?) { + print("Payment is authorized with redirect url `\(String(describing: redirectedURL))`") + omiseSDK.dismiss() + } + func authorizingPaymentDidCancel() { + print("Payment is not authorized") + omiseSDK.dismiss() + } } ``` +You can check out the sample implementation in the [ProductDetailViewController](./ExampleApp/Views/ProductDetailViewController.swift) class in the example app. + +### Observing charge status in the token + +The following utility function observes the token until its charge status changes. You can use it to check the charge status after the payment authorization process is completed. + +```swift +func observeTokenChargeStatusHandler(tokenResult: Result) -> Void { + switch tokenResult { + case .success(let token): + // do something with Token id + print(token.id) + case .failure(let error): + print(error) + } +} + +let client = omiseSDK.client +client.observeChargeStatus(observeTokenChargeStatusHandler) +``` + +### Authorizing payment via an external app + +Some request methods allow the user to authorize the payment with an external app, for example Alipay. When a user needs to authorize the payment with an external app, `OmiseSDK` will automatically open an external app. However, merchant developers must handle the `AuthorizingPaymentDelegate` callback themselves. + + ## Objective-C compatibility This version of Opn Payments iOS SDK does not support Objective-C. For full Objective-C support, use [this version](https://github.com/omise/omise-ios/tree/support/v4.x.x). From 402c6c1c9926edc61c3ec40f8dde828ce3b913d3 Mon Sep 17 00:00:00 2001 From: Andrei Solovev Date: Thu, 16 May 2024 15:36:23 +0700 Subject: [PATCH 2/5] Update link in Readme for ProductDetailViewController file --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index bf411e65..b8dba48a 100644 --- a/README.md +++ b/README.md @@ -351,7 +351,7 @@ omiseSDK.presentAuthorizingPayment( Replace the string `authorizeURL` with the authorized URL that comes with the created charge and the array of string `expectedReturnURLStrings` with the expected pattern of redirected URLs array. Replace the string `threeDSRequestorAppURLString` with the url of your app to allow the external bank apps to navigate back to your app when required. Optional `threeDSUICustomization` parameter is used to customize the UI of the built-in 3DS SDK during the 3DS challenge flow. -If you want to customize the title of the authorizing payment activity, you must use the theme customization and pass the `headerText` in the `toolbarCustomization` in the `DEFAULT` theme parameter: +If you want to customize the title of the authorizing payment activity, you must use the theme customization and pass the `headerText` in the `toolbarCustomization` ```swift let toolbarUI = ThreeDSToolbarCustomization( @@ -363,7 +363,7 @@ let toolbarUI = ThreeDSToolbarCustomization( textFontSize: 20 ) -let customUI = ThreeDSUICustomization(toolbarCustomization: toolbarUI) +let threeDSUICustomization = ThreeDSUICustomization(toolbarCustomization: toolbarUI) ``` You can check out the [ThreeDSUICustomization](./OmiseSDK/Sources/3DS/UICustomization/ThreeDSUICustomization.swift) class to see customizable UI elements in the challenge flow. @@ -385,7 +385,7 @@ extension ViewController: AuthorizingPaymentDelegate { } ``` -You can check out the sample implementation in the [ProductDetailViewController](./ExampleApp/Views/ProductDetailViewController.swift) class in the example app. +You can check out the sample implementation in the [ProductDetailViewController](./ExampleApp/Views/ProductDetailViewController.swift#L68) class in the example app. ### Observing charge status in the token From 6f7d26f8273cbdda876def43e6b14351f4376d14 Mon Sep 17 00:00:00 2001 From: Andrei Solovev Date: Thu, 16 May 2024 15:41:39 +0700 Subject: [PATCH 3/5] Fix HEX color strings for 3DS UI customization --- ExampleApp/Views/ProductDetailViewController.swift | 6 +++--- README.md | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/ExampleApp/Views/ProductDetailViewController.swift b/ExampleApp/Views/ProductDetailViewController.swift index e0a837c2..41f1f431 100644 --- a/ExampleApp/Views/ProductDetailViewController.swift +++ b/ExampleApp/Views/ProductDetailViewController.swift @@ -56,15 +56,15 @@ class ProductDetailViewController: BaseViewController { let url = URL(string: text) else { return } // let toolbarUI = ThreeDSToolbarCustomization( -// backgroundColorHex: "FFFFFF", +// backgroundColorHex: "#FFFFFF", // headerText: "Secure Checkout", // buttonText: "Close", // textFontName: "Arial-BoldMT", -// textColorHex: "000000", +// textColorHex: "#000000", // textFontSize: 20 // ) // -// let customUI = ThreeDSUICustomization(toolbarCustomization: toolbarUI) +// let threeDSUICustomization = ThreeDSUICustomization(toolbarCustomization: toolbarUI) self.omiseSDK.presentAuthorizingPayment( from: self, authorizeURL: url, diff --git a/README.md b/README.md index b8dba48a..6eff0c10 100644 --- a/README.md +++ b/README.md @@ -355,11 +355,11 @@ If you want to customize the title of the authorizing payment activity, you must ```swift let toolbarUI = ThreeDSToolbarCustomization( - backgroundColorHex: "FFFFFF", + backgroundColorHex: "#FFFFFF", headerText: "Secure Checkout", buttonText: "Close", textFontName: "Arial-BoldMT", - textColorHex: "000000", + textColorHex: "#000000", textFontSize: 20 ) From 3aa7b28331dbc6415f9f75398911ec64970d7542 Mon Sep 17 00:00:00 2001 From: Andrei Solovev Date: Thu, 16 May 2024 17:07:15 +0700 Subject: [PATCH 4/5] Uncommented 3DS UI customization in Example App --- .../Views/ProductDetailViewController.swift | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/ExampleApp/Views/ProductDetailViewController.swift b/ExampleApp/Views/ProductDetailViewController.swift index 41f1f431..080298cc 100644 --- a/ExampleApp/Views/ProductDetailViewController.swift +++ b/ExampleApp/Views/ProductDetailViewController.swift @@ -55,22 +55,24 @@ class ProductDetailViewController: BaseViewController { let text = textField.text, let url = URL(string: text) else { return } -// let toolbarUI = ThreeDSToolbarCustomization( -// backgroundColorHex: "#FFFFFF", -// headerText: "Secure Checkout", -// buttonText: "Close", -// textFontName: "Arial-BoldMT", -// textColorHex: "#000000", -// textFontSize: 20 -// ) -// -// let threeDSUICustomization = ThreeDSUICustomization(toolbarCustomization: toolbarUI) + // Optional 3DS challenge screen customization + let toolbarUI = ThreeDSToolbarCustomization( + backgroundColorHex: "#FFFFFF", + headerText: "Secure Checkout", + buttonText: "Close", + textFontName: "Arial-BoldMT", + textColorHex: "#000000", + textFontSize: 20 + ) + + let threeDSUICustomization = ThreeDSUICustomization(toolbarCustomization: toolbarUI) + self.omiseSDK.presentAuthorizingPayment( from: self, authorizeURL: url, expectedReturnURLStrings: ["https://omise.co"], threeDSRequestorAppURLString: AppDeeplink.threeDSChallenge.urlString, - threeDSUICustomization: nil, + threeDSUICustomization: threeDSUICustomization, delegate: self ) }) From 8a86de472b55b22dc255ec3f2ba2f959b79da4f3 Mon Sep 17 00:00:00 2001 From: muthuswamyopn <95462571+muthuswamyopn@users.noreply.github.com> Date: Thu, 16 May 2024 15:49:47 +0530 Subject: [PATCH 5/5] Update README.md --- README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/README.md b/README.md index 6eff0c10..e985523e 100644 --- a/README.md +++ b/README.md @@ -368,9 +368,7 @@ let threeDSUICustomization = ThreeDSUICustomization(toolbarCustomization: toolba You can check out the [ThreeDSUICustomization](./OmiseSDK/Sources/3DS/UICustomization/ThreeDSUICustomization.swift) class to see customizable UI elements in the challenge flow. -After the end-user completes the payment authorization process, the delegate -callback will be triggered, and you will receive different responses based on how the transaction was processed -and which flow it used. Handle it in this manner: +After the end-user completes the payment authorization process, the delegate callback will be triggered, and you will receive varying responses based on how the transaction was processed and the flow it used. Handle it as follows: ```swift extension ViewController: AuthorizingPaymentDelegate {