Use the direct link, you can load QiotaPay.js directly. Once loaded, qiotapay will be available on your website.
Adding the <script> tag loads Qiota’s JavaScript file.You may include this either within your <head> tag or inside the <body> part of your HTML, before the end of the page.
...
<script src= "https://[beta/www].qiota.com/assets/getQiotaPay.js" ></script>
...


            
                                                            

The <div> qiota tag container                                                        

The getQiotaPay.js file allows you to render a Qiota widget on the client side.
 Configure the container and form where the QiotaPay Widget will add the payment method nonce. Make sure to replace TOKEN CLIENT with your generated client token.


...
<div class= "qiota" >   </div>
...
                                                  

The widget will appear exactly where this <div> tag is included on your page. When the getQiota.js file is loaded, this <div> tag will get populated.
 You should integrate this script before the end body tag.

                       

Create a customer and call widget 

Once get the authorization you need to create a new customer with all values reuquired. You can see here all valures required            
            var q_token = "09090909";                 //required
            var q_typepay = "CB";                   //required
            var q_modepay = 0; // 0=subscription    //required 
            var q_urlcallback = "your.domaine.com/qiota/callback"; //required 

            var q_customer =  {
                person: {
                    title: "mr",                //required
                    name: "Anthony",               //required
                    lastname: "LeGrand",         //required
                    birthdate : "19800101",   //required
                    email: "[email protected]",   //required
                    personAddress: {
                        recipientName: 'Jean Dupont',       //required
                        line1: '5 rue de la Paix',          //required
                        line2: '4eme etage porte droite',   //required
                        city: 'Paris',                      //required
                        country: 'France',                  //required
                        postalCode: '75001',                //required
                        phone: '0612345678'                 //required
                    },
                    metaData:{
                        shippingAddress: {
                            recipientName: 'Dominique Dupont',
                            recipientEmail: '[email protected]',
                            line1: '21 avenue Gambetta',
                            line2: '',
                            city: 'Lyon',
                            country: 'France',
                            postalCode: '69001',
                            phone: '0612345678'
                        }
                    }
                },
            };
            var q_order = {
                product: {
                    partner: "test.aboshop.fr",
                    editor: "687",         //required
                    company: "1",         // required
                    reference_id: "11111",     //required
                    codetarif: "QIOTA",     //required
                    description: "Abonnement magazine order : QIOTA", //required
                    amount: 1599,    //required
                    category: 6
                }
            };


                                                                                     // If Success you can notify the customer by email or other about transaction successfully completed
                                                                                     // return : status :success/error, IDUser, IDTransaction 


                                
                        
            // Create a customer
            createCustomer(q_token, q_customer, function(response) {
            // If there was a problem creating the customer return with error message
            // This could happen if there is a network error or if the authorization is invalid.   
                if(!response.valid){ 
                    console.log(response.responseText)
                    return;
                }
                    // Set up the ID user created.
                    q_idclient = response.user 
                    // The QiotaPay widget will be rendered in an html element : <div class="qiota"></div>
                    renderQiotaPay(q_token, q_typepay, q_modepay, q_idclient, q_order, q_urlcallback); 
            });

                                                      

The qiota div will be populated for login of the user. After login success, the Qiota system checks whether the article exists and whether the access right is still valid, and sends a parms on the UrlCallBack by the Get method. 



                                               
Response                                                   

Once the QiotaPay complete the process, the system sends on  URLCALLBACK  the informations about Status process : success or error, ID user created, ID transaction created.
With this informations you can notify by email a user that he has been successfully charge.


   

Update credit card

For the update of the bank card t is not necessary to create a Costumer or Order.

Once the div qiota has been integrated and the response returned all you have to do is call the RenderQiotaPay function with the value q_update set to true as follows 
            var q_updated = true; //required
            var q_token = "09090909";                 //required
            var q_typepay = "CB";                   //required
            var q_modepay = 0; // 0=subscription    //required 
            var q_urlcallback = "your.domaine.com/qiota/callback"; //required 
    
             // Set the Contact ID mahalo  from SSO user created.
                    q_idclient = ID Contact mahalo
                 
                    renderQiotaPay(q_token, q_typepay, q_modepay, q_idclient, q_order, q_url_callback, q_paywall_id, q_scenario_id, q_logo, q_updated); 
            });