App Settings

This document covers the procedure of configuring your app with the React Builder of apprat.io

Clicking on App Settings will bring you to the area where you can change the individual settings you require. Click on the sub-menu below and change the option you want.

Login Functionality

From here, you can manage and change all login and registration settings.

Set up "Login with Facebook" authentication
First, you should create your Facebook app ID:

  • Visit the Facebook Developer Console to register your app at Facebook ("Create app").
  • After your app is registered, within the Facebook Developer Console, go to Settings and scroll to the bottom, where you will see an Add Platform button. Add iOS and Android there.
  • For iOS in the Bundle ID field, please add the ID host.exp.Exponent, as in the picture:

Add iOS Bundle ID of your React app in Facebook Developer Console
Add iOS Bundle ID

  • For Android in the Key Hashes field, just add rRW++LUjmZZ+58EbN5DVhGAnkX4= as in this picture:

Add Android Hash of your React app in Facebook Developer Console
Add Android Key Hashes

Find the App ID in your Facebook Developer Console
Find the App ID in your Facebook Developer Console

  • Copy this App ID and insert it into the Facebook ID field of your apprat.io React Builder settings. Moreover, set FacebookLogin to True:

Insert the Facebook App ID & activate 'Login with Facebook'
Insert the Facebook App ID & activate 'Login with Facebook'

Set up "Login with Google" authentication
First, you should create your Google app ID:

  • Register a project on the Google Developer Console.
  • Within the Google Developer Console, go to the Credentials page of your created project.
  • Within the Credentials page, create an app for your project.
  • Once that's done, click "Create Credentials" and then "OAuth Client ID". Set the product name on the consent screen and continue.
  • First, we start with iOS: Select "iOS Application" as the Application Type. Give it a name (e.g., "iOS Development"). Use host.exp.exponent as the bundle identifier and click "Create". You will now see a modal with the Client ID. Note or save this Client ID, we will need it later.
  • Redo these steps for Android: Select "Android Application" as the Application Type. Assign the app a name, too (maybe "Android Development"). On your computer, open the Terminal app (How To on Mac | How To on Windows). Enter openssl rand -base64 32 | openssl sha1 -c in the Terminal app, press Enter, and it will output an individual string that looks similar like A1:B2:C3:D4:E5:F6. Copy this output string to your clipboard (CMD+C keys) or note it. Paste (CMD+V keys) or enter the output string from the previous step into the "Signing-certificate fingerprint" text field. Use host.exp.exponent for the "Package name" field and click "Create". You will now see a modal with the Client ID for Android. Note/save this Client ID, too.
  • Now you have an ID for iOS, and you have an ID for Android. Switch to your apprat.io browser tab again, and enter them into the googleIOSId and googleAndroidID fields. Moreover, set GoogleLogin to True:

Insert the iOS/Android Google App IDs & activate 'Login with Google'
Insert the iOS/Android Google App IDs & activate 'Login with Google'

Orders

From here, you can manage and change all settings related to orders. Order settings include these options:

  • SendEmailOnOrder → Set to true to receive an e-mail notification for new orders
  • SendToEmail → Enter the e-mail address where you want to receive the e-mail notifications

Configuration of orders
Configuration of orders

AdMob Ads

This section allows you to add and modify AdMob ads to monetize your application. In the AdMob Console, you can register your app and create your banner and interstitial ads. When you have the IDs ready, please enter them to the BannerID and InterstitialID fields:

  • BannerID → Enter your AdMob Banner Ad ID
  • InterstitialID → Enter your AdMob Interstitial Ad ID
  • IsTesting → Set to true if your app is not published yet (displays AdMob test ads then)
  • ShowBannerAds → Set to true to activate AdMob Banner Ads
  • ShowinterstitialAds → Set to true to activate AdMob Interstitial Ads
Make sure to set the ShowBannerAds and/or ShowinterstitialAds variable to true after you entered the AdMob IDs for them.

Configuration of AdMob in your React App
Configuration of AdMob Ads

PayPal

For accepting PayPal payments, please create a Paypal Merchant Account. After creating the account, you can set up the fields in your apprat.io settings area. From here, you can manage and change all PayPal payment settings. The PayPal payment settings include these options:

  • AcceptPayments → Set to true to activate PayPal payments
  • Cancel url → Enter a web URL that will be opened if a customer cancels the PayPal purchase (e.g., https://www.example.org/sorry.php)
  • City → Set a city code of your company
  • Clientid → Set a client ID (e.g., "123" to identify app purchases compared to web purchases)
  • Country code → Set the country code (e.g., "US" for the United States of America, or "DE" for Germany)
  • Currency → Set the currency code (e.g., "USD")
  • IncludeShippingInfo → Enter public shipping notes for customers
  • Postal code → Enter your Country and Region Code
  • Return url → Enter a web URL that will be opened if a customer finishes the PayPal purchase (e.g., https://www.example.org/thanks.php)
  • SandBoxMode → Set to true to activate PayPal Sandbox (no real payments, just test payments)
  • SecretKey → Set the SecretKey (you can register it in your Paypal Merchant Account)
  • State → Enter your State and Province Code