<script src="https://js.braintreegateway.com/web/3.123.2/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.123.2/js/fastlane.js"></script>
<script src="https://js.braintreegateway.com/web/3.123.2/js/data-collector.min.js"></script>

const clientInstance = await braintree.client.create({
  authorization: "<YOUR CLIENT TOKEN>"
});

const dataCollectorInstance = await braintree.dataCollector.create({
  client: clientInstance,
});

const styles = {
  //specify global styles here
  root: {
    backgroundColorPrimary: "#ffffff"
  }
}

const deviceData = dataCollectorInstance.deviceData;

// For all configuration options for the fastlane construct 
// please refer to the Reference types section
const fastlane = await braintree.fastlane.create({
  authorization: "<YOUR CLIENT TOKEN>",
  client: clientInstance,
  deviceData: deviceData,
  styles: styles
});

const identity = fastlane.identity;
const profile = fastlane.profile;
const {
    checkoutPageLoaded,
    apmSelected,
    emailSubmitted,
    orderPlaced,
    checkoutEnd,
    storeAccountCreated,
} = fastlane.events;

<!-- add a div where the watermark will be rendered -->
<div id="watermark-container">
    <img src="https://www.paypalobjects.com/fastlane-v1/assets/fastlane-with-tooltip_en_sm_light.0808.svg" />
</div>

const fastlaneWatermark = (await fastlane.FastlaneWatermarkComponent({
    includeAdditionalInfo: //Boolean which determines if the info icon is present
}));
await fastlaneWatermark.render("#watermark-container");

const {
    customerContextId
   } = await identity.lookupCustomerByEmail(document.getElementById("email").value);

   var renderFastlaneMemberExperience = false;

   if (customerContextId) {
   // Email is associated with a Fastlane member or a PayPal member, 
   // send customerContextId to trigger the authentication flow.
   const {
    authenticationState,
    profileData
   } = await identity.triggerAuthenticationFlow(customerContextId);

   if (authenticationState === "succeeded") {
    // Fastlane member successfully authenticated themselves
    // profileData contains their profile details
    renderFastlaneMemberExperience = true;
    const name = profileData.name;
    const shippingAddress = profileData.shippingAddress;
    const card = profileData.card;
   } else {
    // Member failed or cancelled to authenticate. Treat them as a guest payer
    renderFastlaneMemberExperience = false;
    }
   } else {
   // No profile found with this email address. This is a guest payer
   renderFastlaneMemberExperience = false;
   }

<div id="selected-address"> <!-- render selected shipping address here --> </div>
<a href="" id="your-change-address-button"> Change address </a>
<div id="watermark-container">
    <img src="https://www.paypalobjects.com/fastlane-v1/assets/fastlane_en_sm_light.0296.svg" />
</div>

if (renderFastlaneMemberExperience) {
    if (profileData.shippingAddress) {
    // render shipping address from the profile
  
    const changeAddressButton = document.getElementById("your-change-address-button");
    
    changeAddressButton.addEventListener("click", async () => {
      const {
        selectedAddress,
        selectionChanged
      } = await profile.showShippingAddressSelector();
    
      if (selectionChanged) {
        // selectedAddress contains the new address
      } else {
        // selection modal was dismissed without selection
      }
    });
    } else {
    // render your shipping address form
    }
    } else {
    // render your shipping address form
    }

<div id="selected-card"> <!-- render selected card here --> </div>
<a href="" id="your-change-card-button"> Change card </a>
<div id="watermark-container">
    <img src="https://www.paypalobjects.com/fastlane-v1/assets/fastlane_en_sm_light.0296.svg" />
</div>

// Handle changes to the card selection
const changeCardButton = document.getElementById("your-change-card-button");
changeCardButton.addEventListener("click", async () => {
    const { selectionChanged, selectedCard } = await profile.showCardSelector();
    if (selectionChanged) {
        // selectedCard contains the new card
        // selectedCard.id contains the paymentToken
        // selectedCard.paymentSource.card contains more details such as last 4
        selectedCardForCheckout = selectedCard;
        // re-render the selected card UI if required
    } else {
        // selection modal was dismissed without selection
    }
});

<!-- Div container for the Card Component -->
<div id="card-container"> </div>
<!-- Submit Button -->
<button id="submit-button"> Submit Order </button>

const name = profileData.name;
const shippingAddress = profileData.shippingAddress;
const card = profileData.card;
var selectedCardForCheckout = card;
if (memberAuthenticatedSuccessfully && card) {
    // refer to Lookup & Authenticate section for details
    // render the card here
    // render Fastlane Watermark
    // render a change button and call profile.showCardSelector() when it is clicked
} else {
    // User is a guest, failed to authenticate or does not have a card in the profile.
    // render the card fields
    const fastlaneCardComponentOptions = {
        fields: {
            phoneNumber: {
                // Example of how to prefill the phone number field in the FastlaneCardComponent
                prefill: "4026607986"
            },
            cardholderName: {
                // Example of disabling and prefilling the cardholder name field
                prefill: "John Doe",
                enabled: false
            }
        },
        styles: {
            root: {
                // specify styles here
                backgroundColorPrimary: "#ffffff"
            }
        }
    };
    const fastlaneCardComponent = await fastlane.FastlaneCardComponent(fastlaneCardComponentOptions);
    fastlaneCardComponent.render("#card-container");
}

// Handle form submission
const submitButton = document.getElementById("submit-button");
submitButton.addEventListener("click", async () => {
    var paymentToken = null;
    // if the Card Component is rendered,
    // pass the billing address and get the paymentToken
    if (selectedCardForCheckout) {
        paymentToken = selectedCardForCheckout.id;
    } else {
        paymentToken = await fastlaneCardComponent.getPaymentToken({
            billingAddress: {
                cardholderName: "John Doe",
                streetAddress: "2211 North 1st St",
                locality: "San Jose",
                region: "CA",
                postalCode: "95131",
                // you can also use the countryCodeAlpha3 or countryCodeNumeric formats
                countryCodeAlpha2: "US"
            }
        });
    }
    // Send the paymentToken and previously captured device data to server
    // to complete checkout
});