Documentação
Start typing to search…

Atualizações no template

Este documento descreve todas as alterações obrigatórias para que o template do checkout seja compatível com Click to Pay (Mastercard). Caso a agência sobrescreva qualquer um dos arquivos citados abaixo, ela deve aplicar as atualizações manualmente.

Arquivos Impactados

📁 Novos Arquivos

ArquivoDescrição
Assets/JS/wake_payment_mastercard_click_to_pay.jsScript principal com toda a lógica de integração Click to Pay
Components/checkout/wake_checkout_click_to_pay_cards.htmlComponente HTML para exibição de cartões salvos e modais

📁 Arquivos JavaScript Modificados

Arquivo
Components/checkout/close/wake_checkout_single_payment_area.html
Snippets/wake_payment_methods_list.html
Components/wake_checkout_scripts.html
Components/checkout/close/wake_checkout_summary_information_close.html
Components/checkout/close/wake_checkout_multipayment_values.html
Components/checkout/confirmation/wake_checkout_confirmation_scripts.html
Snippets/wake_checkout_total_snippet.html

📁 Queries GraphQL Modificadas

ArquivoCampo adicionado
Queries/wake_payment_methods_list.graphqlhasClickToPay

Análise de Mudanças

Nova Função: wakeClickToPayAsync()

Localização: Assets/JS/wake_payment_functions.js

Esta função é o ponto de entrada para inicializar o Click to Pay após a seleção do método de pagamento.

// NOVO - Adicionado no final da função selectPaymentWhenRendering()
if(!isMultiPayment) {
    await wakeClickToPayAsync();
}

O que faz:

  • Busca o DPA ID do input hidden #clicktopay-dpaid
  • Chama wakeInitializeMastercardClickToPayAsync() para inicializar o SDK
  • Se não houver suporte, remove a classe ctp-active do wrapper

Nova Mutation GraphQL

Nova mutation checkoutHandleClickToPay para controlar se o checkout usará Click to Pay:

mutation checkoutHandleClickToPay(
    $checkoutId: Uuid!
    $customerAccessToken: String
    $useClickToPay: Boolean!
    $recaptchaToken: String
) {
    checkoutHandleClickToPay(
        checkoutId: $checkoutId
        customerAccessToken: $customerAccessToken
        useClickToPay: $useClickToPay
        recaptchaToken: $recaptchaToken
    ) {
        isSuccess
    }
}

Novos Campos GraphQL

Em wake_payment_methods_list.graphql:

hasClickToPay  # Boolean - indica se o método de pagamento suporta Click to Pay

Guia de Migração para Agências (CRÍTICO)

✅ Checklist de Verificação

Se sobrescreveu Assets/JS/wake_payment_functions.js:

  • Adicione a chamada wakeClickToPayAsync() no final da função selectPaymentWhenRendering():
if(!isMultiPayment) {
    await wakeClickToPayAsync();
}
  • Atualize o carregamento de scripts para usar await:
// ANTES
if (allScriptPromises.length > 0) {
    Promise.all(allScriptPromises)
        .then(() => {
            console.log("Todos os scripts foram carregados com sucesso.");
            Fbits.Gateway.ExecuteLoadedCallbacks();
        })
        ...
}

// DEPOIS
if (allScriptPromises.length > 0) {
    await Promise.all(allScriptPromises)
        .then(async () => {
            console.log("Todos os scripts foram carregados com sucesso.");
            await Fbits.Gateway.ExecuteLoadedCallbacks();
        })
        ...
}
  • Adicione a função wakeClickToPayAsync() no final do arquivo:
/**
 * Obtêm o DPA ID e inicializa o Click to Pay
 */
async function wakeClickToPayAsync() {
    const mastercardClickToPayDpaId = document.querySelector("input[id='clicktopay-dpaid']");
    if(mastercardClickToPayDpaId && wakeInitializeMastercardClickToPayAsync) {
        await wakeInitializeMastercardClickToPayAsync(mastercardClickToPayDpaId.value);
    } else {
        const clickToPayWrapper = document.querySelector('.wake-payment-method-item.wake-has-click-to-pay');
        if (clickToPayWrapper) {
            clickToPayWrapper.classList.remove('ctp-active');
        }
    }
}

Se sobrescreveu Components/wake_checkout_scripts.html:

  • Adicione o script wake_payment_mastercard_click_to_pay na lista de scripts:
<!-- ANTES -->
{{ wake_scripts scripts: ["wake_payment_functions", "wake_fbits_gateway", "wake_suggested_cards"] }}

<!-- DEPOIS -->
{{ wake_scripts scripts: ["wake_payment_mastercard_click_to_pay", "wake_payment_functions", "wake_fbits_gateway", "wake_suggested_cards"] }}

Se sobrescreveu Snippets/wake_payment_methods_list.html:

  • Adicione a classe CSS para Click to Pay no elemento de método de pagamento:
<!-- ANTES -->
<div class="wake-payment-method-item{{ if is_disabled }} disabled{{ end }}"

<!-- DEPOIS -->
<div class="wake-payment-method-item{{ if is_disabled }} disabled{{ end }}  {{ if payment.has_click_to_pay }} wake-has-click-to-pay ctp-active{{ end ~}}"
  • Adicione o ícone SVG do Click to Pay e bandeiras:
<!-- ADICIONE após o span.payment-name -->
{{~ if payment.has_click_to_pay ~}}
    <svg width="40" height="22" viewBox="0 0 40 22" fill="none" xmlns="http://www.w3.org/2000/svg">
        <!-- SVG do ícone Click to Pay - copie do arquivo original -->
    </svg>
{{~ else ~}}
    <img src="{{ payment.image_url }}" width="50">
{{~ end ~}}

<!-- ADICIONE após o fechamento do label -->
{{~ if payment.has_click_to_pay ~}}
    {{~ wake_checkout_click_to_pay_cards show_brands_only: true ~}}
{{~ end ~}}

Se sobrescreveu Components/checkout/close/wake_checkout_single_payment_area.html:

  • Adicione a renderização do componente Click to Pay cards na seção de cartão:
<!-- ADICIONE no início de data-gateway-cartao, antes de wake_checkout_suggested_cards -->
{{~ if has_suggested_cards ~}}
    {{~ if payment_method.has_click_to_pay ~}}
        {{~ wake_checkout_click_to_pay_cards show_new_card_option: false ~}}
    {{~ end ~}}
    
    {{~ wake_checkout_suggested_cards card_count: 0 ~}}
    ...
{{~ else ~}}
    {{~ if payment_method.has_click_to_pay ~}}
        {{~ wake_checkout_click_to_pay_cards show_new_card_option: true ~}}
        <div class="wake-new-card-wrapper" data-card-count="0">
            {{~ wake_checkout_payment_fake_form payment_id: payment_method.id show_save_card: payment_method.save_card ~}}
        </div>
    {{~ else ~}}
        {{~ wake_checkout_payment_fake_form payment_id: payment_method.id show_save_card: payment_method.save_card~}}
    {{~ end ~}}
{{~ end ~}}
  • Adicione os novos componentes de UI após {{~ wake_checkout_payment_selected_installment ~}}:
{{~ if payment_method.has_click_to_pay ~}}
    {{~ discount_value = payment_method.click_to_pay_discount_value | math.abs | math.format "c" "pt-BR" ~}}
    <p class="wake-click-to-pay-discount" style="display: none;" data-discount-value="{{ discount_value }}">
        {{ discount_value }} de desconto Mastercard
    </p>
    
    <div class="wake-checkout-consent-wrapper" style="display: none;">
        <!-- Adicione todo o bloco de consentimento do arquivo original -->
    </div>

    <!-- Modal de autenticação Click to Pay -->
    <div id="modal-clicktopay-authenticate" class="wake-checkout-modal-autenticate ease-out opacity-100 hidden" ...>
        <!-- Adicione todo o conteúdo do modal do arquivo original -->
    </div>

    <!-- Modal de educação Click to Pay -->
    <div id="modal-clicktopay-education" class="wake-checkout-modal-education ease-out opacity-100 hidden" ...>
        <!-- Adicione todo o conteúdo do modal do arquivo original -->
    </div>
{{~ end ~}}

Se sobrescreveu queries GraphQL:

  • Em wake_payment_methods_list.graphql - adicione o campo:
hasClickToPay
❗️

Atenção!!!!!! Dependência de Scripts:

O script wake_payment_mastercard_click_to_pay.js DEVE obrigatoriamente ser carregado ANTES de wake_payment_functions.js, pois define funções que são chamadas por ele.

  1. CSS Necessário: adicione estilos para as novas classes:
    • .wake-has-click-to-pay
    • .ctp-active
    • .wake-click-to-pay-cards
    • .wake-clicktopay-cards-list
    • .wake-checkout-consent-wrapper
    • .wake-ctp-payment-overlay
  2. Cookies: O Click to Pay utiliza o cookie wake_ctp_recognition_token.
  3. Popups: O checkout com Click to Pay utiliza popups para validação (obrigatório para passkey).

Resumo das Alterações Mínimas Necessárias

ArquivoAção
Components/wake_checkout_scripts.htmlAdicionar script wake_payment_mastercard_click_to_pay
Assets/JS/wake_payment_functions.jsAdicionar wakeClickToPayAsync() e atualizar carregamento
Assets/JS/wake_fbits_gateway.jsRemover cache de params, atualizar callbacks
Components/checkout/close/wake_checkout_single_payment_area.htmlAdicionar componentes Click to Pay
Snippets/wake_payment_methods_list.htmlAdicionar classes e ícones Click to Pay
Queries GraphQLAdicionar campos hasClickToPay e relacionados

Updated about 21 hours ago