Vipps Payment Integration
Vipps enables your Norwegian customers to pay with your phone with ease, and in this guide we will walk you through how to set up Vipps Express in our NextJS eCommerce boilerplate.
Getting Vipps credentials
To get started with Vipps Express, you need to sign up to their services, create an account. After getting an account, you need to create API keys which you need to store in your .env file:
VIPPS_CLIENT_ID=your-client-id
VIPPS_CLIENT_SECRET=your-client-secret
VIPPS_MERCHANT_SERIAL=your-merchant-serial
VIPPS_SUB_KEY=your-subscription-key
Additionally, add Vipps to the list of enabled payment providers in app.config.json:
{
"paymentProviders": [
"vipps",
]
}
At this point, ensure that you have download the Vipps Test application on a phone to verify payments.
Initiating payment
In the init payment endpoint default in the NextJS boilerplate is /src/pages/api/payment-providers/vipps/initiate-payment.js), this is the typical flow you want to follow:
- Create a Crystallize order for the customer and the basket contents.
- Initate a Vipps Express payment, using the Crystallize order ID as the Vipps order ID, passing along the customer info and basket.
- Receive an URL back from Vipps for where to redirect the user to approve the payment
Note: while you are developing this on your local machine, you need an HTTP proxy so that Vipps can call your local machine, like ngrok, once ngrok is running add the HTTP forwarding URL as an env variable in your .env file:
NGROK_URL=your-ngrock-url
User payment confirmation
This step is provided by Vipps, by redirecting the customer to the url given to us in the initiate payment step. The customer will need to enter their phone number in order to proceed.
Order confirmation
After the customer has confirmed the purchase, they will be redirected back to the shop for a confirmation. The default in the NextJS eCommerce boilerplate is /src/pages/api/payment-providers/vipps/fallback/[orderId].js.
Finally in this step, the typical thing you probably would like to do is to update the Crystallize order with information on how the payment went. If you’re getting payment status RESERVE, it means that all went fine, and that the amount has been reserved on the customers payment method, and is ready to be captured.
Next steps
What happens now is totally up to how you run your business. We advice you to set up proper fulfilment pipelines to orchestrate the orders, which you can use to manage the order fulfilment in a structured and automated way.
Read more about orders and fulfilment or watch our live stream where we demonstrate how Vipps payments work in our boilerplate.
