• França
lyra.com
Procurando
Categoria
Tags
pagina inicial
Suporte técnico

Aplicações Web mono página

A utilização de uma Aplicação web One Page (em inglês single-page-application ou SPA tem a vantagem):

  • de reduzir o tempo de carregamento.
  • de consumir menos recursos.

Etapas de integração

  • Carregar o formulário de pagamento
  • Iniciar o formulário de pagamento
  • Exibir o formulário de pagamento
  • Analisar o resultado do pagamento

Frameworks

  • Integração com Vue / React / Angular
  • Exemplos

Carregar o formulário de pagamento

No HEAD, :

  • Carregue nossa biblioteca JavaScript: src="https://static.lyra.com/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"

  • Você deve incluir a chave pública no parâmetro kr-public-key ( 3ª chave na tabela de chaves da API REST ).

  • Applique um tema (link: Temas ).

No BODY, :

  • Ocultas a formulário de pagamento, em um<div>.
Exemplo de código
<head>
    <!-- Javascript library. Should be loaded in head section -->
    <script type="text/javascript"
        src="https://static.lyra.com/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" 
        kr-public-key="69876357:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5">
    </script>

    <!-- theme and plugins. should be loaded in the HEAD section -->
    <link rel="stylesheet" href="https://static.lyra.com/static/js/krypton-client/V4.0/ext/classic-reset.min.css">
    <script type="text/javascript" src="https://static.lyra.com/static/js/krypton-client/V4.0/ext/classic.js"></script>

</head>
<body>
    ...
        <!--Hidden payment form -->
        <div id="paymentForm" class="kr-embedded" style="display:none">

            <!-- payment form fields -->
            <div class="kr-pan"></div>
            <div class="kr-expiry"></div>
            <div class="kr-security-code"></div>
    
            <!-- payment form submit button -->
            <button class="kr-payment-button"></button>
    
            <!-- error zone -->
            <div class="kr-form-error"></div>
        </div>
    ...
</body>

Iniciar o formulário de pagamento

Quando o comprador decide de pagar:

  • Crie um formToken durante uma chamada para o Web Service Charge/CreatePayment.

Por razões de segurança, a chamada é sempre realizada a partir do seu servidor EC (nunca no navegador) para evitar os erros CORS (Cross Origin Policy).

Exemplo de código
/**
* Called on 'checkout' click
*/
function onCheckout(){
    // Create the order, based on your cart
    var order = {
        "amount":   990,
        "currency": "EUR",
        "orderId":  "myOrderId-999999",
        "customer": {
            "email": "sample@example.com"
        }
    };

    // Call merchant server to get form token and then display payment form
    getFormToken(order, displayPaymentForm, alert);
}

/**

* Get form token from merchant server
* @param order
* @param resolve
* @param reject
*/
function getFormToken(order, resolve, reject){
    var request = new XMLHttpRequest();

    // Open a new connection, using the POST request on the URL endpoint
    request.open('POST', 'YOUR_SERVER/payment/init', true);
    request.setRequestHeader('Content-Type', 'application/json');

    request.onload = function (){
        if (request.status >= 200 && request.status < 400) {
            resolve(this.response);
        }
        else
        {
            reject("Invalid server response. Code " + request.status);
        }
    };

    request.onerror = function (error){
        reject(error);
    };

    // Send request
    request.send(JSON.stringify(order));
}
  • Chame seu servidor EC para validar o carrinho (controle e gestão dos estoques, valor do carrinho, etc).
Código de exemplo em Nó JS :

/* Init payment form */
router.post('/init', function(req, res, next){
  var order = req.body;

  // TO DO: check that order is valid

  // Call CreatePayment web service to create the form token
  request.post({
    url: "https://api.lyra.com/api-payment/V4/Charge/CreatePayment",
    headers: {
      'Authorization': 'Basic Njk4NzYzNTc6dGVzdHBhc3N3b3JkX0RFTU9QUklWQVRFS0VZMjNHNDQ3NXpYWlEyVUE1eDdN',
      'Content-Type': 'application/json'
    },
    json: order
  }, function(error, response, body){
    if (body.status === 'SUCCESS')
    {
      // Send back the form token to the client side
      res.send(body.answer.formToken);
    }
    else
    {
      // Do your own error handling
      console.error(body);
      res.status(500).send('error');
    }
  });
});

Exibir o formulário de pagamento

Depois de gerado o formToken :

  • Exibir o formulário, oculto por padrão.
  • Associe-o ao formulário: KR.setFormToken.
  • Integre a função KR.onSubmit para receber a notificação na hora de retornar para a loja (lado navegador).
Exemplo de código
/**
* Display the payment form with the argument form token
* @param formToken
*/
function displayPaymentForm(formToken){
    // Show the payment form
    document.getElementById('paymentForm').style.display = 'block';

    // Set form token
    KR.setFormToken(formToken);

    // Add listener for submit event
    KR.onSubmit(onPaid);
}

Analisar o resultado do pagamento

No final do pagamento, analise o resultado do pagamento:

  • A partir do IPN (Instant Payment Notification), durante uma chamada de servidor para servidor. Mais informações: Análise do IPN (URL de notificação) .

  • Do retorno à loja, ao retornar ao navegador usando o método KR.onSubmit .

    • Use uma função personalizadaonPaidpara exibir uma mensagem de acordo com o status da transação.
Exemplo de código
/**
 * Called when payment is finished
 * @param event
 */
function onPaid(event){
  if (event.clientAnswer.orderStatus === "PAID") {
    // Remove the payment form
    KR.removeForms();

    // Show success message
    document.getElementById("paymentSuccessful").style.display = "block";
  } else {
    // Show error message to the user
    alert("Payment failed !");
  }
}

Integração com Vue / React / Angular

A integração com frameworks JavaScript compilados (type Vuee, React ou Angular) requer o uso da biblioteca embedded-form-glue.

  • link no Github.

Vantagens

  • Pré-carregamento da biblioteca para uma exibição mais rápida em redes lentas.
  • Gerenciamento da configuração quando a aplicação ainda não foi carregada.
  • Permite adicionar, apagar e exibir de novo o formulário facilmente.

Trabalhar em um ambiente assíncrono

Em um ambiente assíncrono, todos os eventos e métodos retornam promessas. O método then() contém duas propriedades:

  • KR: a referência de biblioteca JavaScript é sempre retornada, o que permite fazer o string de promessas.
  • result: o resultado da operação, pode estar não definido ou ausente se nenhum resultado.
Exemplo de código
KR.validateForm().then( ({KR, result}) => {

    /* there is no error */
    /* result == null */
    }

)
.catch( ({KR, result}) => {

    /* Get the error message */
    var code = result.errorCode;
    var message = result.errorMessage;
    var myMessage = code + ": " + message;
    console.log(myMessage);

    /* if you have defined a callback using      */
    /* result.onError(), you can trigger it calling: */
    return result.doOnError();
    }

);

Exemplos

Framework Descrição
Angular exemplo de integração para Angular
ember exemplo de integração para Ember
ionic exemplo de integração para Ionic
next exemplo de integração para Next
React exemplo de integração para React
server exemplo de integração para Server
svelte exemplo de integração para Svelte
ver exemplo de integração para Vue
require.js exemplo de integração com RequireJS
Jobs
Legal
GDPR
25.25.0-1.11