display different payment options based on user location

app/extensions/brave/locales/en-US/preferences.properties

@@ -7,6 +7,7 @@ sync=Sync
 privacy=Privacy
 shields=Shields
 security=Security
+visit=visit
 visits=Visits
 publisher=Site
 publishers=Publishers
@@ -63,6 +64,7 @@ on=on
 notifications=notifications
 moneyAdd=Use your debit/credit card
 moneyAddSubTitle=No Bitcoin needed!
+outsideUSAPayment=Need to buy Bitcoin outside of the USA?
 coinbaseNotAvailable=Sorry! Adding funds with a credit/debit card is only available for contributions of $5/month at the moment.
 add=Fund with debit/credit
 transferTime=Transfer may take up to 40 minutes

js/about/preferences.js

@@ -285,6 +285,10 @@ class BitcoinDashboard extends ImmutableComponent {
   get canUseCoinbase () {
     return this.currency === 'USD' && this.amount < 6
   }
+  get userInAmerica () {
+    const countryCode = this.props.ledgerData.get('countryCode')
+    return !(countryCode && countryCode !== 'US')
+  }
   get coinbasePanel () {
     if (this.canUseCoinbase) {
       return <div className='panel'>
@@ -311,6 +315,27 @@ class BitcoinDashboard extends ImmutableComponent {
       </div>
     }
   }
+  get exchangePanel () {
+    const url = this.props.ledgerData.getIn(['exchangeInfo', 'exchangeURL'])
+    const name = this.props.ledgerData.getIn(['exchangeInfo', 'exchangeName'])
+    // Call coinbasePanel if we don't have the URL or Name
+    if (!url || !name) {
+      return this.coinbasePanel
+    } else {
+      return <div className='panel'>
+        <div className='settingsPanelDivider'>
+          <span className='fa fa-credit-card' />
+          <div className='settingsListTitle' data-l10n-id='outsideUSAPayment' />
+        </div>
+        <div className='settingsPanelDivider'>
+          <span className='visitText' data-l10n-id='visit' />
+          <a target='_blank' className='browserButton primaryButton' href={url}>
+            {name}
+          </a>
+        </div>
+      </div>
+    }
+  }
   get smartphonePanel () {
     return <div className='panel'>
       <div className='settingsPanelDivider'>
@@ -362,7 +387,10 @@ class BitcoinDashboard extends ImmutableComponent {
         : null
       }
       <div className='board'>
-        {this.coinbasePanel}
+        { (this.userInAmerica)
+          ? this.coinbasePanel
+          : this.exchangePanel
+        }
         <div className='panel'>
           <div className='settingsPanelDivider'>
             <span className='bitcoinIcon fa-stack fa-lg'>

less/about/preferences.less

@@ -785,6 +785,12 @@ div.nextPaymentSubmission {
         top: 0;
       }
     }
+    .visitText {
+      color: @braveOrange;
+      line-height: 45px;
+      margin: 0 13px;
+      font-size: 14px;
+    }
     #bitcoinPaymentURL {
       cursor: pointer;
       background-color: @lightGray;