O botão de compra e o popup de pagamento que ele abre adotam ambos as suas cores, fontes e formato. Você define algumas variáveis CSS; os dois acompanham juntos. Tudo abaixo é um exemplo funcional em que você pode clicar, com o código exato que o produziu logo ao lado.
Nenhum destes é um tema pré-definido. Cada visual é construído a partir do CSS simples mostrado ao lado. Copie qualquer um como ponto de partida e mude o que quiser.
Estes são botões ao vivo com provedores fictícios e um código de referência falso. Nenhum pagamento é cobrado. Clique em um botão para abrir o popup, depois leia o código que o estilizou.
Sem CSS, sem atributos. O botão e o popup dele compartilham um cinza-grafite neutro de fábrica. Este é theme="dark", o padrão, então escrevê-lo não muda nada.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="ebook"
amount="29"
currency="USD">
Buy now
</coin-moebius-buy>Adicione theme="light" e tanto o botão quanto o popup ficam de um branco suave. Um atributo, sem CSS.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="membership"
amount="99"
currency="USD"
theme="light">
Get access
</coin-moebius-buy>Cada um destes é apenas o CSS mostrado ao lado, nada mais. Pegue qualquer um, cole na sua própria folha de estilo, e mude os valores. Misture como quiser.
Um botão índigo com um popup índigo correspondente, definido com um punhado de variáveis CSS. Mude qualquer valor para recolorir.
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;
}Fundo preto, texto verde monoespaçado, cantos retos. O popup segue o mesmo visual. Cada valor aqui é seu para trocar.
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;
}Um botão rosa quente com um popup rosa suave para combinar. Arredonde mais ou menos os cantos editando um número.
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;
}Uma face de botão em gradiente, com o popup tingido para combinar. Pinte a face do botão como quiser.
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;
}Um contorno fino, texto discreto, e um popup branco e limpo. Reduza até ficar tão simples quanto você quiser.
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;
}Os exemplos acima ficam sobre um fundo em branco. Aqui está em uma página, encaixado em um cartão, com o valor editável ativado para que o comprador escolha quanto dar. Clique e experimente.
Deixe uma gorjeta. Ela mantém as luzes acesas e os posts saindo.
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;
}Adicione editable-amount="true" e o popup mostra um campo de valor que o comprador preenche, para gorjetas, doações ou pague o quanto quiser. Deixe desativado, que é o padrão, e o amount que você definiu fica fixo e nenhum campo aparece. De qualquer forma, os botões de pagamento permanecem desativados até que o valor seja um número positivo, então um comprador não consegue finalizar por nada.
Toda superfície que você pode estilizar. Defina as variáveis no botão; alcance o resto com ::part().
Defina estas no elemento coin-moebius-buy (ou em qualquer um dos seus ancestrais, já que as propriedades personalizadas herdam):
| Propriedade | Padrão | O que controla |
|---|---|---|
--cm-font | system-ui, -apple-system, BlinkMacSystemFont, sans-serif | Família de fontes para o rótulo do botão e cada elemento de texto dentro do modal do seletor. |
--cm-color | #ededed (#1f1f1f com theme="light") | Cor do texto para o popup e as instruções dele. |
--cm-button-bg | #2b2b2b (#f5f5f5 com theme="light") | Cor de fundo do botão. Combina com a superfície do popup por padrão. |
--cm-button-color | #ededed (#1f1f1f com theme="light") | Cor do texto do botão. |
--cm-button-radius | 6px | Raio dos cantos do botão. Use 999px para um formato de pílula, 0 para reto. |
--cm-modal-bg | #2b2b2b (#f5f5f5 com theme="light") | Fundo do popup do seletor. |
--cm-modal-overlay | rgba(0, 0, 0, 0.45) | Tom do fundo atrás do modal do seletor. |
Para qualquer coisa além das variáveis acima, mire as partes nomeadas do componente a partir do CSS da sua página. O botão expõe oito:
| Parte | Elemento |
|---|---|
button | O próprio botão de compra. |
modal | O contêiner de sobreposição em tela cheia atrás do seletor. |
dialog | A caixa centralizada do modal do seletor. |
provider | Cada opção de provedor de pagamento dentro do seletor. |
provider-icon | O pequeno ícone ao lado do nome de um provedor. |
provider-name | O texto do nome do provedor. |
close | O botão "Cancelar" na parte de baixo do seletor. |
instructions | O painel de instruções exibido para o pagamento por correio (o endereço de correspondência + código de referência). |
O popup é escuro por padrão. Para um popup claro, adicione theme="light" ao elemento. Essa é a chave inteira, e ela não segue a configuração do dispositivo do visitante, então o que você escolher é o que todo comprador vê. Quer algo específico? Defina qualquer uma das variáveis acima por cima de qualquer tema e os seus valores vencem.
Algumas coisas são intencionalmente fixas na v1: as transições de hover de 120ms, o z-index do modal, e a maior parte do espaçamento/preenchimento dentro do seletor. Se uma necessidade de marca cair em uma dessas, a solução alternativa é o mesmo seletor ::part() com uma substituição !important; a correção mais limpa é nos pedir para adicionar uma variável CSS para isso. O rastreador de issues do SDK é o lugar certo para isso.
Escolha quais métodos aparecem no popup, renomeie-os, e defina a ordem deles para cada produto a partir do seu painel. Uma assinatura pode dispensar o pagamento por correio enquanto um download o mantém.
Copie qualquer exemplo para a sua folha de estilo e comece a receber pagamentos. Grátis para começar, sem cartão.