superbig / craft-vipps
Integrate Commerce with Vipps
Installs: 314
Dependents: 0
Suggesters: 0
Security: 0
Stars: 2
Watchers: 4
Forks: 1
Open Issues: 20
Type:craft-plugin
Requires
- craftcms/cms: ^3.4.0
- craftcms/commerce: ^3.0.0
This package is auto-updated.
Last update: 2024-10-31 02:49:58 UTC
README
Integrate Craft Commerce with Vipps.
Requirements
This plugin requires Craft CMS 3.1.0 and Craft Commerce 2.0 or later.
Installation
To install the plugin, follow these instructions.
-
Open your terminal and go to your Craft project:
cd /path/to/project
-
Then tell Composer to load the plugin:
composer require superbig/craft-vipps
-
In the Control Panel, go to Settings → Plugins and click the “Install” button for Vipps.
Vipps Overview
This plugin provides your Craft Commerce shop with two payment alternatives:
- A normal gateway for Craft Commerce, where a customer can select Vipps when checkout out
- Express Checkout - where a user taps the familiar, orange Vipps Checkout button and jumps right to the Vipps app to pay.
What is Vipps?
Vipps is a mobile app that makes it easy to transfer money to others, pay in stores, online stores and bills.
Vipps has 2.9 million users in Norway and is used daily by tens of thousands to shop online.
Configuring Vipps
You may either configure the gateway on the Gateway Settings screen, or create a config file named commerce-gateways.php
in config/
.
<?php return [ 'gatewayHandle' => [ 'testMode' => true, 'clientId' => '', 'clientSecret' => '', 'subscriptionKeyAccessToken' => '', 'merchantSerialNumber' => '', 'useBillingPhoneAsVippsPhoneNumber' => true, 'captureOnStatusChange' => true, 'captureStatusUid' => '', // You have access to any properties on the order + // a property called lineItemsText that will list the // line items as text + their quantity 'transactionText' => '{lineItemsText}', // Users will be redirected here on success or when something goes wrong 'fallbackUrl' => \craft\helpers\UrlHelper::siteUrl('/shop/confirmation?order={number}'), // Express checkout 'expressCheckout' => true, 'newCartOnExpressCheckout' => true, ], ];
Note that the gatewayHandle
here has to match your gateway's handle in the Commerce Gateway settings.
See Commerce docs for more information on how to configure gateways with a config file.
Overview of config settings
This is an overview that shows you where to get the different config values through the Vipps Developer Portal.
Callback URLs
Note that all URLs passed to Vipps will have to be publicly available. Vipps will validate the URL, and return an error if its accessible from their servers.
Using Vipps
Express Checkout Buttons
Vipps allow a customer to check and pay for a order straight in the Vipps out, decreasing the number of steps a customer have to take to finish a order.
To display a Express Checkout button for a variant:
{{ craft.vipps.getExpressFormButton(variant) }}
To display a Express Checkout button for a cart:
{{ craft.vipps.getExpressFormButton() }}
Custom Express Checkout
If you need to do something custom around the Express Checkout flow, like allow the customer to provide a note, select quantity or use line item options
, you can handle the input manually and submit to /vipps/express/checkout
. This endpoint receives the same purchasables
input as the normal Commerce endpoint.
{% set product = craft.products.one() %} {% set variant = product.defaultVariant %} <form method="POST"> <input type="hidden" name="action" value="vipps/express/checkout"> {{ csrfInput() }} <input type="hidden" name="purchasables[0][qty]" value="1"> <input type="text" name="purchasables[0][note]" value="" placeholder="note"> <select name="purchasables[0][options][engraving]"> <option value="happy-birthday">Happy Birthday</option> <option value="good-riddance">Good Riddance</option> </select> <select name="purchasables[0][options][giftwrap]"> <option value="yes">Yes Please</option> <option value="no">No Thanks</option> </select> <input type="hidden" name="purchasables[0][id]" value="{{ variant.id }}"> <input type="submit" value="Vipps Express Checkout"> </form>
See the Commerce docs on Add to Cart for more information.
See Brand Guidelines for more advice on how to use the payment buttons.
Get Support
Discord
Get in touch via the Craft Discord, in the #craft3-help
channel. Mention one of our team members on the following handles:
@superbig
@fred
Get our attention on Twitter by using the #craftcms
hashtag and mentioning @sjelfull
If you have any feedback, comments, questions or suggestion: email us at contact at superbig.co
.
Troubleshooting
"Invalid auth token received from Vipps" error
If you see this in logs, this typically means that there is a layer between Craft and Vipps that strips away the Authorization header. You should start by checking if your webserver or firewall is removing it.
Vipps Roadmap
Some things to do, and ideas for potential features:
- Handle signup after payment
- Support for user signups via Vipps
- Support for subscriptions
- Better handling of addresses and existing customers
Brought to you by Superbig