ViewPay React JS: Guide de démarrage

Ce guide a pour objectif de vous guider dans la mise en place du widget JS ViewPay dans votre site web developper en reactJS.

Installation

Il faut lancer la commande suivant pour installer viewpay

>npm i viewpay

Après avoir terminé ceci, vous pouvez importer le composant Viewpay dans votre code reactJS.

import Viewpay from "viewpay/dist/Viewpay";

Si vous êtes sous typescritp, créer un fichier Viewpay.d.ts avec le contenu

declare module 'viewpay/dist/Viewpay';

Vous pouvez actuelement utiliser le composant Viewpay.

Exemple d'utilisation

import React from 'react';
import Viewpay from "viewpay/dist/Viewpay";

function App() {
  function complete_callback(){
    console.log("viewpay completed");
  }
  function existads_callback(){
    console.log("viewpay existeads");
  }
  function noads_callback(){
    console.log("viewpay noads");
  }

  return (
    <div className="App">
      <Viewpay siteId="1672e275c4ee7f34"
                 widthCadre="650px" heigthCadre="450px"
                 widthBtn="425px" heigthBtn="75px"
                 complete_callback={complete_callback}
                 existads_callback={existads_callback}
                 noads_callback={noads_callback}
            ></Viewpay>
    </div>
  )
}
export default App;

##Les parametres

• siteId : l'id de l'éditeur (obligatoire)

• widthCadre : width du cadre souhaiter (valeur et utité css) (optional)

• heigthCadre : heigth du cadre souhaiter (valeur et utité css) (optional)

• widthBtn : width du bouton/loading viewpay souhaité (optional)

• heigthBtn : heigth du bouton/loading viewpay souhaité (optional)

• complete_callback : fonction callback lorsque le parcours viewpay est terminé (utilisateur obtien la recompense) (optional)

• existads_callback : fonction callback lorsqu'une pub existe (optional)

• noads_callback : fonction callback lorsqu'une pub n'existe pas (optional)

Exemple dans codesandbox : https://codesandbox.io/s/gallant-shaw-owj1s?file=/src/App.js