Now Printing Money

    @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>

    Install

    npm i @onvo/onvo-pay-js

    DownloadsWeekly Downloads

    5

    Version

    1.2.7

    License

    ISC

    Unpacked Size

    23.3 kB

    Total Files

    15

    Last publish

    Collaborators

    • abdelogeek
    • mrioscr