PayFunc Onboard · Payments for Programmers

Payments for Programmers

PayFunc Onboard

400 words 2 minutes

PayFunc Onboard guides your users through the process of creating an account used for later transactions. It handles the full process of entering the credit card information as well as performing the full 3D secure authentication procedure. Once everything is done you will receive an account number that you then can use to perform payments towards the user’s credit card without the need for any interaction with the user.

Integrating PayFunc Onboard

The PayFunc Onboard user interface is web based. It can either be integrated in an existing web application or be used in native application via a webview.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>PayFunc Onboard</title>
	<script src="https://api.payfunc.com/ui/onboard/payfunc-onboard.js"></script>
	<link href="https://theme.payfunc.com/light/index.css" rel="stylesheet">
</head>
<body>
	<header><h1>PayFunc Onboard</h1></header>
	<main>
		<form action="done" method="get">
			<payfunc-onboard
				number="<your-customer-number>"
				api-key="<public-api-key>"
				></payfunc-onboard>
		</form>
	</main>
</body>
</html>

A fully working example is available on GitHub.

The onboard dialog can be used to create an account

Once the user has entered their card information and successfully performed the 3D Secure authentication the form will be submitted with the following data in the payment-methods field.

{
  "id": "YXcOX1qYLFPSDLpi",
  "number": "JoaOrAnJDwnlWEuE",
  "method": [
    {
      "type": "card",
      "created": "2020-03-09T20:53:12.776Z",
      "scheme": "visa",
      "iin": "411111",
      "last4": "1111",
      "expires": [2, 22],
      "token": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJwYXlmdW5jIiwiaWF0IjoxNTgzOTI4MDE4MjAxLCJhdWQiOiJkZXZlbG9wbWVudCIsInNjaGVtZSI6InZpc2EiLCJpaW4iOiI0MTExMTEiLCJsYXN0NCI6IjExMTEiLCJleHBpcmVzIjpbMiwyMl0sInJlZmVyZW5jZSI6ImV5SmhiR2NpT2lKU1V6STFOaUlzSW5SNWNDSTZJa3BYVkNKOS5leUpwYzNNaU9pSkRZWEprUm5WdVl5SXNJbWxoZENJNk1UVTRNemt5T0RBeE56TXlOaXdpWVhWa0lqb2laR1YyWld4dmNHMWxiblFpTENKcFpDSTZJbHB5YWxGemRGOHpJbjAuRW5PWWoyTDJBNW9UNHpqeGFGZjZiUWFURUR6dERMU0R6YnZyNWhIQnROSEhTMHFpUEpzM2pQRGNtZUZ2ZU9XOUdsN2ZnWEhLUlhCc2haYUNUR050dFN5d0hFZzdYQVlJR0VwTGFobHYyRU54OU9UckZWRjRTZUQxczJfVG43a0lmSDFXaGh3NG1Ocmo1TVp5VGxjeUtHMUxnbFloTTBpcGJOU3JlekRhLTBmbGRzSnRlN2txS3prRzc0eG5SQlJkbmpMRE9HNTF1TG5xVS1aOERFS1pjTHRwdW1OQWc5eXBKckxpbl84MTUwN2lCU1pZSW0yTHlEM3ZnMzFKNXYzVWVGVGFmeFI3eDEwX2VsQzVBUGZMYzJhYm1yeDc0aDlsLV9HazhONEJQcHJfSFlhbUxTVGw0Mk9yMF9QNDhUaFZPZXVHeV9nR3UwRU5JZy0wdjcyMkpRIiwidHlwZSI6ImNhcmQiLCJjcmVhdGVkIjoiMjAyMC0wMy0xMVQxMjowMDoxOC4xODlaIn0.QoRCXQlHLIQRzhHqEtE3YFIpkdkWY-pr2EOColxScOfTRpCUJ_vThf2gzEdd9nSpud9-sit1UGVqd078Drx4FvsltG3xBw95QCHFCly3sx-F4HP3kPa36_07qDf3wo6lx0Gzw5f6Z3EXJQ6IgOSyn0inmKHpapL9Nj4zPcSScHINbx5i5Yc6fbJCuZ_R3qaoJZ4-076q5fHD1gzQhQSbGR-MzlZ-Pb7_D24yioWbte2uhW4pATzITjhX3VsKnm8D0R2yANv9SdauVo_HJdO0vN1Ro9bVV_kDB07A6_VBH-q--rIGZmNbOwhjRdBDmHu6WAPwV_gJ78VZSG2JCkL5ag"
    }
  ]
}

Performing a Payment

Once the user has set up an account you can then take the <token> you got from payment-methods field and create an order:

Create an Order

Request

POST https://api.payfunc.com/order
Authentication: Bearer <your.api.key>

{
    "number": "your order identifier",
    "items": 1337.42,
    "currency": "EUR",
    "payment": {
        "type": "account",
        "token": "<token>"
    }
}

Response

{
  "id": "xNq0zhFUfuyT4wkZ",
  "number": "abc001",
  "items": {
    "name": "",
    "price": 1337.42,
    "quantity": 1,
    "status": ["ordered"]
  },
  "currency": "SEK",
  "payment": {
    "reference": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJDYXJkRnVuYyIsImlhdCI6MTU4MzkyODMzNzc3OCwiYXVkIjoiZGV2ZWxvcG1lbnQiLCJpZCI6ImhEUzB1bUdHdW1iRSIsIm51bWJlciI6ImFiYzAwMSIsInJlZmVyZW5jZSI6IjBiMjA0ZTdlLTgzMzEtNDRiZi1hY2E0LWM2MDMyNDJlMzMyYSIsImNyZWF0ZWQiOiIyMDIwLTAzLTExVDEyOjA1OjM3KzAwOjAwIiwiYW1vdW50IjoxMzM3LjQyLCJjdXJyZW5jeSI6IlNFSyIsImNhcmQiOnsiaWQiOiJacmpRc3RfMyIsInNjaGVtZSI6InZpc2EiLCJpaW4iOiI0MTExMTEiLCJsYXN0NCI6IjExMTEiLCJleHBpcmVzIjpbMiwyMl19LCJjYXB0dXJlIjpbXSwicmVmdW5kIjpbXX0.HxqNgRG93geb0LEVsKzvtpWGzkWfV2thLfwA0xFjoh4H4TX5Wq5pPOzHtdYhf6423qE71sTSK0s7QYWZ0oDTYqblY-1M_6dLOjQqn7rdTsAN8Y6WYfidPIA6Q9H66ApE4vaVEvGGpzbBFsHLGY3dgzK9xVxdDjexBdBEElXvSqh89hpc4A7wwXUiSG_tPGHguC2AvuEdHYk6zTtWQPj3cAiMJMeW_acmh0FlZpoDP9P1xxngkHsNY9Kf6i9GcLOzceQGjzfV_JLO0b2YdnNlvIHIvB00rBVwooi4rNKIYWA3ZL2hCEpskb6ZkRUqOLXWRqslTvyxTmBEF4vp_vvWow",
    "type": "card",
    "status": "created",
    "iin": "411111",
    "last4": "1111",
    "expires": [2, 22],
    "amount": 1337.42,
    "currency": "SEK",
    "scheme": "visa",
    "service": "cardfunc",
    "created": "2020-03-09T18:00:25+00:00"
  },
  "created": "2020-03-09T18:00:29.733Z",
  "event": [
    {
      "type": "order",
      "date": "2020-03-09T18:00:29.738Z"
    }
  ],
  "status": ["ordered"]
}

Charge Order

Once an order has been placed, you can charge the card with the <order id> returned in the response (value of id) when order was created.

Request

POST https://api.payfunc.com/order/<order id>/event
Authentication: Bearer <your.api.key>

{
	"type": "charge"
}

Response

{
  "type": "charge",
  "date": "2020-03-09T17:20:25.434Z",
  "reference": "2f18f8e5-2ab7-46a5-b77f-4055fe6df8b3"
}