Using the NoFrixion Pay Element

Once a payment request has been created, the NoFrixion Pay Element can be used to allow the payer to fulfil the payment request.

The Pay Element requires minimal coding and provides a convenient way to handle sensitive payment details without then need to store them on merchant systems. For example, when processing a card payment the Pay Element communicates directly with our payment gateway so merchant systems do not need to process or store card details.

Inserting the Pay Element

Inserting the Pay Element into a web page involves the following 3 steps:

Place a link to the NoFrixion Pay Element JavaScript library in the page header.
Create a named <div> tag where you would like the Pay Element to appear.
Copy a small piece of JavaScript to the end of the page that creates NoFrixionPay Element object and loads it into the
you created in step 2.

The example below is quite minimal, but demonstrates each of the three steps above:

<html>
<head>
    <title>Payment</title>
  
<!-- STEP 1. -->   
    <script src="https://api-sandbox.nofrixion.com/js/payelement.js"></script>
    
</head>
  <body>     

<!-- STEP 2. -->    
    <div id="nf-payelement" style="border: none; width: 350px; height: 800px;"></div>

 <!-- STEP 3. -->     
    <script>
      window.onload = function() {
        var paymentRequestID = 'c95fa4df-bc2e-45e8-c611-08d9fccc58a3';
        var nfPayElement = new NoFrixionPayElement(paymentRequestID, 'nf-payelement', 'https://api-sandbox.nofrixion.com');
        nfPayElement.load();
      }
    </script>
    <!-- End Step 3. -->
  </body>
</html>

How does it work?
The NoFrixionPayElement ojbect created in step 3 takes three arguments:

a payment request ID
the name of the <div> in which to load the Pay Element (created in step 2 above).
the environment, the example above allows you to test your code in the sandbox. If you omit this parameter the Pay Element will default to the production environment.

When the Pay Element is loaded it uses the information from the specified payment request to populate the Pay Element. The Pay Element behaviour depends on the payment methods enabled in the payment request.

For example:

If the payment request is for card payments only, then only the card payment fields will be displayed.
If the CardAuthorizeOnly field is set to true, when the payment is submitted the transaction will only be authorized, the card will not be charged until a subsequent capture request is sent.