Getting Vipps credentials
Additionally, add Vipps to the list of enabled payment providers in app.config.json:
At this point, ensure that you have download the Vipps Test application on a phone to verify payments.
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:
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.
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.
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.