Coin Moebius
코덱스 · IX

구매 버튼을 당신의 것으로

구매 버튼과 그것이 여는 결제 팝업 모두 당신의 색상, 글꼴, 모양을 따릅니다. 몇 개의 CSS 변수를 설정하면 둘 다 함께 따라옵니다. 아래의 모든 것은 클릭할 수 있는 작동 예제이며, 그것을 만든 정확한 코드가 바로 옆에 있습니다.

이 중 어느 것도 미리 설정된 테마가 아닙니다. 각 모습은 옆에 보이는 평범한 CSS로 만들어집니다. 어느 하나든 출발점으로 복사해 원하는 것을 무엇이든 바꾸세요.

이것들은 대역 제공업체와 가짜 참조 코드가 있는 실시간 버튼입니다. 결제는 이루어지지 않습니다. 버튼을 클릭해 팝업을 연 뒤, 그것을 꾸민 코드를 읽어보세요.

기본

CSS 없음, 속성 없음. 버튼과 팝업이 기본 상태로 하나의 중립적인 차콜을 공유합니다. 이것이 기본값인 theme="dark"이므로, 명시해도 아무것도 바뀌지 않습니다.

Buy now 클릭하여 팝업 열기
<coin-moebius-buy
  project-id="proj_xxxx"
  product-id="ebook"
  amount="29"
  currency="USD">
  Buy now
</coin-moebius-buy>

라이트 테마

theme="light"를 추가하면 버튼과 팝업 모두 부드러운 오프화이트가 됩니다. 속성 하나, CSS 없음.

Get access 클릭하여 팝업 열기
<coin-moebius-buy
  project-id="proj_xxxx"
  product-id="membership"
  amount="99"
  currency="USD"
  theme="light">
  Get access
</coin-moebius-buy>

프리셋이 아닌 예제

이들 각각은 옆에 보이는 CSS일 뿐, 그 이상은 없습니다. 어느 하나든 가져다 당신의 스타일시트에 붙여넣고 값을 바꾸세요. 원하는 대로 섞으세요.

브랜드 색상

몇 개의 CSS 변수로 설정한, 어울리는 인디고 팝업을 가진 인디고 버튼. 어느 값이든 바꿔 다시 색칠하세요.

Buy the eBook 클릭하여 팝업 열기
coin-moebius-buy {
  /* the button */
  --cm-button-bg: #4f46e5;
  --cm-button-color: #fff;
  --cm-button-radius: 9999px;
  --cm-font: Georgia, serif;
  /* the popup, styled to match */
  --cm-modal-bg: #1e1b4b;
  --cm-color: #e0e7ff;
  --cm-modal-overlay: rgba(30, 27, 75, 0.6);
}
coin-moebius-buy::part(dialog) {
  border-radius: 18px;
}
coin-moebius-buy::part(provider) {
  border-radius: 9999px;
}

터미널

검은 배경, 초록 고정폭 글자, 직각 모서리. 팝업도 같은 모습을 따릅니다. 여기 모든 값은 당신이 바꿀 수 있습니다.

> buy_license 클릭하여 팝업 열기
coin-moebius-buy {
  /* the button */
  --cm-button-bg: #001b00;
  --cm-button-color: #39ff14;
  --cm-button-radius: 0;
  --cm-font: 'Courier New', monospace;
  /* the popup, styled to match */
  --cm-modal-bg: #000;
  --cm-color: #39ff14;
  --cm-modal-overlay: rgba(0, 20, 0, 0.8);
}
coin-moebius-buy::part(dialog) {
  border: 1px solid #39ff14;
  border-radius: 0;
}
coin-moebius-buy::part(provider) {
  border-radius: 0;
}

소프트

어울리는 연분홍 팝업을 가진 따뜻한 분홍 버튼. 숫자 하나를 편집해 모서리를 더 둥글게 하거나 덜 둥글게 하세요.

Add to cart 클릭하여 팝업 열기
coin-moebius-buy {
  /* the button */
  --cm-button-bg: #ec4899;
  --cm-button-color: #fff;
  --cm-button-radius: 14px;
  /* the popup, styled to match */
  --cm-modal-bg: #fff1f7;
  --cm-color: #831843;
  --cm-modal-overlay: rgba(131, 24, 67, 0.35);
}
coin-moebius-buy::part(dialog) {
  border-radius: 18px;
}
coin-moebius-buy::part(provider) {
  border-radius: 12px;
}

그라데이션

그라데이션 버튼 면과, 그에 맞춰 색조를 입힌 팝업. 버튼 면을 원하는 대로 칠하세요.

Reserve a spot 클릭하여 팝업 열기
coin-moebius-buy::part(button) {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.8rem 2rem;
  font-weight: 700;
}
coin-moebius-buy {
  /* the popup, picking up the gradient's colors */
  --cm-modal-bg: #f5f3ff;
  --cm-color: #4c1d95;
  --cm-modal-overlay: rgba(76, 29, 149, 0.45);
}
coin-moebius-buy::part(dialog) {
  border-radius: 14px;
  border-top: 4px solid #764ba2;
}

미니멀

가는 외곽선, 차분한 글자, 깔끔한 흰 팝업. 원하는 만큼 단순해질 때까지 덜어내세요.

Purchase 클릭하여 팝업 열기
coin-moebius-buy {
  /* the button */
  --cm-button-bg: transparent;
  --cm-button-color: #374151;
  --cm-button-radius: 6px;
  /* the popup, styled to match */
  --cm-modal-bg: #fff;
  --cm-color: #374151;
  --cm-modal-overlay: rgba(17, 24, 39, 0.25);
}
coin-moebius-buy::part(button) {
  border: 1px solid #d1d5db;
}
coin-moebius-buy::part(dialog) {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

팁 통 추가하기

위의 예제들은 빈 배경 위에 있습니다. 여기서는 대신 페이지 위, 카드 안에 들어가 있으며, 구매자가 줄 금액을 고르도록 금액 편집이 켜져 있습니다. 클릭해 써보세요.

작업이 마음에 드시나요?

팁을 남겨주세요. 불을 켜두고 글이 계속 나오게 합니다.

Leave a tip 
coin-moebius-buy {
  /* the button */
  --cm-button-bg: #b45309;
  --cm-button-color: #fff;
  --cm-button-radius: 8px;
  --cm-font: Georgia, serif;
  /* the popup, styled to match */
  --cm-modal-bg: #fffaf3;
  --cm-color: #7c4a02;
  --cm-modal-overlay: rgba(124, 74, 2, 0.4);
}
coin-moebius-buy::part(dialog) {
  border-radius: 14px;
}

구매자가 금액을 정하게 하기

editable-amount="true"를 추가하면 팝업에 구매자가 채우는 금액 입력란이 나타납니다. 팁, 후원, 또는 원하는 만큼 내기를 위해서죠. 기본값인 끔 상태로 두면 당신이 설정한 amount가 고정되고 입력란은 나타나지 않습니다. 어느 쪽이든 금액이 양수가 될 때까지 결제 버튼은 비활성 상태로 남아, 구매자가 0원으로 결제할 수 없습니다.

테마 레퍼런스

스타일링할 수 있는 모든 표면. 버튼에 변수를 설정하고, 나머지는 ::part()로 닿으세요.

CSS 사용자 정의 속성

이것들을 coin-moebius-buy 요소(또는 사용자 정의 속성이 상속되므로 그 조상 중 아무거나)에 설정하세요:

속성기본값제어 대상
--cm-fontsystem-ui, -apple-system, BlinkMacSystemFont, sans-serif버튼 라벨과 선택 모달 안의 모든 텍스트 요소의 글꼴 패밀리.
--cm-color#ededed (theme="light"에서는 #1f1f1f)팝업과 그 안내의 텍스트 색상.
--cm-button-bg#2b2b2b (theme="light"에서는 #f5f5f5)버튼 배경색. 기본적으로 팝업 표면과 일치합니다.
--cm-button-color#ededed (theme="light"에서는 #1f1f1f)버튼 텍스트 색상.
--cm-button-radius6px버튼 모서리 반경. 알약 모양은 999px, 직각은 0을 쓰세요.
--cm-modal-bg#2b2b2b (theme="light"에서는 #f5f5f5)선택 팝업의 배경.
--cm-modal-overlayrgba(0, 0, 0, 0.45)선택 모달 뒤의 배경 색조.

::part() 선택자

위 변수를 넘어서는 것은, 페이지 CSS에서 컴포넌트의 이름 붙은 part를 대상으로 삼으세요. 버튼은 여덟 개를 노출합니다:

Part요소
button구매 버튼 자체.
modal선택 화면 뒤의 전체 뷰포트 오버레이 컨테이너.
dialog가운데에 놓인 선택 모달 상자.
provider선택 화면 안의 각 결제 제공업체 옵션.
provider-icon제공업체 이름 옆의 작은 아이콘.
provider-name제공업체 이름 텍스트.
close선택 화면 하단의 "취소" 버튼.
instructions우편 결제에 표시되는 안내 패널(우편 주소 + 참조 코드).

라이트 & 다크

팝업은 기본적으로 어둡습니다. 밝은 팝업을 원하면 요소에 theme="light"를 추가하세요. 그것이 전환의 전부이며, 방문자의 기기 설정을 따르지 않으므로 당신이 고른 것을 모든 구매자가 봅니다. 특정한 것을 원하시나요? 어느 테마 위에든 위 변수를 설정하면 당신의 값이 이깁니다.

아직 테마를 적용할 수 없는 것

v1에서는 몇 가지가 의도적으로 하드코딩되어 있습니다. 120ms 호버 전환, 모달의 z-index, 그리고 선택 화면 안의 대부분의 간격/패딩. 브랜드 필요가 이 중 하나에 닿는다면, 우회책은 !important 재정의가 붙은 같은 ::part() 선택자입니다. 더 깔끔한 해결은 저희에게 그것을 위한 CSS 변수를 추가해 달라고 요청하는 것입니다. SDK 이슈 트래커가 그를 위한 적절한 곳입니다.

상품별 결제 방식

팝업에 어떤 방식이 보일지 고르고, 이름을 바꾸고, 상품마다 순서를 대시보드에서 설정하세요. 구독은 우편 결제를 건너뛰고 다운로드는 유지할 수 있습니다.

← 문서로 돌아가기

꾸민 뒤, 출시하세요

어느 예제든 당신의 스타일시트에 복사하고 결제를 받기 시작하세요. 무료로 시작, 카드 불필요.

요금제 보기문서 읽기