Card Payments

Set you card payments with Nello Pay.

💳

Welcome to our onboarding guide for card payments!

Prerequisites

You have access to the merchant portal and have signed a card payment agreement with us. Also we will need to confirm card payments are enabled for your organization.

1. Add Nello Pay as a payment option

Place a pay button or link on a page you wish your customers to complete payment using cards.

Design for pay button can be seen here.

Payment button

Adding a button to initiate the payment process is one way you can enable payments for your end users. This payment button should indicate to the end user that they will be making a card payment. Follow this guide for A2A payments. If you are supporting both card and A2A payments, then you need to have a button for each.

2. Handle the user click of the pay button

Parameters

For card payments it is necessary to add the following parameter to the checkout request body:

paymentType: CARD

It is an optional field for A2A payment, you can either send A2A or omit this field. For a card payment, send the value as CARD.

Server-side plugin

This plugin that triggers the call towards the Neonomics Checkout endpoint.

Clicking the already added "Pay by Card" button trigger the execution of the code below. This is an example of how the server-side can initiate the process for creating a checkout request.

<?php
$curl = curl_init();  

$YOUR_DOMAIN = "http://localhost";  

$postData = [
  "referenceId" => "46cc77a44f0f40f8b7877c78d8bbd8e0", //Your Reference
  "amount" => 20.00,
  "currency" => "NOK",
  "successUrl" => "$YOUR_DOMAIN/success",
  "failUrl" => "$YOUR_DOMAIN/fail",
  "cancelUrl" => "$YOUR_DOMAIN/cancel",
  "remittanceInfo" => "Sweatshirt Order #85" // Remittance Information
  "language" => "EN"
  "country" => "NO"
  "paymentType" => "CARD"
];  

curl_setopt_array($curl, array(
  CURLOPT_URL => 'https://checkout.sandbox.neonomics.io/api/v1/checkout-requests',   CURLOPT_RETURNTRANSFER => true,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => 'POST',
  CURLOPT_POSTFIELDS => json_encode($postData),
  CURLOPT_HTTPHEADER => array(
    'api-key: 09e4201c-9ddb-4b65-bc95-975b7373qwer', // Your Api Key
    'Content-Type: application/json',
    'Accept: application/json'
  ),
));
$response = curl_exec($curl);
curl_close($curl);

$redirectUrl = json_decode($response, true)['redirectUrl']
; header("Location: $redirectUrl");
?>
import com.mashape.unirest.http.Unirest;
import com.mashape.unirest.http.exceptions.UnirestException;
import org.json.JSONObject;  

import static spark.Spark.*;  

public class PayWithNeonomics {
       public static void main(String[] args) {
        PayWithNeonomicsSevice payWithNeonomicsSevice = new PayWithNeonomicsSevice();
        port(80);
        post("/pay-with-neonomics", (request, response) -> {
            String redirectUrl = payWithNeonomicsSevice.createCheckoutRequest();
            response.redirect(redirectUrl);
            return "";
          });
    }
    static class PayWithNeonomicsSevice {
        public String createCheckoutRequest() throws UnirestException {
            JSONObject requestBody = new JSONObject();
            requestBody.put("referenceId", "a6128c9f-8155-4e2e"); // Your Reference
            requestBody.put("amount", 12.24);
            requestBody.put("currency", "NOK");
            requestBody.put("remittanceInfo","Sweatshirt Order #85");
            requestBody.put("country", "NO");
            requestBody.put("paymentType", "CARD");
            requestBody.put("successUrl", "https://-yourDomain-.com/order/a6128c9f-81554e2e-b24f-7a65555b93c6/success");
            requestBody.put("failUrl", "https://-yourDomain-.com/order/a6128c9f-8155-4e2eb24f-7a65555b93c6/fail");
            requestBody.put("cancelUrl", "https://-yourDomain-.com/order/a6128c9f-8155-4e2eb24f-7a65555b93c6/cancel");
            requestBody.put("language", "EN");
               String redirectUrl = Unirest.post("https://checkout.sandbox.neonomics.io/api/v1/checkout-requests")
              .header("api-key", "4d3aacdb-54c1-4348-b09f-ed439590ae0f") // Your API Key
              .header("Content-Type", "application/json")
              .header("Accept", "application/json")
              .body(requestBody)
              .asJson().getBody().getObject()
              .getString("redirectUrl").toString();
              return redirectUrl;
        }
    }
  }

Building your JSON objects

Lets build your Checkout Request

Request header:

api-key: 31mkl-hfy23-312kj-f8qw…

Request body for non structured remittance info:

{
  referenceId: "41212",
  remittanceInfo: "Ord #41212",
  amount: 20,
  currency: "EUR",
  creditorAccount: {
    creditorName: "Bob Huws",
    iban: "NO9386011117947"
  },
  successUrl: "https://merchant.neonomics.io/order/41212/success",
  failUrl: "https://merchant.neonomics.io/order/41212/fail",
  cancelUrl: "https://merchant.neonomics.io/order/41212/cancel",
  language: "EN",
  country: "NO",
  paymentType: "CARD"
}

Response body:

{
  redirectUrl: "https://checkout.neonomics.io/api/v1/checkoutrequests/JkuOIJHLSjhasodLJGHD.../app",
  id: "0a15025d-824a-19c6-8182-7d5ab472002f"
}

RemittanceInfo will be shown to the end user in the payment flow and be sent through the Payment Status updater, but it will not be visible in the end users bank or attached to the payment in creditor account.

Direct your end user to the payment

Direct your end user to Nello Pay using the redirectUrl that is returned in the response body.

If you are integrating payments in a mobile app we would recommend it is opened in the device's mobile browser, not an in app web view.

3. Handle payment updates from the webhook

Use the id that is returned in the response body it is mapped to events that are pushed through the webhook for each payment.

For more information for on the webhook and payment status see [here](https://docs.neonomics.io/docs/webhook-payment-status-update