SDK web

El SDK web de ONVO permite renderizar un componente de pago en tu sitio usando una llave pública y un recurso creado desde tu servidor.

Referencia API relacionada

Instalación

Incluí el script del SDK.

<script src="https://sdk.onvopay.com/sdk.js"></script>

Prerrequisitos

Obtené tu llave secreta y llave pública desde el Dashboard de ONVO.
Creá una intención de pago o cargo recurrente desde tu servidor usando la llave secreta.
Pasá el identificador al frontend para renderizar el SDK.

Pago único

Creá la intención de pago del lado del servidor.

const { data, status } = await axios.post(
  "https://api.onvopay.com/v1/payment-intents",
  {
    currency: "USD",
    amount: 1000,
    description: "my first payment intent",
  },
  {
    headers: {
      Authorization: "Bearer your_secret_key",
    },
  },
);

if (status === 201) {
  console.log(data.id);
}

Renderizá el componente en el frontend.

<div id="container"></div>

<script>
  onvo.pay({
    onError: (data) => {
      console.log("error", data);
    },
    onSuccess: (data) => {
      console.log("success", data);
    },
    publicKey: "public-key",
    paymentIntentId: "cl4de13uc457301lor2o0q9w1",
    paymentType: "one_time",
    customerId: "cl40wvnby1653akslv93ktgdk",
  }).render("#container");
</script>

Cargo recurrente

Creá el cargo recurrente del lado del servidor.

const { data, status } = await axios.post(
  "https://api.onvopay.com/v1/subscriptions",
  {
    customerId: "cl40wvnby1653akslv93ktgdk",
    paymentBehavior: "allow_incomplete",
    items: [
      {
        priceId: "cl4ojmusz299201ldilvdfs8y",
        quantity: 1,
      },
    ],
  },
  {
    headers: {
      Authorization: "Bearer your_secret_key",
    },
  },
);

if (status === 201) {
  console.log(data.id);
}

Renderizá el SDK con paymentType: "subscription".

<div id="container"></div>

<script>
  onvo.pay({
    onError: (data) => {
      console.log("error", data);
    },
    onSuccess: (data) => {
      console.log("success", data);
    },
    publicKey: "public-key",
    subscriptionId: "cl4de13uc457301lor2o0q9w1",
    paymentType: "subscription",
    customerId: "cl40wvnby1653akslv93ktgdk",
  }).render("#container");
</script>

Enviar desde un botón externo

Usá manualSubmit: true para ocultar el botón interno del formulario y llamar submitPayment desde tu propio control.

<div id="container"></div>
<button id="outside">Submit Payment</button>

<script>
  const onvoInstance = onvo.pay({
    onError: (data) => console.log("error", data),
    onSuccess: (data) => console.log("success", data),
    publicKey: "public-key",
    paymentIntentId: "cl4de13uc457301lor2o0q9w1",
    paymentType: "one_time",
    manualSubmit: true,
  });

  onvoInstance.render("#container");

  document.getElementById("outside").addEventListener("click", () => {
    onvoInstance.submitPayment();
  });
</script>

Idioma

Podés enviar locale: "es" o locale: "en". Si no lo enviás, el idioma por defecto es español.

Referencia API relacionada​

Instalación​

Prerrequisitos​

Pago único​

Cargo recurrente​

Enviar desde un botón externo​

Idioma​