Ctrlk
Status

Iniciar Checkout

Após seguir as etapas anteriores, você conseguirá iniciar o SDK do checkout. Chame a função buildCheckout apresentada abaixo - será gerado o OneTimeToken, esse uuid deve ser usado para iniciar o pagamento.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SDK Integration</title>
    <script src="<https://sdk-web.y.uno/v1/static/js/main.min.js>"></script>
  </head>
  <body>
    <script>
      
	    async function buildCheckout() {
	    
		    const yuno = Yuno.initialize(public_key);
	    
        yuno.startCheckout({
          checkoutSession: checkoutSessionId,
          elementSelector: "#root",
          countryCode: "BR",
          language: "pt",
          showLoading: true,
          keepLoader: true,
          issuersFormEnable: true,
          renderMode: {
            type: "element",
            elementSelector: "#rootElement",
          },
          card: {
            type: "extends",
            cardSaveEnable: true,
          },
       
          onLoading: (args) => {
            console.log(args);
          },
       
          async yunoCreatePayment(oneTimeToken) {
	          console.log("oneTimeToken: " + oneTimeToken)
	          
            **await createPayment();**          
            
            yuno.continuePayment({ showPaymentStatus: true });
          },
          yunoPaymentMethodSelected(data) {
            console.log("onPaymentMethodSelected", data);
          },
          yunoPaymentResult(data) {
            console.log("yunoPaymentResult", data);
            yuno.hideLoader();
          },
          yunoError: (error) => {
            console.log("There was an error", error);
            yuno.hideLoader();
          },
        });

        yuno.mountCheckoutLite({
          paymentMethodType: "{{type}}",
        });
      }
    </script>
  </body>
</html>

Parâmetros:

  • public_key: envie a sua chave pública cadastrada na Yuno;

  • checkoutSessionId: você deverá enviar o checkoutSession que foi retornado na etapa “ Criar Sessão de Pagamento”;

  • paymentMethodType: você passará o type retornado na "Listar Métodos de Pagamento".

    • ⚠️Possíveis types: GOOGLE_PAY, APPLE_PAY

🚨Nota: A função createPayment() deve ser substituída pelo endpoint a seguir:

Criar Pedido

Quando a requisição for processada com sucesso você terá o seguinte retorno:

Documentações complementares:

https://docs.y.uno/docs/lite-checkout-ios - IOS

https://docs.y.uno/docs/lite-checkout-android - Android

Last updated

Was this helpful?