@onvo/onvo-pay-js
v1.2.7
Published
Loading wrapper and TypeScript types for the ONVO JS SDK
Downloads
14
Readme
Loading wrapper for the ONVO JS SDK
Installation
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>Prerequisites
- 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:
one_time
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);
}subscription
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
Usage
with package manager
Import the loadScript function for asynchronously loading the ONVO JS SDK.
loadScript(options)
returns a Promise that resolves with window.onvo after the JS SDK is finished loading.
Async/Await
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');
}Promises
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);
});without package manager one_time
<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>
without package manager subscription
<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>
Using with frameworks / libraries
React
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"
/>
);Angular 1
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>Angular 2
(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);
});
})();Vue
<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>