Stripe Terminal에서 카트 세부 정보를 표시하는 방법

최근에 제 동료가 직접 결제 솔루션인 를 작성했습니다. Charles의 기사는 터미널 장치를 설정 및 등록하는 방법과 결제를 수락하거나 취소하는 앱을 구축하는 방법을 알려줍니다. 한 단계 더 나아가 추가 기능을 살펴보겠습니다. 터미널 장치에 카트 항목을 표시하여 고객이 구매하는 항목을 확인하고 필요한 경우 변경할 수 있습니다.

항목 나열

아직 터미널용 애플리케이션을 구축하지 않았다면 이전 시리즈 또는 integration builder in our docs 을 확인하십시오.
terminal 메서드를 호출할 수 있는 클라이언트 측에 StripeTerminal.create()로 생성된 setReaderDisplay 변수가 있어야 합니다. 이 메서드는 아래와 같이 DisplayInfo 개체를 입력으로 사용합니다.

terminal.setReaderDisplay({
   type: "cart",
   cart: {
     line_items: [
       {
         description: "Soy Cappuccino",
         amount: 550,
         quantity: 1,
       },
       {
         description: "Avocado on toast",
         amount: 1150,
         quantity: 1,
       },
     ],
     tax: 100,
     total: 1700,
     currency: "usd",
   },
});

line_items 배열에서 설명, 금액 및 수량을 포함하여 제품에 대한 세부 정보를 추가할 수 있습니다.
통화, 세액 및 총액을 지정할 수도 있습니다.

다음은 BBPOS WisePOS E 판독기에서 카트 디스플레이가 어떻게 보이는지에 대한 예입니다.

디스플레이 지우기

setReaderDisplay를 사용하여 장치의 화면을 업데이트한 후 clearReaderDisplay()를 사용하여 지울 수 있습니다. 이렇게 하면 화면이 원래 상태로 돌아갑니다.

예를 들어 버튼을 클릭하여 디스플레이를 지우는 코드는 다음과 같습니다.

document.getElementById("clear-button").onclick = () => {
 terminal.clearReaderDisplay();
};

다음은 터미널 장치에서 일어나는 일입니다.



이제 터미널 장치에 카트 항목을 표시하고 업데이트하고 화면을 지울 수 있습니다!

자세히 알아보려면 Terminal API reference 또는 "지급 IRL 받기"를 확인하십시오.

📣 팔로우 및 계속
📺 구독하기
💬공식가입Discord server
📧 가입하기 Dev Digest

저자 소개

Stripe, a creative technologist 및 Google Developer Expert의 Developer Advocate입니다. 그녀는 기술 연구와 실험을 좋아합니다. 그녀는 코딩을 하지 않을 때 야외에서 시간을 보내고 새로운 맥주를 마시며 독서를 즐깁니다.