PayHQ iFrame Demo Test Server Sample

Customers can safely pay for their checkout transactions using an Iframe. On the Pay page of your online store, it will be shown in an iframe. Customers will never have to leave your store page to pay for an order.


1. Link PayHQ Javascript library 2. Style for card input container
              
                .inputFieldContainer {
                  border: 1px solid #E5E9EC;
                  height: 40px;
                  margin-bottom: 10px;
                }
              
            
3. Set Container with div
              
               < div id="cardNumber_container" class="inputFieldContainer" >
               < div id="cardExpiry_container" class="inputFieldContainer" >
               < div id="cardCvv_container" class="inputFieldContainer" >
              
            
4. Set PayHQ Object with Javascript

              
                 START SCRIPT TAG
                    // 4.1 select the payfirma test environment
                    // LIVE, TEST, SANDBOX
                    const environment = 'TEST' 

                    // 4.2 set apiKey for authorization token
                    const apiKey = "iframe access token";
                    
                    // 4.3 set options
                    var options = {
                      fields: {
                        cardNumber: {
                          selector: "#cardNumber_container",
                          placeholder: "Credit Card *",
                        },
                        cardExpiry: {
                          selector: "#cardExpiry_container",
                          placeholder: "Expires (MM/YY) *"
                        },
                        cardCvv: {
                          selector: "#cardCvv_container",
                          placeholder: "CVV *"
                        }
                      },
                      // set the CSS styles to apply to the payment fields
                      // camelCases instead dash-separated CSS attributes  
                      style: {
                        input: {
                                "fontFamily": "robotoregular,Helvetica,Arial,sans-serif",
                                "fontWeight": "700",
                                "fontSize": "1em",
                                "color": "#ff0000",
                                "backgroundColor": "#a2d157",
                        }
                      } 
                    };

                    // 4.4 init payfirma object
                    const payfirmaObject= Payfirma.payfirmaInit(environment, apiKey,options);
                      payfirmaObject.NumberField().render(options.fields.cardNumber.selector);
                      payfirmaObject.ExpiryField().render(options.fields.cardExpiry.selector);
                      payfirmaObject.CVVField().render(options.fields.cardCvv.selector);
                 
                    // 4.5 set button event 
                    document.querySelector('button#payNow').addEventListener('click', () => {
                      // 4.6 Get Form fields data
                      const formData = {first_name,last_name,email,amount}
      
                      // 4.7 get card token  
                      payfirmaObject.tokenize().then((response)=>{
                          // Set result
                          document.querySelector('#cardtoken-result').innerText = response.payment_token;

                          // If you need to check payment token expiry, 
                          // you need to make a logic with response.expires_in
                          // console.log('payment token will expire in ',response.expires_in + " seconds")
                          
                          // 4.8 Make a sale transaction with card token.
                          makeSaleRequest(response.payment_token, formData);
      
                      }).catch(error => {
                        // There was an error tokenizing your card data
                        console.log('error from server')
                        console.log(error);
                      })
                    });

                  END SCRIPT TAG
              
            

5. Testing Card Data




www.payfirma.com