Skip to content

Smart Checkout

Jump to bottom
agranado edited this page Feb 27, 2015 · 2 revisions

Smart Checkout

O Smart Checkout é o componente web/mobile da Smartcoin que permite realizar vendas ainda que você não possua uma plataforma de e-commerce. Basta incluir a linha de código abaixo na sua página, personalizada com as suas configurações! :)

(código exemplo)

<form id="formId" action="callback_url" method="POST">
   <script src="https://checkout.smartcoin.com.br/smart_checkout.js"
      data-description="description"
      data-amount="amount in cents R$1,00 will be 100"
      data-button-label="Comprar" >
    </script>
 </form>

Você pode personalizar a experiência de compra de seu cliente com as seguintes opções:

  • data-email: Se quiser passar o e-mail do seu cliente pré-configurado. (ex.: data-email="example@smartcoin.com.br");
  • data-address: Para requisitar os endereços de entrega e de fatura. (ex.: data-address="yes");
  • data-shipping-calculator: Se quiser que o Smart Checkout calcule o valor do frete através dos Correios. (ex.: data-shipping-calculator="yes");
  • data-shipping-weight: Se habilitou o cálculo do frete, é preciso indicar o peso do produto em gramas. (ex.: data-shipping-weight="250");
  • data-shipping-cep: Se habilitou o cálculo do frete, é preciso indicar o CEP de origem. (ex.: data-shipping-cep="22280-110");
  • data-before-validation: Caso o seu formulário tenha campos que precisem ser validados antes da abertura do Smart Checkout, é possível indicar qual o método javascript que deve ser chamado para realizar a validação. (ex: data-before-validateion="valida_form", onde valida_form é function valida_form() {return true;});
  • data-custom-fields: Caso o seu formulário tenha campos que precisem ser repassados para o * servidor, indique os campos pelo atributo id separados por vírgula. (ex.: data-custom-fields="name,product_id,..");
  • data-credit-card-only: Se quiser aceitar apenas cartão de crédito como pagamento. (ex.: data-credit-card-only='yes');
  • data-after-success: Se após a confirmação de pagamento bem sucedido houver a necessidade de uma ação, é possível chamar uma função javascript para redirecionar (ou qualquer outra ação que desejar);
  • data-installments: Número máximo de parcelamento que poderá ser exibido no formulário do cartão de crédito. Esse valor não pode ser maior do que configurado no Smart Manage. E se o valor for menor que um o campo de parcelas não é exibido. (ex.: data-installments='2');
  • data-type: Para criar pagamentos recorrentos (assinaturas) e ter o comportamento. (ex.: data-type="subscription");
  • **data-plan: ** Para indicar o id do plano para a criação da assinatura, quando o data-type="subscription". (ex.: data-plan="test-plan");

O callback_url irá ser a URL que o Smart Checkout irá chamar no seu servidor para efetivamente realizar a cobrança. Veja o exemplo de como criar uma URL para callback usando o Heroku.

Style

É possível mudar o estilo do botão do Smart Checkout. Para isso, basta sobre escrever o estilo da classe CSS smartcoin-custom-button, como o exemplo abaixo:

.smartcoin-custom-button {
   background: orange;
}

###Saiba mais como enviar as cobrança pelo seu servidor para a Smartcoin: Para ver as soluções em PHP e Ruby, visite o Github da Smartcoin.

Clone this wiki locally