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];