Loading wrapper for the ONVO JS SDK
To get started, install onvo-pay-js with npm
npm install @onvo/onvo-pay-jswith yarn
npm yarn @onvo/onvo-pay-jsor including the script
<script src="https://onvo-pay-widget.vercel.app/sdk.js"></script>- from you account dashboard get you
SecretandPublicKey - in order to get the
paymentIntentIdyou need to create one by doing a server side API request as follows:
const {data, status} = await axios.post('https://api.dev.onvopay.com/v1/payment-intents',
{
currency: 'USD',
amount: 1000,
description: 'my first payment intent',
},
{
headers: {
Authorization: 'Bearer you_secret_key',
},
},
);
if (status == 201) {
// Payment intent id to pass down to the front-end
console.log(data.id);
}const {data, status} = await axios.post('[https://api.dev.onvopay.com/v1/payment-intents](https://api.dev.onvopay.com/v1/subscriptions)',
{
"customerId": "cl40wvnby1653akslv93ktgdk",
"paymentBehavior": "allow_incomplete",
"items": [{
"priceId" : "cl4ojmusz299201ldilvdfs8y",
"quantity": 1
}]
},
{
headers: {
Authorization: 'Bearer you_secret_key',
},
},
);
if (status == 201) {
// subscription id to pass down to the front-end
console.log(data.id);
}For now we just support CRC or USD as currencies, and remember to pass the payment intent amount as cents.
read more information about our API here
Import the loadScript function for asynchronously loading the ONVO JS SDK.
returns a Promise that resolves with window.onvo after the JS SDK is finished loading.
import { loadScript } from "@onvo/onvo-pay-js";
let onvo;
try {
onvo = await loadScript();
} catch (error) {
console.error("failed to load the ONVO JS SDK script", error);
}
if (onvo) {
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');
}import { loadScript } from "@onvo/onvo-pay-js";
loadScript().then((onvo) => {
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');
}).catch((error) => {
console.error("failed to load the ONVO JS SDK script", error);
});<body>
<!-- Container for our ONVO component to render into -->
<div id="container"></div>
</body>
<script>
// Render the component and pass down props
onvo.pay({
onError : (data) => {
console.log('error', data);
},
onSuccess : (data) => {
console.log('success', data);
},
publicKey: 'public-key',
paymentIntentId : "cl4de13uc457301lor2o0q9w1",
paymentType: "one_time",
customerId: "cl40wvnby1653akslv93ktgdk", // Only required for subscriptions
}).render('#container');
</script><body>
<!-- Container for our ONVO component to render into -->
<div id="container"></div>
</body>
<script>
// Render the component and pass down props
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>import React from "react";
import ReactDOM from "react-dom";
const Pay = onvo.pay.driver("react", { React, ReactDOM });
...
return (
<Pay
onError ={(data) => {
console.log('error', data);
}}
onSuccess={(data) => {
console.log('success', data);
}}
publicKey="public-key"
paymentType="one_time"
paymentIntentId="cl4de13uc457301lor2o0q9w1"
/>
);onvo.pay.driver("angular", window.angular);
angular
.module("app", ["onvo-pay"])
.controller("appController", function ($scope) {
$scope.opts = {
onError : (data) => {
console.log('error', data);
return data;
},
onSuccess : (data) => {
console.log('success', data);
return data;
},
publicKey: 'public-key',
paymentIntentId : "cl4de13uc457301lor2o0q9w1",
};
});<body ng-app="app" ng-controller="appController">
<onvo-pay props="opts"></onvo-pay>
</body>(function () {
const Pay = onvo.pay.driver("angular2", ng.core);
const appComponent = ng.core
.Component({
selector: "my-app",
template:
<div id="app">
<pay [props]="{
onError: onError,
onSuccess: onSuccess,
publicKey: publicKey,
paymentIntentId: paymentIntentId
}"></pay>
</div>
,
})
.Class({
constructor: function () {
this.onError = (function(data) {
console.log(data);
return data;
}).bind(this);
this.onSuccess = (function(data) {
console.log(data);
return data;
}).bind(this);
this.publicKey = 'public-key';
this.paymentIntentId = 'cl4de13uc457301lor2o0q9w1';
});
}});
const appModule = ng.core
.NgModule({
imports: [ng.platformBrowser.BrowserModule, Pay],
declarations: [appComponent],
bootstrap: [appComponent],
})
.Class({
constructor: function () {},
});
document.addEventListener("DOMContentLoaded", function () {
ng.platformBrowserDynamic
.platformBrowserDynamic()
.bootstrapModule(appModule);
});
})();<div id="container">
<app></app>
</div>
<script>
const Pay = onvo.pay.driver("vue", window.Vue);
Vue.component("app", {
template: `
<onvo-pay
:on-error="onError"
:on-success="onSuccess"
:public-key="publicKey"
:payment-intent-id="paymentIntentId"
/>
`,
components: {
"onvo-pay": Pay,
},
computed: {
onError: function () {
return (data) => {
console.log(data);
return data;
}
},
onSuccess: function () {
return (data) => {
console.log(data);
return data;
}
},
publicKey: function () {
return 'public-key';
},
paymentIntentId: function () {
return 'cl4de13uc457301lor2o0q9w1';
},
},
});
const vm = new Vue({
el: "#container",
});
</script>