Autofill checkout demo (React)
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
- Type "123 Main" into the address field
- Choose an address from the list of suggestions that pops up
- Optionally adjust the map pin location.
Scenario 2: "Did you mean?"
- Manually type "123 Main", "New York", "NY", "10001" into the respective form fields
- Click Confirm
- 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}><inputclassName="input mb12"placeholder="Start typing your address, e.g. 123 Main..."autoComplete="address-line1"id="mapbox-autofill"/></AddressAutofill>{ !showFormExpanded && <divid="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><inputclassName="input mb12"placeholder="Apartment, suite, unit, building, floor, etc."autoComplete="address-line2"/><label className="txt-s txt-bold color-gray mb3">City</label><inputclassName="input mb12"placeholder="City"autoComplete="address-level2"/><label className="txt-s txt-bold color-gray mb3">State / Region</label><inputclassName="input mb12"placeholder="State / Region"autoComplete="address-level1"/><label className="txt-s txt-bold color-gray mb3">ZIP / Postcode</label><inputclassName="input"placeholder="ZIP / Postcode"autoComplete="postal-code"/></div></div><div className="col col--auto-mm">{/* Visual confirmation map */}<divid="minimap-container"className="h240 w360 relative mt18"><AddressMinimapcanAdjustMarker={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>}</>);};