From b99ece59216b7b996c7192421eff60a4f641b0b7 Mon Sep 17 00:00:00 2001 From: Renato DelPupo <16341269+renatodelpupo@users.noreply.github.com> Date: Fri, 7 Jun 2024 15:28:35 -0300 Subject: [PATCH 1/3] Correct typos and generally improve texts --- README.md | 29 +++++++++++++++-------------- src/App.tsx | 16 ++++++++-------- 2 files changed, 23 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 0c172a1..a3c1a3e 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ cd ios && pod install ### 4. Start the app! -`npm start` or `npx react-native start` if you have not installed `react-native-cli` +`npm start` or `npx react-native start` (if you don't have `react-native-cli` installed) ## How it works @@ -38,20 +38,20 @@ let establishData = { }; ``` -After that, when an Oauth bank is selected in the Trustly Lightbox, a message will be triggered and must be captured by the `onMessage` attribute of the WebView, as in the example below (and in the App.tsx file): +After that, when an OAuth bank is selected in the Trustly Lightbox, a message will be triggered and must be captured by the `onMessage` attribute of the WebView, as in the example below (and in the App.tsx file): ```js ``` -The function informed in `onMessage` will receive the message with a url that must be opened in an in-app-browser, as in the example below (and in the App.tsx file): +The function informed in `onMessage` will receive the message with a URL that must be opened in an in-app browser, as in the example below (and in the App.tsx file): ```javascript -handleOauthMessage = (message: any) => { +handleOAuthMessage = (message: any) => { const data = message.nativeEvent.data if ( typeof data !== 'string') return; @@ -68,12 +68,13 @@ handleOauthMessage = (message: any) => { } ``` -## Closing Chrome Custom Tab in Android +## Closing Chrome Custom Tabs on Android ### RedirectActivity -When the application receive some action for example `in-app-browser-rn`, or the name that you defined in `urlScheme`, it will call your target Activity with some flags, and reload it. -The example below is from `RedirectActivity` +When the application receives some action like `in-app-browser-rn` (or any name that you defined in the `urlScheme`), it will call your target Activity with some flags, and reload it. + +The example below is from `RedirectActivity`: ```java Intent intent = new Intent(getApplicationContext(), MainActivity.class); @@ -97,13 +98,13 @@ The example below is from `RedirectActivity` ``` -## How integrate native components with Trustly webview +## How to integrate native components with Trustly WebView Trustly UI offers two types of user experiences that can be configured to fit your application. The primary method is to render the Select Bank Widget (shown below) which allows users to quickly search for and select a bank to begin the authorization process. See the [Trustly UI docs](https://amer.developers.trustly.com/payments/docs/sdk#select-bank-widget) for more details. -In this case, we need to avoid that `widget` call the `lightbox` immediatley when the user select a bank, because we need to get the amount value to fill the establish data first, so, for this beahvior we need to add a peace of javascript inside the `widget` like in the file `trustly.tsx` lines 19 to 23. +In this case, we need to avoid the Widget calling the Lightbox immediately when the user selects a bank because we need to get the amount value to fill the establish data first. To achieve this, we need to add a piece of JavaScript inside the Widget (as in the `trustly.tsx` file). ```js const TrustlyWidgetBankSelected = (data) => { @@ -113,17 +114,17 @@ const TrustlyWidgetBankSelected = (data) => { Trustly.selectBankWidget(establishData, TrustlyOptions, TrustlyWidgetBankSelected); ``` -Now you must to implement in your `webview` a way to handle with 3 events triggered by the `widget` and `lightbox` to handle with the bank selection, close or cancel action and when the authorization finished. +Now, you must implement in your WebView a way to handle the 3 events triggered by the Widget and Lightbox to handle the bank selection, close or cancel action, and when the authorization ends. -- Bank selection event (`PayWithMyBank.createTransaction`): In this demonstration app, after select the bank, we redirect the user to the authentication page. +- Bank selection event (`PayWithMyBank.createTransaction`): In this demonstration app, after selecting the bank, we redirect the user to the authentication page. ```js handlePaymentProviderId(data: string) { if(data.startsWith('PayWithMyBank.createTransaction')) { - let splitedData = data.split('|') + let splitData = data.split('|') this.establishData.amount = this.state.amount; - this.establishData.paymentProviderId = splitedData[1]; + this.establishData.paymentProviderId = splitData[1]; this.goToAuthBankSelected(); } diff --git a/src/App.tsx b/src/App.tsx index c92e702..36c57f6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -106,7 +106,7 @@ export default class App extends Component { } } - handleOauthMessage = (message: any) => { + handleOAuthMessage = (message: any) => { const data = message.nativeEvent.data if ( typeof data !== 'string') return; @@ -129,10 +129,10 @@ export default class App extends Component { handlePaymentProviderId(data: string) { if(data.startsWith('PayWithMyBank.createTransaction')) { - let splitedData = data.split('|') + let splitData = data.split('|') this.establishData.amount = this.state.amount; - this.establishData.paymentProviderId = splitedData[1]; + this.establishData.paymentProviderId = splitData[1]; this.goToAuthBankSelected(); } @@ -179,7 +179,7 @@ export default class App extends Component { }); } - postMessageForOauth = ` + postMessageForOAuth = ` window.addEventListener( "message", function (event) { @@ -218,8 +218,8 @@ export default class App extends Component { ref={(ref) => (this.trustlyWebView = ref)} source={{ html: widget(ACCESS_ID, this.establishData) }} renderLoading={this.LoadingIndicatorView} - injectedJavaScript={this.postMessageForOauth} - onMessage={this.handleOauthMessage} + injectedJavaScript={this.postMessageForOAuth} + onMessage={this.handleOAuthMessage} javaScriptEnabled={true} startInLoadingState style={styles.widget} @@ -238,8 +238,8 @@ export default class App extends Component { ref={(ref) => (this.trustlyWebView = ref)} source={{ html }} renderLoading={this.LoadingIndicatorView} - injectedJavaScript={this.postMessageForOauth} - onMessage={this.handleOauthMessage} + injectedJavaScript={this.postMessageForOAuth} + onMessage={this.handleOAuthMessage} javaScriptEnabled={true} startInLoadingState style={styles.widget} From e60173dcceb25950b28200645f0ffdb7c514268a Mon Sep 17 00:00:00 2001 From: Renato DelPupo <16341269+renatodelpupo@users.noreply.github.com> Date: Fri, 7 Jun 2024 15:29:30 -0300 Subject: [PATCH 2/3] Improve code snippets --- README.md | 46 +++++++++++++++++++++++----------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index a3c1a3e..fb11ed7 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ cd ios && pod install ## How it works -Integrations in React Native must inform the `integrationContext` parameter with the value `InAppBrowserNotify` in the establish data, as in the example below: +Integrations in React Native must inform the `integrationContext` parameter with the value `InAppBrowserNotify` in the `establishData`, as in the example below: ```javascript let establishData = { @@ -38,7 +38,7 @@ let establishData = { }; ``` -After that, when an OAuth bank is selected in the Trustly Lightbox, a message will be triggered and must be captured by the `onMessage` attribute of the WebView, as in the example below (and in the App.tsx file): +After that, when an OAuth bank is selected in the Trustly Lightbox, a message will be triggered and must be captured by the `onMessage` attribute of the WebView, as in the example below (and in the `App.tsx` file): ```js ``` -The function informed in `onMessage` will receive the message with a URL that must be opened in an in-app browser, as in the example below (and in the App.tsx file): +The function informed in `onMessage` will receive the message with a URL that must be opened in an in-app browser, as in the example below (and in the `App.tsx` file): ```javascript handleOAuthMessage = (message: any) => { @@ -72,30 +72,30 @@ handleOAuthMessage = (message: any) => { ### RedirectActivity -When the application receives some action like `in-app-browser-rn` (or any name that you defined in the `urlScheme`), it will call your target Activity with some flags, and reload it. +When the application receives some action like `in-app-browser-rn` (or any name that you defined in the `urlScheme`), it will call your target `Activity` with some flags, and reload it. The example below is from `RedirectActivity`: ```java - Intent intent = new Intent(getApplicationContext(), MainActivity.class); - intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP | Intent.FLAG_ACTIVITY_SINGLE_TOP); - startActivity(intent); - finish(); +Intent intent = new Intent(getApplicationContext(), MainActivity.class); +intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP | Intent.FLAG_ACTIVITY_SINGLE_TOP); +startActivity(intent); +finish(); ``` ### AndroidManifest ```xml - - - - - - - - + + + + + + + + ``` ## How to integrate native components with Trustly WebView @@ -104,7 +104,7 @@ Trustly UI offers two types of user experiences that can be configured to fit yo -In this case, we need to avoid the Widget calling the Lightbox immediately when the user selects a bank because we need to get the amount value to fill the establish data first. To achieve this, we need to add a piece of JavaScript inside the Widget (as in the `trustly.tsx` file). +In this case, we need to avoid the Widget calling the Lightbox immediately when the user selects a bank because we need to get the `amount` value to fill the `establishData` first. To achieve this, we need to add a piece of JavaScript inside the Widget (as in the `trustly.tsx` file). ```js const TrustlyWidgetBankSelected = (data) => { @@ -120,7 +120,7 @@ Now, you must implement in your WebView a way to handle the 3 events triggered b ```js handlePaymentProviderId(data: string) { - if(data.startsWith('PayWithMyBank.createTransaction')) { + if (data.startsWith('PayWithMyBank.createTransaction')) { let splitData = data.split('|') this.establishData.amount = this.state.amount; @@ -131,7 +131,7 @@ handlePaymentProviderId(data: string) { } goToAuthBankSelected = () => { - this.setState({step: 'lightbox'}); + this.setState({ step: 'lightbox' }); } ``` @@ -140,7 +140,7 @@ goToAuthBankSelected = () => { ```js handleWithCancelOrClose(data: string) { if(data.endsWith('close|cancel|')) { - this.setState({step: 'widget'}); + this.setState({ step: 'widget' }); } } ``` @@ -149,7 +149,7 @@ handleWithCancelOrClose(data: string) { ```js handleClosePanelSuccess(data: string) { - if(data.startsWith('PayWithMyBank.closePanel|')) { + if (data.startsWith('PayWithMyBank.closePanel|')) { let returnValues = data.split('|')[1]; let returnParameters = returnValues.split('?')[1]; From bdefe944936e83aa2a939949a0b72d522edd0b13 Mon Sep 17 00:00:00 2001 From: Renato DelPupo <16341269+renatodelpupo@users.noreply.github.com> Date: Mon, 24 Jun 2024 16:04:11 -0300 Subject: [PATCH 3/3] Text improvements --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index fb11ed7..cf417ca 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ cd ios && pod install ## How it works -Integrations in React Native must inform the `integrationContext` parameter with the value `InAppBrowserNotify` in the `establishData`, as in the example below: +For React Native integrations, set the `integrationContext` parameter to `InAppBrowserNotify` within the `establishData` object, as shown in the example below: ```javascript let establishData = { @@ -38,7 +38,7 @@ let establishData = { }; ``` -After that, when an OAuth bank is selected in the Trustly Lightbox, a message will be triggered and must be captured by the `onMessage` attribute of the WebView, as in the example below (and in the `App.tsx` file): +With the `integrationContext` parameter set appropriately, when an OAuth bank is selected in the Trustly Lightbox, a message will be triggered and must be captured by the `onMessage` attribute of the WebView, as shown in the example below and in the `App.tsx` file: ```js ``` -The function informed in `onMessage` will receive the message with a URL that must be opened in an in-app browser, as in the example below (and in the `App.tsx` file): +The function provided in `onMessage` will receive a message containing a URL, which must be opened in an in-app browser, as shown in the example below and in the `App.tsx` file: ```javascript handleOAuthMessage = (message: any) => { @@ -104,7 +104,7 @@ Trustly UI offers two types of user experiences that can be configured to fit yo -In this case, we need to avoid the Widget calling the Lightbox immediately when the user selects a bank because we need to get the `amount` value to fill the `establishData` first. To achieve this, we need to add a piece of JavaScript inside the Widget (as in the `trustly.tsx` file). +In this case, we need to prevent the Select Bank Widget from calling the Lightbox immediately when the user selects a bank, as we first need to obtain the `amount` value to populate the `establishData`. To achieve this, we need to add a piece of JavaScript inside the Select Bank Widget, as shown in the `trustly.tsx` file. ```js const TrustlyWidgetBankSelected = (data) => { @@ -114,7 +114,7 @@ const TrustlyWidgetBankSelected = (data) => { Trustly.selectBankWidget(establishData, TrustlyOptions, TrustlyWidgetBankSelected); ``` -Now, you must implement in your WebView a way to handle the 3 events triggered by the Widget and Lightbox to handle the bank selection, close or cancel action, and when the authorization ends. +Now, implement a way in the WebView to handle the three events triggered by the Select Bank Widget and Lightbox: user selects a bank, user cancels the authorization, and the user completes the authorization. - Bank selection event (`PayWithMyBank.createTransaction`): In this demonstration app, after selecting the bank, we redirect the user to the authentication page.