Autofill checkout demo (React)

Join the Mapbox Developers Discord Communityarrow-right

This example connects various Mapbox Search JS components together with Address Autofill to illustrate how one might create a fully-featured checkout experience, complete with form filling from autofill, a visual reference Minimap, and a confirmation step.

Fill out the form below. Try one of the following user flows, or experiment on your own.

Scenario 1: Pure Autofill

1. Type "123 Main" into the address field
2. Choose an address from the list of suggestions that pops up
3. Optionally adjust the map pin location.

Scenario 2: "Did you mean?"

1. Manually type "123 Main", "New York", "NY", "10001" into the respective form fields
2. Click Confirm
3. Review the suggested address, and click Yes

import React, { useState, useCallback, useEffect } from 'react';
import { AddressAutofill, AddressMinimap, useConfirmAddress, config } from '@mapbox/search-js-react';

export default function AutofillCheckoutDemo() {
  const [showFormExpanded, setShowFormExpanded] = useState(false);
  const [showMinimap, setShowMinimap] = useState(false);
  const [feature, setFeature] = useState();
  const [showValidationText, setShowValidationText] = useState(false);
  const [token, setToken] = useState('');

  useEffect(() => {
    const accessToken = 'MAPBOX_ACCESS_TOKEN';
    setToken(accessToken)
    config.accessToken = accessToken;
  }, [])
  
  const { formRef, showConfirm } = useConfirmAddress({
    minimap: true,
    skipConfirmModal: (feature) => {
      ['exact', 'high'].includes(feature.properties.match_code.confidence)
    }
  });

  const handleRetrieve = useCallback(
    (res) => {
      const feature = res.features[0];
      setFeature(feature);
      setShowMinimap(true);
      setShowFormExpanded(true);
    },
    [setFeature, setShowMinimap]
  );

  function handleSaveMarkerLocation(coordinate) {
    console.log(`Marker moved to ${JSON.stringify(coordinate)}.`)
  }

  const handleSubmit = useCallback(async (e) => {
    e.preventDefault();
    const result = await showConfirm();
    if (result.type === 'nochange') submitForm();
  }, [showConfirm]);

  function submitForm() {
    setShowValidationText(true);
    setTimeout(() => {
      resetForm();
    }, 2500);
  }

  function resetForm() {
    const inputs = document.querySelectorAll("input");
    inputs.forEach(input => input.value = "");
    setShowFormExpanded(false);
    setShowValidationText(false);
    setFeature(null);
  }
  
  return (
    <>
      <form ref={formRef} className="flex flex--column" onSubmit={handleSubmit}>
        <div className="grid grid--gut24 mb60">
          <div className="col col--auto-mm w-full">

            {/* Input form */}
            <label className="txt-s txt-bold color-gray mb3">Address</label>
            <AddressAutofill accessToken={token} onRetrieve={handleRetrieve}>
              <input
                className="input mb12"
                placeholder="Start typing your address, e.g. 123 Main..."
                autoComplete="address-line1"
                id="mapbox-autofill"
              />
            </AddressAutofill>
            { !showFormExpanded && 
              <div
                id="manual-entry"
                className="w180 mt6 link txt-ms border-b color-gray color-black-on-hover"
                onClick={() => setShowFormExpanded(true)}
              >
                Enter an address manually
              </div>
            }
            <div className="secondary-inputs" style={{ display: showFormExpanded ? 'block' : 'none' }}>
              <label className="txt-s txt-bold color-gray mb3">Address Line 2</label>
              <input
                className="input mb12"
                placeholder="Apartment, suite, unit, building, floor, etc."
                autoComplete="address-line2"
              />
              <label className="txt-s txt-bold color-gray mb3">City</label>
              <input
                className="input mb12"
                placeholder="City"
                autoComplete="address-level2"
              />
              <label className="txt-s txt-bold color-gray mb3"
                >State / Region</label
              >
              <input
                className="input mb12"
                placeholder="State / Region"
                autoComplete="address-level1"
              />
              <label className="txt-s txt-bold color-gray mb3"
                >ZIP / Postcode</label
              >
              <input
                className="input"
                placeholder="ZIP / Postcode"
                autoComplete="postal-code"
              />
            </div>
          </div>
          <div className="col col--auto-mm">
            {/* Visual confirmation map */}
            <div
              id="minimap-container"
              className="h240 w360 relative mt18"
            >
              <AddressMinimap
                canAdjustMarker={true}
                satelliteToggle={true}
                feature={feature}
                show={showMinimap}
                onSaveMarkerLocation={handleSaveMarkerLocation}
              />
            </div>
          </div>
        </div>

        {/* Form buttons */}
        { showFormExpanded && 
          <div className="mb30 submit-btns">
            <button type="submit" className="btn round" id="btn-confirm">
              Confirm
            </button>
            <button type="button" className="btn round btn--gray-light ml3" id="btn-reset" onClick={resetForm}>
              Reset
            </button>
          </div>
        }
      </form>


      {/* Validation text */}
      { showValidationText && 
        <div id="validation-msg" className="mt24 txt-m txt-bold">Order successfully submitted.</div>
      }
    </>
  );
};

Join the Mapbox Developers Discord Communityarrow-right

Was this example helpful?