구매 버튼
구매 버튼은 아무 페이지에나 붙이는 몇 줄의 HTML입니다. 프레임워크도, 당신 쪽 설치 단계도 없습니다. 버튼은 첫 페인트에 렌더링되고, 제공업체 선택 화면과 결제 제공업체 SDK는 구매자가 처음 클릭할 때 필요에 따라 로드됩니다. HTML을 렌더링하는 어떤 사이트나 프레임워크에서도 작동하며, HTML 임베드를 붙일 수 있는 노코드 사이트 빌더도 포함됩니다.
작동 확인: Angular, Hugo, Jekyll, 순수 HTML, Webflow(Custom Code 임베드), Carrd(Embed 요소), Framer(HTML 임베드), Squarespace(Code Block), WordPress(Custom HTML 블록), Ghost, Notion 사이트(HTML 임베드 위젯). 사이트에서 페이지에 HTML을 붙일 수 있다면 구매 버튼은 거기서 작동합니다.
속성 레퍼런스
| 속성 | 필수 | 받는 값 | 비고 |
|---|---|---|---|
endpoint | 아니요 | URL 문자열 | 거의 항상 생략하세요. 버튼은 API 베이스를 자동 감지합니다. 프로덕션에서는 https://api.coinmoebius.com, localhost에서는 http://localhost:8787. 특이한 설정(예: API 앞의 자체 호스팅 프록시)에 대한 재정의로만 설정하세요. |
project-id | 예 | proj_ 접두사가 붙은 문자열 | 대시보드의 프로젝트 페이지에서. 공개해도 안전합니다. 자격 정보가 아니라 식별자입니다. |
product-id | 예(엄격 모드에서) / 권장(즉석 모드에서) | 문자열, 당신이 고르는 어떤 형식이든 | 당신의 내부 상품 식별자. 엄격 모드(기본값)에서는 워커가 카탈로그에서 가격을 조회하는 방식입니다. 즉석 모드에서는 거래를 재고에 다시 매핑할 수 있도록 여전히 metadata.productId로 당신의 웹훅에 전달됩니다. 아래 엄격 모드 대 즉석 모드 섹션을 참고하세요. |
amount | 즉석 모드에서만 | 문자열로 된 십진수 | 주요 단위의 가격(예: 센트가 아니라 달러). 양수여야 합니다. 엄격 모드에서는 생략하세요. 워커가 카탈로그에서 정본 가격을 읽고 HTML의 어떤 값도 무시합니다. 프로젝트가 즉석 모드이고 product-id가 카탈로그에 없을 때만 필수입니다. |
currency | 즉석 모드에서만 | 세 글자 ISO 4217 코드 또는 당신만의 단위 이름 | 카드/암호화폐 수단의 경우 USD, EUR 등. 우편 결제 제공업체는 판매자가 거래를 정산하는 쪽이므로 어떤 문자열(예: GBK)이든 받습니다. amount와 같은 규칙: 엄격 모드에서는 생략하고, 카탈로그에 없는 상품의 경우 즉석 모드에서 필수. |
label | 아니요 | 문자열 | 버튼 텍스트. 기본값은 Buy. 같은 페이지의 버튼을 구분하는 데 사용하세요. |
customer-ref | 아니요 | 문자열, 당신이 고르는 어떤 형식이든 | 로그인한 사용자 id 같은, 당신 시스템의 구매자를 위한 불투명한 식별자. 버튼이 metadata.customerRef로 워커에 전달하고, 워커가 거래에 그것을 태그합니다. 나중에 실제 고객 데이터를 저희가 보유하지 않고도 당신만의 id로 "내 사용자 중 누가 결제했나?"를 물을 수 있습니다. 익명 결제의 경우 생략하세요. |
theme | 아니요 | dark 또는 light | 버튼과 팝업의 내장 색 구성을 함께 고릅니다. 기본값은 dark. 라이트 구성을 위해 theme="light"를 설정하세요. 당신의 CSS 변수가 어느 쪽이든 재정의합니다. 스타일링 가이드를 참고하세요. |
editable-amount | 아니요 | true 또는 false | true일 때, 팝업에 구매자가 채우는 금액 입력란이 나타납니다(팁, 후원, 원하는 만큼 내기). 기본값은 false이며, 이 경우 당신이 설정한 amount가 고정되고 입력란은 나타나지 않습니다. 금액이 양수가 될 때까지 결제 버튼은 비활성 상태로 남습니다. |
한 페이지에 여러 버튼
스크립트는 버튼을 한 번 등록하고, 그 뒤로는 임의 개수의 인스턴스가 페이지에 렌더링될 수 있습니다. 각 인스턴스는 독립적입니다. 아래 예시는 엄격 모드(기본값)를 씁니다. HTML에 amount나 currency가 없는데, 워커가 카탈로그의 각 상품에서 가격을 조회하기 때문입니다.
<coin-moebius-buy
project-id="proj_YOUR_ID"
product-id="t-shirt-medium"
label="T-shirt (medium)">
</coin-moebius-buy>
<coin-moebius-buy
project-id="proj_YOUR_ID"
product-id="mug-blue"
label="Blue mug">
</coin-moebius-buy>프로젝트가 즉석 모드(후원 위젯, 팁 통)라면, 각 버튼에 amount와 currency도 포함됩니다. 전체 그림은 엄격 모드 대 즉석 모드를 참고하세요.
버튼 테마 적용
구매 버튼은 Shadow DOM 안에 렌더링되며, 이는 당신 페이지의 기존 CSS가 그 안으로 닿지 않는다는 뜻입니다. 이는 의도적입니다. 모든 사이트에서 버튼이 같은 모습을 유지하게 하고, 엉뚱한 * { box-sizing: ... } 규칙이 선택 모달을 깨뜨리는 것을 막습니다. 당신의 스타일시트에서 두 가지 표면으로 스타일링합니다. 색상, 글꼴, 모양을 위한 CSS 사용자 정의 속성, 그리고 그 외 모든 것을 위한 ::part() 선택자. JavaScript는 관여하지 않습니다.
모든 변수와 part는 스타일링 가이드에 문서화되어 있으며, 클릭하고 복사할 수 있는 실시간 예제가 함께 있습니다:
성공과 취소 URL
대시보드의 제공업체 탭에서 Stripe나 NOWPayments를 연결하면, 두 개의 URL을 설정합니다:
- 성공 URL, 결제 성공 후 구매자가 도착하는 곳. Stripe와 NOWPayments는 쿼리 파라미터(Stripe는
?session_id=..., NOWPayments는?NP_id=...)를 덧붙여 당신의 성공 페이지가 어떤 거래가 완료되었는지 식별할 수 있게 합니다. 대부분의 정적 사이트는 그저 일반적인 "감사합니다, 결제 처리 중입니다" 메시지를 보여주고 진실의 원천은 대시보드에 의존합니다. - 취소 URL, 구매자가 결제 전에 빠져나가면 도착하는 곳. 종종 당신의 카트 페이지와 같습니다.
두 URL 모두 대시보드에서 제공업체별로 구성됩니다. 요소는 그것들에 대해 알 필요가 없습니다.