Skip to main content

Web SDK

The ONVO web SDK lets you render a payment component on your site using a publishable key and a resource created from your server.

Installation​

Include the SDK script.

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

Prerequisites​

  • Get your secret key and publishable key from the ONVO Dashboard.
  • Create a payment intent or subscription from your server using the secret key.
  • Pass the identifier to the frontend to render the SDK.

One-time payment​

Create the payment intent server-side.

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);
}

Render the component on the 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>

Subscription​

Create the subscription server-side.

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);
}

Render the SDK with 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>

Submit from an external button​

Use manualSubmit: true to hide the form's internal button and call submitPayment from your own 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>

Locale​

You can send locale: "es" or locale: "en". If you omit it, Spanish is the default.