AI 채널 내 결제는 대화에서 고른 상품의 배송·결제 확인 단계를 같은 채널 안에서 이어가는 방식입니다. Google은 UCP 판매자를 위한 네이티브 체크아웃 통합을 발표했습니다.
데모는 상품 선택 뒤 배송과 최종 확인 패널이 열리는 흐름입니다. 채널마다 경로가 달라 일부는 상점 체크아웃으로 이동하므로 모든 AI 대화가 내부 결제를 지원한다고 쓰면 안 됩니다.
언제 쓰나
지원되는 AI 채널에서 발견부터 결제까지의 이탈을 줄일 때 검토합니다.
AI 채널 내 결제
Native AI checkout
지원 채널에서 상품 탐색 뒤 결제 단계를 대화 화면 안에 엽니다.
···
<div class="checkout"><div class="chat">I'LL TAKE THE ARC LIGHT</div><div class="panel"><div class="progress"><span id="p1">1 ITEM</span><span id="p2">2 DELIVERY</span><span id="p3">3 CONFIRM</span></div><div class="content"><span class="icon"></span><div><b id="title">ARC TASK LIGHT</b><small id="detail">$39 · IN STOCK</small></div></div><div class="button" id="button">CONTINUE →</div></div></div>.checkout{width:min(88%,490px);font:800 clamp(10px,max(1.5vmin,1vw),13px)/1.2 sans-serif}.chat{display:inline-block;padding:clamp(6px,1.3vmin,12px);background:var(--fg);color:var(--bg);margin-bottom:clamp(5px,1vmin,10px)}.panel{border:2px solid var(--fg);background:var(--surface);padding:clamp(8px,2vmin,18px)}.progress{display:flex;gap:clamp(3px,1vmin,8px)}.progress span{flex:1;border-bottom:3px solid var(--line);padding-bottom:5px;font-size:clamp(10px,max(1.1vmin,1vw),12px);color:var(--muted)}.progress span.active{border-color:var(--accent);color:var(--accent)}.content{display:flex;align-items:center;gap:clamp(8px,2vmin,18px);min-height:clamp(65px,18vmin,115px)}.content .icon{width:clamp(32px,9vmin,65px);aspect-ratio:1;background:linear-gradient(135deg,var(--accent),var(--accent-3))}.content div{display:grid;gap:5px}.content small{color:var(--muted)}.button{background:var(--accent);color:white;text-align:center;padding:clamp(6px,1.2vmin,11px);cursor:pointer}small{font-size:max(.833em,10px,1vw)}const steps=[...document.querySelectorAll('.progress span')],title=document.querySelector('#title'),detail=document.querySelector('#detail'),button=document.querySelector('#button');const states=[['ARC TASK LIGHT','$39 · IN STOCK','CONTINUE →'],['DELIVERY','HOME · 2–4 DAYS','REVIEW →'],['FINAL REVIEW','TOTAL $39 · BUYER CONFIRMATION','START AGAIN']];let step=0;function render(){steps.forEach((e,i)=>e.classList.toggle('active',i<=step));title.textContent=states[step][0];detail.textContent=states[step][1];button.textContent=states[step][2]}function next(){step=(step+1)%3;render()}button.addEventListener('click',next);setInterval(next,1900);render();