Botón de checkout

A continuación encontrarás un ejemplo del botón de Checkout.

Mostrar el checkout

El botón de Checkout ejecutará el Widget para que los clientes del comercio puedan realizar sus compras de una manera rápida y segura, puedes utilizar tu propio botón si así lo deseas necesario.

<button id="button-checkout-deuna" onclick="shouldOpen()">
  <img src="https://images.getduna.com/logo-full-deuna-D.svg" alt=" DEUNA"> Checkout
</button>

<script>
  function shouldOpen () {
    const config = {
      ... //Configuration of the previous point
    };
   deunaCheckout.configure(config).then(() => {
    deunaCheckout.shouldOpenCheckout().then((openCheckout) => {
      if (openCheckout) {
        deunaCheckout.show().then(()=>{
          // do something
        })
      }
    })
  });
  
  //-----  Or  -----
  await deunaCheckout.configure(config)
  const openCheckout = await deunaCheckout.shouldOpenCheckout()
  if(openCheckout){
    await deunaCheckout.show()
   }
 }
</script>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

#button-checkout-deuna{
  margin: 300px auto;
  font-family: 'Roboto', sans-serif;
  background: #283271;
  border-radius: 4px;
  color: #ffff;
  width: 205px;
  height: 34px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border:none;
  font-weight: 500;
  letter-spacing: -0.08em;
}

#button-checkout-deuna img{
  width:20px;
}

Mostrar el checkout

Perfecto! ya estamos listos