@onvo/onvo-pay-js

1.2.7 • Public • Published

Loading wrapper for the ONVO JS SDK

build status npm version bundle size npm downloads apache license

Installation

To get started, install onvo-pay-js with npm

  npm install @onvo/onvo-pay-js

with yarn

  npm yarn @onvo/onvo-pay-js

or including the script

  <script src="https://onvo-pay-widget.vercel.app/sdk.js"></script>

Prerequisites

  • from you account dashboard get you Secret and Public Key
  • in order to get the paymentIntentId you 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>

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.2.7
    0
    • latest

Version History

Package Sidebar

Install

npm i @onvo/onvo-pay-js

Weekly Downloads

0

Version

1.2.7

License

ISC

Unpacked Size

23.3 kB

Total Files

15

Last publish

Collaborators

  • abdelogeek
  • mrioscr