Introduction

In this guide you'll learn how to to implement the NoFrixion Web component for card payments while retaining full control over the design of the payment flows!

NoFrixion's web component for card is designed for businesses and developers who require a high degree of customization for the payment user interface to match the surrounding design. Using it, developers can design and implement their own custom UX/UI for payment processing, while still benefiting from the security and reliability of NoFrixion's payment processing functionality.

On the other hand, for businesses that prefer a ready-to-use default user interface that is visually appealing and easy to use, NoFrixion's Pay Element offers a fully designed pay element. This default user interface is optimized to provide a seamless payment processing experience for both businesses and customers. To learn more about the fully designed pay element, you can check out this link.

🚧
Note that the URLs provided in this guide point to the Production environment, so make sure you're using the correct one (sandbox/production) accordingly.

	Production	Sandbox
API	https://api.nofrixion.com	https://api-sandbox.nofrixion.com

💻 Implementation Guide

ℹ️ Key concepts

Web components

Nofrixion uses Custom Elements, a part of the Web Components standard, to render card inputs layout on websites. Custom Elements allow developers to define their own HTML tags with custom behavior and semantics, which makes it possible to create reusable, encapsulated components. By leveraging Custom Elements, Nofrixion provides a flexible and customizable solution for integrating card payments into web applications.

Payment Request

A Payment Request is an object that represents the merchant's intention to get paid, similar to an invoice. It contains information such as the amount, currency, and available payment methods. Since the Pay Element is the UX/UI representation of a Payment Request, you'll need to create one via an API call from your server, which will be used as a parameter when creating the Pay Element.

🔐 Security

Due to the high security standards required for handling transactions, the NoFrixion Pay Element provides a convenient way to handle sensitive payment details without storing them on merchant systems. When processing a card payment, the Pay Element communicates directly with our payment gateway, so merchant systems don't need to process or store card details.

📃 Preconditions

As mentioned in the Key Concepts, the NoFrixion Pay Element needs to be linked with a payment request. To create a Payment Request, you need to execute an API call from your system so that you can pass the payment request ID to the Pay Element. If you want to know how to do this, please click click here.

To make your life easier, here's a cURL command that you can copy and paste to create a Payment Request.

You'll need to replace {YOUR_MERCHANT_TOKEN} with your actual merchant token. Here is how to get your merchant token.

curl -s --location --request POST 'https://api.nofrixion.com/api/v1/paymentrequests' \
  --header 'Authorization: Bearer {YOUR_MERCHANT_TOKEN}' \
  --header 'Content-Type: application/x-www-form-urlencoded' \
  --data-urlencode 'amount=10.99' \
  --data-urlencode 'Currency=EUR' \
  --data-urlencode 'PaymentMethodTypes=card'

curl -s --location --request POST 'https://api-sandbox.nofrixion.com/api/v1/paymentrequests' \
  --header 'Authorization: Bearer {YOUR_MERCHANT_TOKEN}' \
  --header 'Content-Type: application/x-www-form-urlencoded' \
  --data-urlencode 'amount=10.99' \
  --data-urlencode 'Currency=EUR' \
  --data-urlencode 'PaymentMethodTypes=card'

🛠️ Step-by-step

The entire Pay Element logic, including security, rendering, and displaying of payment options, is inside the NoFrixion Javascript library. You can find this library in NoFrixion's CDN at https://cdn.nofrixion.com/nofrixion-nextgen.js. Add this library to your <head> tag.
```
<head>
  <meta charset="UTF-8" />
  
  
  <script src="https://cdn.nofrixion.com/nofrixion-nextgen.js"></script>
  
</head>
```

Create your own layout to accept card details keeping the following considerations in mind:

<div> for card number input - In order to load the card number input iFrame for the headless pay element, you will need to provide the ID of the <div> where it should be loaded. In the code below, this ID is set to cardNumber-container.
<div> for card security code (CVV) input - In order to load the card security code input iFrame for the headless pay element, you will need to provide the ID of the <div> where it should be loaded. In the code below, this ID is set to cardSecurityCode-container.
<input type="text"> for expiry month - To ensure that the JavaScript can read the value of the expiry month input field, you must set its ID to nf-expiryMonth.
<input type="text"> for expiry year - To ensure that the JavaScript can read the value of the expiry year input field, you must set its ID to nf-expiryYear.
<div> for displaying errors - If you want to display errors that occur during payment processing, you must provide the ID of the <div> where they should be displayed. In the code below, this ID is set to error-container.

Here is an example of how the layout may look like.

<body>
  <!-- 👇🏻 Create your own card details layout -->
  <div>
    <!-- 👇See step V. Create <div> tag where Errors will be injected -->
    <div id="error-container" role="alert" class=""></div>
    <form id="cardPaymentForm" onsubmit="event.preventDefault();">
      <div>
        <label>Card number <span className="required">*</span></label>

        <!-- 👇See step i. Create <div> tag where card number secure iFrame will be injected -->
        <div id="cardNumber-container" style="height: 30px; width: 200px"></div>
      </div>
      <div>
        <div>
          <label>Expiry Date <span class="required">*</span></label>
          <div>
            <!--See step iii-->
            <input
              type="text"
              id="nf-expiryMonth"
              placeholder="MM"
              size="2"
              maxLength="{2}"
              inputMode="numeric"
            />
            <span class="">/</span>
            <!--See step iv-->
            <input
              type="text"
              id="nf-expiryYear"
              placeholder="YYYY"
              size="4"
              maxLength="{4}"
              inputMode="numeric"
            />
          </div>
        </div>
        <div>
          <label>Card Code (CVC) <span className="required">*</span></label>

          <!-- 👇See step ii. Create <div> tag where card security code secure iFrame will be injected -->
          <div
            id="cardSecurityCode-container"
            style="height: 30px; width: 40px"
          ></div>
        </div>
      </div>

      <!-- 👇🏻 Call nfpayByCard() method on submit to process card payment -->
      <button type="submit" name="nf-card-submit">Pay by card</button>
    </form>
  </div>
</body>

In order to process the card payment on the click of submit button, you need to invoke the nfpayByCard() method of NoFrixion javascript library.

<!-- 👇🏻 Call nfpayByCard() method on submit to process card payment -->
<button 
	onclick="window.nfpayByCard()" 
	type="submit"
	name="nf-card-submit">
  	Pay by card
</button>

Use NoFrixion web component for card <nofrixion-card-headless> as follows:

🔎
Replace {YOUR_PAYMENT_REQUEST_ID} with the actual value you got from the Payment Request creation call (please read the Preconditions section).

<nofrixion-card-headless
        paymentrequestid='{YOUR_PAYMENT_REQUEST_ID}'
        apiurl="https://api.nofrixion.com/api/v1"
				cardnumberinputid="{YOUR_CARD_NUMBER_DIV_ID}"
				cardsecuritycodeinputid="{YOUR_CARD_SECURITY_CODE_DIV_ID}"
				errordivid="{YOUR_ERROR_DIV_ID}"
				>
</nofrixion-card-headless>

<nofrixion-card-headless
        paymentrequestid='{YOUR_PAYMENT_REQUEST_ID}'
        apiurl="https://api-sanbox.nofrixion.com/api/v1"
				cardnumberinputid="{YOUR_CARD_NUMBER_DIV_ID}"
				cardsecuritycodeinputid="{YOUR_CARD_SECURITY_CODE_DIV_ID}"
				errordivid="{YOUR_ERROR_DIV_ID}"
				>
</nofrixion-card-headless>

🏃‍♂️💨 TL;DR

Create a Payment Request by calling the MoneyMoov API

Replace {YOUR_PAYMENT_REQUEST_ID} in the code example below with your payment request id from the previous step

You're all done 😎

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    
    <!-- 👇🏻 Add NoFrixion JavaScript library  -->
    <script src="https://cdn.nofrixion.com/nofrixion-nextgen.js"></script>
  </head>
  <body>
    <!-- 👇🏻 Create your own card details layout -->
    <div>
      <!-- 👇🏻 Create <div> tag where Errors will be injected -->
      <div id="error-container" role="alert" class=""></div>
      <form id="cardPaymentForm" onsubmit="event.preventDefault();">
        <div>
          <label>Card number <span className="required">*</span></label>

          <!-- 👇🏻 Create <div> tag where card number secure iFrame will be injected -->
          <div
            id="cardNumber-container"
            style="height: 30px; width: 200px"
          ></div>
        </div>
        <div>
          <div>
            <label>Expiry Date <span class="required">*</span></label>
            <div>
              <input
                type="text"
                id="nf-expiryMonth"
                placeholder="MM"
                size="2"
                maxLength="{2}"
                inputMode="numeric"
              />
              <span class="">/</span>
              <input
                type="text"
                id="nf-expiryYear"
                placeholder="YYYY"
                size="4"
                maxLength="{4}"
                inputMode="numeric"
              />
            </div>
          </div>
          <div>
            <label>Card Code (CVC) <span className="required">*</span></label>

            <!-- 👇🏻 Create <div> tag where card security code secure iFrame will be injected -->
            <div
              id="{cardSecurityCode-container}"
              style="height: 30px; width: 40px"
            ></div>
          </div>
        </div>

        <!-- 👇🏻 Call nfpayByCard() method on submit to process card payment -->
        <button onclick="window.nfpayByCard()" type="submit" name="nf-card-submit">
          Pay by card
        </button>
      </form>
    </div>

    <!-- 👇🏻 Add web component which will be in charge of injecting the card number and card security code 
            secure iFrames into their respective containers -->
    <nofrixion-card-headless
        paymentrequestid='{YOUR_PAYMENT_REQUEST_ID}'
        apiurl="https://api.nofrixion.com/api/v1"
				cardnumberinputid="{YOUR_CARD_NUMBER_DIV_ID}"
				cardsecuritycodeinputid="{YOUR_CARD_SECURITY_CODE_DIV_ID}"
				errordivid="{YOUR_ERROR_DIV_ID}"
				>
		</nofrixion-card-headless>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    
    <!-- 👇🏻 Add NoFrixion JavaScript library  -->
    <script src="https://devnofrixion.azureedge.net/nofrixion-nextgen-sandbox.js"></script>

  </head>
  <body>
    
    <!-- 👇🏻 Create your own card details layout -->
    <div>
      
      <!-- 👇🏻 Create <div> tag where Errors will be injected -->
  		<div id="error-container" role="alert" class="" ></div>
    	<form id="cardPaymentForm" onsubmit="event.preventDefault();">
      	<div>
        	<label >Card number <span className="required">*</span></label>
          
          <!-- 👇🏻 Create <div> tag where card number secure iFrame will be injected -->
        	<div id="cardNumber-container" style="height: 30px; width: 200px"></div>
      	</div>
      	<div >
        	<div>
          	<label>Expiry Date <span class="required">*</span></label>
          	<div >
            	<input type="text" id="nf-expiryMonth" placeholder="MM" size="2" maxLength={2} inputMode="numeric" />
            	<span class="">/</span>
            	<input type="text" id="nf-expiryYear" placeholder="YYYY" size="4" maxLength={4} inputMode="numeric" />
          	</div>
        	</div>
        	<div>
          	<label>Card Code (CVC) <span className="required">*</span></label>
            
            <!-- 👇🏻 Create <div> tag where card security code secure iFrame will be injected -->
          	<div id="{cardSecurityCode-container}" style="height: 30px; width: 40px"></div>
        	</div>
      	</div>
        
        <!-- 👇🏻 Call nfpayByCard() method on submit to process card payment -->
      	<button onclick="window.nfpayByCard()" type="submit" name="nf-card-submit">Pay by card</button>
    	</form>
		</div>

    
    <!-- 👇🏻 Add web component which will be in charge of injecting the card number and card security code 
            secure iFrames into their respective containers -->
    <nofrixion-card-headless
        paymentrequestid='{YOUR_PAYMENT_REQUEST_ID}'
        apiurl="https://api-sandbox.nofrixion.com/api/v1"
				cardnumberinputid="{YOUR_CARD_NUMBER_DIV_ID}"
				cardsecuritycodeinputid="{YOUR_CARD_SECURITY_CODE_DIV_ID}"
				errordivid="{YOUR_ERROR_DIV_ID}"
				>
		</nofrixion-card-headless>
  </body>
</html>

🧐 I still have questions

We hope that this guide has been helpful to you in implementing the NoFrixion Pay Element in headless mode.
If you have any further questions or issues, please do not hesitate to reach out to our support team for assistance.

Web Component - Get Paid by Cards

Introduction

🚧
Note that the URLs provided in this guide point to the Production environment, so make sure you're using the correct one (sandbox/production) accordingly.

💻 Implementation Guide

ℹ️ Key concepts

Web components

Payment Request

🔐 Security

📃 Preconditions

🛠️ Step-by-step

🔎
Replace `{YOUR_PAYMENT_REQUEST_ID}` with the actual value you got from the Payment Request creation call (please read the Preconditions section).

🏃‍♂️💨 TL;DR

🧐 I still have questions

Introduction

🚧Note that the URLs provided in this guide point to the Production environment, so make sure you're using the correct one (sandbox/production) accordingly.

💻 Implementation Guide

ℹ️ Key concepts

Web components

Payment Request

🔐 Security

📃 Preconditions

🛠️ Step-by-step

🔎Replace {YOUR_PAYMENT_REQUEST_ID} with the actual value you got from the Payment Request creation call (please read the Preconditions section).

🏃‍♂️💨 TL;DR

🧐 I still have questions

🚧
Note that the URLs provided in this guide point to the Production environment, so make sure you're using the correct one (sandbox/production) accordingly.

🔎
Replace `{YOUR_PAYMENT_REQUEST_ID}` with the actual value you got from the Payment Request creation call (please read the Preconditions section).