AssinyGateway Payment Fragment

O AssinyGateway Payment Fragment recebe o pagamento com cartão e PIX dentro da sua página, num iframe do Assiny Gateway: o que o Comprador digita no cartão nunca passa pela sua página.

{
  "theme": "assiny"
}

Métodos de pagamentoCopiar o link da seção

Cada método de paymentMethodTypes vira uma aba, na ordem da lista; a primeira começa selecionada.

• Cartão ('card'): número, validade e CVC, mais os campos Nome no cartão e País, que você pode esconder em fields. Bandeiras aceitas: Visa, Mastercard, Amex, Elo e Hipercard.
• PIX ('pix'): só um texto, sem campo. O QR code aparece depois que o seu servidor cria o pagamento, na tela do QR do PIX (PIX e a tela do QR). O PIX exige currency: 'brl'.

Com combine: 'auto' (o padrão), o fragment mostra também a aba Combinar métodos, em que o Comprador divide o total em duas Partes: "Cartão + Cartão" com 'card' habilitado e "Cartão + PIX" com 'card' e 'pix'. A aba só aparece com amount de pelo menos 2 centavos; só com 'pix' não há o que combinar. combine: 'never' tira a aba; uma lista de 'card_card' e 'card_pix' mostra só as combinações listadas, na ordem de 'auto' e com o mesmo mínimo de 2 centavos.

No Combinar, o Comprador digita o valor da primeira Parte e a segunda é o resto. Com partsFrom: 'page', quem divide é a sua página: o fragment esconde o campo de valor e mostra a divisão que você manda por fragments.update({ parts }) (Referência do SDK).

const payment = fragments.create('payment', {
  paymentMethodTypes: ['card', 'pix'],
  combine: 'auto', // ['card_pix'] oferece só Cartão + PIX
});
payment.mount('#pagamento');

LayoutCopiar o link da seção

Dois layouts, escolhidos na aparência:

• tabs (o padrão): os métodos em abas, lado a lado; as setas, Home e End trocam de aba.
• accordion: uma linha por método, com o conteúdo aberto embaixo da linha escolhida; a primeira começa aberta.

const fragments = assiny.fragments({
  mode: 'payment',
  amount: 12990,
  currency: 'brl',
  appearance: { layout: 'accordion' },
});

AparênciaCopiar o link da seção

A appearance do assiny.fragments() ajusta o fragment à sua marca: o tema (assiny, night ou flat), a posição dos rótulos (above ou floating), o layout, 15 variáveis (cores, fonte, tamanho, espaçamento, raio e o anel de foco), regras por seletor e as fontes do catálogo. Item fora da lista ou da faixa é ignorado, só ele, com aviso no console. Os controles do fragment acima mostram o objeto appearance de cada escolha. Tudo em Aparência.

appearance: {
  theme: 'night',
  labels: 'floating',
  variables: { colorPrimary: '#9b8afb', borderRadius: '8px' },
}

OpçõesCopiar o link da seção

As opções de fragments.create('payment', opções):

Lista de métodos vazia ou com valor fora da lista é payment_method_types_invalid; qualquer outra opção com valor fora da lista, ou chave desconhecida, é options_invalid. Nos dois casos o fragment não monta e o erro chega pelo evento loaderror.

EventosCopiar o link da seção

payment.on('change', event => {
  botaoPagar.disabled = !event.complete;
});

No change:

• value.type: a aba selecionada, 'card', 'pix' ou 'combine'.
• value.save: só com 'card'; nesta versão, sempre false.
• value.parts: só com 'combine' e com o valor da primeira Parte maior que zero e menor que o total, mesmo com o cartão incompleto: [{ method, amount }, { method, amount }].
• complete: no cartão, número, validade e CVC completos e válidos; no PIX, sempre true; no Combinar, o valor válido e os cartões da combinação completos.
• empty: nada digitado; no PIX, sempre true.
• error: { code, message } do erro que está na tela, quando há.

O change nunca traz o que foi digitado no cartão.

ErrosCopiar o link da seção

Todo erro tem a forma { type, code, message }; em createPaymentMethod, também part, o índice da Parte que falhou. A message vem do catálogo do SDK, no locale da instância ('pt-BR' ou 'en'), nunca do servidor. Os quatro type são validation_error (o fragment conferiu sem ir à API), card_error (a API recusou o cartão), invalid_request_error (chamada ou configuração inválida) e api_error (a API não respondeu, o prazo acabou ou o SDK não conseguiu seguir).

Quando acontece cada um, e como as respostas da API viram estes códigos: Referência do SDK.