💳

Welcome to our onboarding guide for card payments!

Prerequisites

1. Add Nello Pay as a payment option

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 payment type.

Design specifications for the pay button can be found here.

2. Handle the user click of the pay button

Parameters

⚠️

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

"paymentType": "CARD"

Note: This field is optional for A2A payments (you can send "A2A" or omit it), but required for card payments with the value "CARD".

Server-side Implementation

This server-side plugin triggers the call to the Neonomics Checkout endpoint. When a user clicks the "Pay by Card" button, the code shown in the examples below is executed to create 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");
?>

Building your JSON objects

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"
}

📘

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

Direct your end user to the payment

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

📱

Mobile Integration: If you are integrating payments in a mobile app, we recommend opening the payment flow 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 detailed information on webhook implementation and payment status handling, see our webhook documentation.