Below, you’ll find a detailed guide on how to add the Pay with Vipps for WooCommerce Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Pay with Vipps for WooCommerce Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Pay with Vipps for WooCommerce Plugin and the shortcodes it provides:
"Pay with Vipps for WooCommerce is a seamless payment solution, integrating the popular Norwegian payment service, Vipps, into your WooCommerce store. With woo-vipps, make transactions easy and secure."
- [woo_vipps_buy_now]
- [woo_vipps_express_checkout_button]
- [woo_vipps_express_checkout_banner]
- [vipps_checkout]
- [vipps-badge]
Pay with Vipps for WooCommerce [woo_vipps_buy_now] Shortcode
The Woo Vipps Buy Now shortcode is a powerful tool that allows you to display a direct purchase button on your WordPress site. This shortcode, when added to a page, generates a ‘Buy Now’ button for a specified product. It accepts ‘id’, ‘variant’, and ‘sku’ as attributes to customize the product details.
Shortcode: [woo_vipps_buy_now]
Parameters
Here is a list of all possible woo_vipps_buy_now shortcode parameters and attributes:
id– The unique identifier for the specific productvariant– Describes the different version of the productsku– The stock keeping unit number for the product
Examples and Usage
Basic example – A simple usage of the woo_vipps_buy_now shortcode where only the id attribute is specified. This will display a “Buy Now” button for the product with the specified id.
[woo_vipps_buy_now id=1 /]Advanced examples
Here, the shortcode is used with both the id and variant attributes specified. This will display a “Buy Now” button for a specific variant of the product with the given id.
[woo_vipps_buy_now id=1 variant=2 /]In this example, the shortcode is used with all possible attributes specified: id, variant, and sku. This will display a “Buy Now” button for a specific variant of the product with the given id and SKU.
[woo_vipps_buy_now id=1 variant=2 sku="SKU123" /]Lastly, here is an example where only the sku attribute is specified. This will display a “Buy Now” button for the product with the specified SKU, regardless of its id or variant.
[woo_vipps_buy_now sku="SKU123" /]PHP Function Code
In case you have difficulties debugging what causing issues with [woo_vipps_buy_now] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('woo_vipps_buy_now', array($this, 'buy_now_button_shortcode'));Shortcode PHP function:
function buy_now_button_shortcode ($atts) {
$args = shortcode_atts( array( 'id' => '','variant'=>'','sku' => '',), $atts );
return $this->get_buy_now_button($args['id'], $args['variant'], $args['sku'], false);
}
Code file location:
woo-vipps/woo-vipps/Vipps.class.phpPay with Vipps for WooCommerce [woo_vipps_express_checkout_button] Shortcode
The Woo Vipps Express Checkout Button shortcode is a dynamic tool that enhances the checkout process. It triggers a function that checks if the cart supports express checkout. If supported, it then generates the HTML for the express checkout button. This shortcode is a valuable asset for a streamlined checkout experience.
Shortcode: [woo_vipps_express_checkout_button]
Examples and Usage
Basic example – The basic usage of the shortcode woo_vipps_express_checkout_button is to create an express checkout button for the WooCommerce Vipps system.
[woo_vipps_express_checkout_button /]For more advanced usage, the shortcode doesn’t support extra parameters directly. However, you can manipulate its output by using actions and filters. For instance, you can change the button’s text by using the ‘woo_vipps_express_checkout_button_text’ filter.
Advanced examples – The following example shows how to use the ‘woo_vipps_express_checkout_button_text’ filter to change the express checkout button’s text.
add_filter('woo_vipps_express_checkout_button_text', 'change_vipps_button_text');
function change_vipps_button_text() {
return 'Custom Checkout Text';
}
Please note that the above code should be added to your theme’s functions.php file or a custom plugin file. After adding the code, your express checkout button will display ‘Custom Checkout Text’ instead of the default text.
PHP Function Code
In case you have difficulties debugging what causing issues with [woo_vipps_express_checkout_button] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('woo_vipps_express_checkout_button', array($this, 'express_checkout_button_shortcode'));Shortcode PHP function:
function express_checkout_button_shortcode() {
$gw = $this->gateway();
if (!$gw->cart_supports_express_checkout()) return;
ob_start();
$this->cart_express_checkout_button_html();
return ob_get_clean();
}
Code file location:
woo-vipps/woo-vipps/Vipps.class.phpPay with Vipps for WooCommerce [woo_vipps_express_checkout_banner] Shortcode
The Woo Vipps Express Checkout Banner shortcode is a feature that enables a quick checkout option. This shortcode initiates the express checkout banner function. If the cart supports express checkout, it generates the HTML for the express checkout banner. Hence, it streamlines the checkout process, improving user experience.
Shortcode: [woo_vipps_express_checkout_banner]
Examples and Usage
Basic example – The shortcode for implementing the Woo Vipps Express Checkout Banner in your WordPress website is as follows:
[woo_vipps_express_checkout_banner]There are no parameters/attributes available for this shortcode, as the function doesn’t accept any parameters. The function checks if the current cart supports express checkout and if it does, it outputs the HTML for the express checkout banner.
Advanced examples – Since the shortcode doesn’t accept any parameters, there are no advanced examples to provide. However, if you want to customize the appearance of the banner, you can do so by modifying the ‘express_checkout_banner_html()’ function in the plugin’s PHP code. Remember, any modifications to the plugin’s code will be overwritten if the plugin is updated, so it’s recommended to use a child theme or a custom plugin to implement these changes.
For instance, you could modify the function to accept a parameter for the banner’s color, like this:
function express_checkout_banner_shortcode($atts) {
$gw = $this->gateway();
if (!$gw->cart_supports_express_checkout()) return;
ob_start();
$this->express_checkout_banner_html($atts['color']);
return ob_get_clean();
}
add_shortcode('woo_vipps_express_checkout_banner', array($this, 'express_checkout_banner_shortcode'));
With this modification, you could use the shortcode like this to display a red banner:
[woo_vipps_express_checkout_banner color="red"]Please note that this is just an example and the actual implementation might vary depending on the structure and style of your website.
PHP Function Code
In case you have difficulties debugging what causing issues with [woo_vipps_express_checkout_banner] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('woo_vipps_express_checkout_banner', array($this, 'express_checkout_banner_shortcode'));Shortcode PHP function:
function express_checkout_banner_shortcode() {
$gw = $this->gateway();
if (!$gw->cart_supports_express_checkout()) return;
ob_start();
$this->express_checkout_banner_html();
return ob_get_clean();
}
Code file location:
woo-vipps/woo-vipps/Vipps.class.phpPay with Vipps for WooCommerce [vipps_checkout] Shortcode
The ‘vipps_checkout’ shortcode initiates the Vipps Checkout process in WooCommerce. It handles various conditions like AJAX requests, REST requests, and admin views. It checks if the WooCommerce cart is empty and returns an empty cart template if true. The shortcode also enqueues the ‘vipps-checkout’ script and initiates a new Vipps session. It generates an output that includes a redirect script, error messages, a spinner, and a Vipps checkout button. If a live session exists, it adds it to the page on load. The shortcode ends by creating a form impersonating the WooCommerce checkout form, mainly to work with the Pixel Your Site plugin.
Shortcode: [vipps_checkout]
Examples and Usage
Basic example – A simple usage of the shortcode to initiate the Vipps checkout process.
[vipps_checkout /]Advanced examples
In the given PHP code, there are no attributes/parameters available for the shortcode. However, if you want to extend the functionality of the shortcode, you can add custom attributes to it. Here is an example of how you might use custom attributes:
Let’s assume you added a custom attribute ‘button_color’ to change the color of the checkout button. Here’s how you might use it:
[vipps_checkout button_color="blue" /]Similarly, if you added another attribute ‘button_text’ to change the text on the checkout button, here’s how you might use it:
[vipps_checkout button_color="blue" button_text="Proceed to Vipps Checkout" /]Please note that these examples assume that you have added the corresponding functionality in the ‘vipps_checkout_shortcode’ function to handle these attributes.
PHP Function Code
In case you have difficulties debugging what causing issues with [vipps_checkout] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('vipps_checkout', array($this, 'vipps_checkout_shortcode'));Shortcode PHP function:
function vipps_checkout_shortcode ($atts, $content) {
// No point in expanding this unless we are actually doing the checkout. IOK 2021-09-03
if (is_admin()) return;
if (wp_doing_ajax()) return;
if (defined('REST_REQUEST') && REST_REQUEST ) return;
wc_maybe_define_constant( 'WOOCOMMERCE_CHECKOUT', true );
add_filter('woo_vipps_is_vipps_checkout', '__return_true');
// Defer to the normal code for endpoints IOK 2022-12-09
if (is_wc_endpoint_url( 'order-pay' ) || is_wc_endpoint_url( 'order-received' )) {
return do_shortcode("[woocommerce_checkout]");
}
if (!WC()->cart || WC()->cart->is_empty() ) {
$this->abandonVippsCheckoutOrder(false);
ob_start();
wc_get_template( 'cart/cart-empty.php' );
return ob_get_clean();
}
// Previously registered, now enqueue this script which should then appear in the footer.
wp_enqueue_script('vipps-checkout');
do_action('vipps_checkout_before_get_session');
// We need to be able to check if we still have a live, good session, in which case
// we can open the iframe directly. Otherwise, the form we are going to output will
// create the iframe after a button press which will create a new order.
$sessioninfo = $this->vipps_checkout_current_pending_session();
$out = ""; // Start generating output already to make debugging easier
if ($sessioninfo['redirect']) {
// This is always either the thankyou page or home_url() IOK 2021-09-03
$redir = json_encode($sessioninfo['redirect']);
$out .= "<script>window.location.replace($redir);</script>";
return $out;
}
// Now the normal case.
$errortext = apply_filters('woo_vipps_checkout_error', __('An error has occured - please reload the page to restart your transaction, or return to the shop', 'woo-vipps'));
$expiretext = apply_filters('woo_vipps_checkout_error', __('Your session has expired - please reload the page to restart, or return to the shop', 'woo-vipps'));
$out .= $this->spinner();
if (!$sessioninfo['session']) {
$out .= "<div style='visibility:hidden' class='vipps_checkout_startdiv'>";
$out .= "<h2>" . __('Press the button to complete your order with Vipps!', 'woo-vipps') . "</h2>";
$out .= '<div class="vipps_checkout_button_wrapper" ><button type="submit" class="button vipps_checkout_button vippsorange" value="1">' . __('Vipps Checkout', 'woo-vipps') . '</button></div>';
$out .= "</div>";
}
// If we have an actual live session right now, add it to the page on load. Otherwise, the session will be started using ajax after the page loads (and is visible)
if ($sessioninfo['session']) {
$token = $sessioninfo['session']['token']; // From Vipps
$src = $sessioninfo['session']['checkoutFrontendUrl']; // From Vipps
$out .= "<script>VippsSessionState = " . json_encode(array('token'=>$token, 'checkoutFrontendUrl'=>$src)) . ";</script>\n";
} else {
$out .= "<script>VippsSessionState = null;</script>\n";
}
// Check that these exist etc
$out .= "<div id='vippscheckoutframe'>";
$out .= "</div>";
$out .= "<div style='display:none' id='vippscheckouterror'><p>$errortext</p></div>";
$out .= "<div style='display:none' id='vippscheckoutexpired'><p>$expiretext</p></div>";
// We impersonate the woocommerce-checkout form here mainly to work with the Pixel Your Site plugin IOK 2022-11-24
$classlist = apply_filters("woo_vipps_express_checkout_form_classes", "woocommerce-checkout");
$out .= "<form id='vippsdata' class='" . esc_attr($classlist) . "'>";
$out .= wp_nonce_field('do_vipps_checkout','vipps_checkout_sec',1,false);
$out .= "</form>";
return $out;
}
Code file location:
woo-vipps/woo-vipps/Vipps.class.phpPay with Vipps for WooCommerce [vipps-badge] Shortcode
The Woo-Vipps plugin shortcode ‘vipps-badge’ creates a customizable Vipps badge. It allows parameters like ‘id’, ‘class’, ‘variant’, ‘language’, ‘amount’, and ‘vipps-senere’, enabling a personalized badge design.
Shortcode: [vipps-badge]
Parameters
Here is a list of all possible vipps-badge shortcode parameters and attributes:
id– A unique identifier for the badge.class– Specifies the CSS class for styling the badge.variant– Defines the color of the badge (options: orange, light-orange, grey, white, purple).language– Sets the language of the badge (options: ‘en’ for English, ‘no’ for Norwegian).amount– Sets the total amount for the transaction.vipps-senere– If set, enables the Vipps Senere payment option.
Examples and Usage
Basic example – Shortcode to display the Vipps badge without any specific parameters.
[vipps-badge /]Advanced examples
Shortcode to display the Vipps badge with a specific variant and language. The variant parameter changes the color of the badge and the language parameter changes the language of the badge.
[vipps-badge variant="orange" language="en" /]Shortcode to display the Vipps badge with an amount and the “Vipps senere” option. The amount parameter specifies the amount to be paid and the “Vipps senere” option allows the user to pay later.
[vipps-badge amount="100" vipps-senere="1" /]Shortcode to display the Vipps badge with a specific id and class. The id and class parameters are used for styling the badge with CSS.
[vipps-badge id="my-badge" class="my-class" /]Shortcode to display the Vipps badge with all parameters. This example demonstrates how to use all available parameters to customize the Vipps badge.
[vipps-badge id="my-badge" class="my-class" variant="purple" language="no" amount="200" vipps-senere="1" /]PHP Function Code
In case you have difficulties debugging what causing issues with [vipps-badge] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('vipps-badge', array($this, 'vipps_badge_shortcode'));Shortcode PHP function:
function vipps_badge_shortcode($atts) {
$args = shortcode_atts( array('id'=>'', 'class'=>'', 'variant' => '','language'=>'','amount' => '', 'vipps-senere'=>''), $atts );
$variant = in_array($args['variant'], ['orange', 'light-orange', 'grey','white', 'purple']) ? $args['variant'] : "";
$language = in_array($args['language'], ['en','no']) ? $args['language'] : $this->get_customer_language();
$amount = intval($args['amount']);
$later = $args['vipps-senere'];
$id = sanitize_title($args['id']);
$class = sanitize_text_field($args['class']);
$attributes = [];
if ($variant) $attributes['variant'] = $variant;
if ($language) $attributes['language'] = $language;
if ($amount) $attributes['amount'] = $amount;
if ($later) $attributes['vipps-senere'] = 1;
if ($id) $attributes['id'] = $id;
if ($class) $attributes['class'] = $class;
$badgeatts = "";
foreach($attributes as $key=>$value) $badgeatts .= " $key=\"" . esc_attr($value) . '"';
return "<vipps-badge $badgeatts></vipps-badge>";
}
Code file location:
woo-vipps/woo-vipps/Vipps.class.phpConclusion
Now that you’ve learned how to embed the Pay with Vipps for WooCommerce Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply