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 account field.

{
  "id": "YXcOX1qYLFPSDLpi",
  "number": "JoaOrAnJDwnlWEuE",
  "method": [
    {
      "type": "card",
      "created": "2020-03-09T20:53:12.776Z",
      "scheme": "visa",
      "iin": "411111",
      "last4": "1111",
      "expires": [2, 22]
    }
  ]
}

Performing a Payment

Once the user has set up an account you can then take the id you got from account field and create an order with it in the property payment.account:

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",
        "account": "YXcOX1qYLFPSDLpi"
    }
}

Response

{
  "id": "xNq0zhFUfuyT4wkZ",
  "number": "abc001",
  "items": {
    "name": "",
    "price": 1337.42,
    "quantity": 1,
    "status": ["ordered"]
  },
  "currency": "SEK",
  "payment": {
    "type": "card",
    "account": "YXcOX1qYLFPSDLpi",
    "iin": "411111",
    "last4": "1111",
    "expires": [2, 22],
    "amount": 1337.42,
    "currency": "SEK",
    "scheme": "visa",
    "service": "payfunc",
    "created": "2020-03-09T18:00:25+00:00",
    "status": "created"
  },
  "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"
}

Onboarding for existing Accounts

To implement onboarding for an already existing Account, implement the onboarding dialog in the same way as the onb oarding dialog for creating an account.
Only change the html to specify the account as a stringified Account object instead of specifying the number field.

<payfunc-onboard
  account="<stringified-account-object>"
  api-key="<public-api-key>"
></payfunc-onboard>