Realizar el pago con el SDK de Checkout Transparente

Para completar el pago, deberás consumir nuestro endpoint de POST /Paymentsde la API de Checkout Transparente desde tu backend usando tu token de autenticación como se muestra en el siguiente ejemplo:

async function handleSubmit(e) {
  e.preventDefault();

  // Llama al card_token_endpoint, usando el método cardToken()
  const cardToken = await card.cardToken();
 

  const payload =  {
    amount: 600,
    description: "Test Transparent checkout SDK",
    payment_method: {
       token: cardToken.id
    }
  };
    fetch("https://api.payclip.com/payments", {
    method: "POST",
    body: JSON.stringify(payload),
    headers: {
      "Content-Type": "application/json",
    },
  })
    .then((response) => response.json())
    .then((data) => {
      console.log(
        "%c Response!",
        "color: blue; font-size: 20px; background-color: yellow;",
        data
      );
    })
    .catch((error) => {
      console.error(error);
    });
}

// Envía el formulario
document
  .querySelector("#payment-form")
  .addEventListener("submit", async (e) => {
    await handleSubmit(e);
  });

Autenticación 3DS

Cuando un cargo requiere la autenticación 3DS, el parámetro de respuesta "pending_action" tendrá una URL; esta URL te servirá para redirigir a tus clientes para realizar la autenticación.

"pending_action": {
        "type": "open_modal",
        "url": "https://3ds.payclip.com?transaction=1234"
    }

Para saber más sobre la autenticación 3DS revisa la documentación de la API de Checkout Transparente.