No momento do pagamento o cliente deverá ser direcionado para a tela de apresentação do QR Code, lá ele poderá visualizar algumas informações adicionais que irão lhe auxiliar na conclusão da compra.
Com o obejetivo de melhorar a experiência do cliente e os índices de conversão, a tela de apresentação do QR Code deve ser apresentada conforme exemplo:
Abaixo, disponiblizamos o script dessa tela para facilitar o processo de integração, basta substituir {Valor da Compra}, {Valor do Cashback} e {QR Code} pelos valores recebidos na resposta da criação da ordem.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500&display=swap" rel="stylesheet"> <title>QrCode</title> <style type="text/css"> .ame-qrcode-wrapper{ width: 100%; max-width: 340px; margin: 40px auto; } .ame-qrcode-wrapper p, .ame-qrcode-wrapper strong, .ame-qrcode-wrapper span{ font-family: 'Ubuntu'; font-size: 12px; } .ame-qrcode-wrapper .logo{ display: block; margin: 0 auto; } .ame-qrcode-wrapper .container{ margin-top: 20px; padding: 20px; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 15px; } .ame-qrcode-wrapper .payment-values{ text-align: center } .ame-qrcode-wrapper .payment-values strong{ display: block; } .ame-qrcode-wrapper .payment-values strong:first-child{ margin-bottom: 5px; } .ame-qrcode-wrapper .payment-values strong span{ color: #ED555D; font-size: 16px; } .ame-qrcode-wrapper .payment-values p strong{ display: inline; color: #4a90e2; } .ame-qrcode-wrapper img.qrcode{ display: block; margin: 10px auto; } .ame-qrcode-wrapper .payment-info > strong{ color: #ED555D; font-size: 16px; text-align: center; text-align: justify; } .ame-qrcode-wrapper .payment-info ul { list-style: none; padding: 0; } .ame-qrcode-wrapper .payment-info ul li { color: #aaaaaa; font-size: 12px; margin-bottom: 10px; } .ame-qrcode-wrapper .payment-info ul li p { height: 15px; display: flex; justify-content: flex-start; align-items: center; margin: 5px 0; } .ame-qrcode-wrapper .payment-info ul li strong, .ame-qrcode-wrapper .payment-info ul li img{ margin: 0 2px } .ame-qrcode-wrapper a { color: #aaaaaa; font-size: 12px; } </style> </head> <body> <div class="ame-qrcode-wrapper"> <img src="https://api.amedigital.com/vtex-checkout/images/logo-ame.svg" class="logo" alt="Ame digital"> <div class="container"> <div class="payment-values"> <strong>Valor da compra:</strong> <strong><span>R$ {{VALOR_COMPRA}}</span></strong> <p>Receba de volta <strong>R$ {{VALOR_CASHBACK}}</strong> em até 30 dias.</p> </div> <img class="qrcode" src="{{QR_CODE}}" alt="QR Code Ame Digital"> <div class="payment-info"> <strong>Pagar com a AME é mais fácil e rápido!</strong> <ul> <li> 1. Abra o aplicativo Ame Digital. Se você ainda <p> <span>não tem, baixe no</span> <img src="https://api.amedigital.com/vtex-checkout/images/google-logo.svg" alt="Google Play"> <span>ou na</span> <img src="https://api.amedigital.com/vtex-checkout/images/apple-logo.svg" alt="App Store"> </p> </li> <li> <p> 2. Clique em <strong>pagar</strong> <img src="https://api.amedigital.com/vtex-checkout/images/ame-small-logo.svg" alt="Ame Logo"> e aponte para o QR Code. </p> </li> <li> 3. Pronto, agora é só finalizar o pagamento com <strong>Ame</strong>. </li> </ul> <a href="https://www.amedigital.com/" target="_blank">Quer saber mais sobre a Ame? Clique aqui.</a> </div> </div> </div> </body> </html>