# AXO Base Integration

# Include JS

<script src="https://js.braintreegateway.com/web/3.92.1/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.92.1/js/hosted-fields.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.92.1/js/axo.min.js"></script>

# Launch connect experience

if(client.axo.hasConnectAccount(email)) {
    client.axo.launchConnectExperience({ ...axoConfiguration })
        .then(profile => saveConnectProfile(profile))
        .catch(err => showErr(err))
}

# Fetch profile data (optional)
The data is retured from the `lauchConnectExperience()` above, however you can request it at any time via API

// Some api with a buyer access token

# Supplement your checkout with our data
Use the data returned from the steps above to add funding instruments and shipping information for your consumers to select.

# Add Optin hosted field
Add the optin component to the hosted fields integration.

axoConsent: {
    container: 'axo-consent',
    style: '{#toggle: red}'
}

### Full hosted fields example

braintree.hostedFields.create({
  client: clientInstance,
  styles: {
    'input': {
      'font-size': '14px'
    },
    'input.invalid': {
      'color': 'red'
    },
    'input.valid': {
      'color': 'green'
    }
  },
  fields: {
    number: {
      container: '#card-number',
      placeholder: '4111 1111 1111 1111'
    },
    cvv: {
      container: '#cvv',
      placeholder: '123'
    },
    expirationDate: {
      container: '#expiration-date',
      placeholder: '10/2022'
    },
    axoConsent: {
        container: 'axo-consent',
        style: '{#toggle: red}'
    }
  }
}, function (hostedFieldsErr, hostedFieldsInstance) {
  if (hostedFieldsErr) {
    console.error(hostedFieldsErr);
    return;
  }

  submit.removeAttribute('disabled');

  form.addEventListener('submit', function (event) {
    event.preventDefault();

    hostedFieldsInstance.tokenize(function (tokenizeErr, payload) {
      if (tokenizeErr) {
        console.error(tokenizeErr);
        return;
      }

      // If this was a real integration, this is where you would
      // send the nonce to your server.
      console.log('Got a nonce: ' + payload.nonce);
    });
  }, false);
});

# Make sure the following information is passed to your transaciton API
[Braintree transaction api](https://developer.paypal.com/braintree/docs/reference/request/transaction/sale)
* Name
* Email
* Phone
* Billing address
* Shipping Address
* Nonce