Skip to main content

Web Component

You can integrate Straumur's client-side library which meets the requirements for most online payment integrations.

With component, you can render a list of available payment methods anywhere on your website and collect payment details from your shoppers.

Requirements​

Before you begin to integrate, make sure you have followed the Basic Session Request guide.

Setting up your Frontend​

Use the Straumur Web npm package:

  • npm install straumur-web-component --save
  • Import Straumur Web into your application:
import { StraumurCheckout } from "straumur-web-component";

DOM Element for component​

Create a DOM container element on your checkout page where you want to render component and assign it a descriptive id.

<div id="component-container"></div>
note

If you are utilizing JavaScript frameworks like Vue or React, ensure that you use references rather than selectors and avoid re-rendering the DOM element.

Setup component​

Define a global configuration object to initialize the StraumurCheckout instance. This object should include configuration settings and event handlers.

Initialize the Payment Component Example​

const paymentConfiguration = {
    environment: "test", // Change to 'live' for the live environment.
    // Use sessionId from /embeddedcheckout/session response
    sessionId: "ftsdre3h...e5h5as2q4",
    onPaymentCompleted: () => {
        console.info("onPaymentCompleted");
    },
    onPaymentFailed: () => {
        console.info("onPaymentFailed");
    },
};

const checkout = await StraumurCheckout(paymentConfiguration);

checkout.mount("#component-container");

Payment Component Parameters​

ParameterDescription
environmentUse test for staging/testing environment. When you are ready to accept live payments, change to live.
sessionIdThe payment sessionId identifier from your call to /embeddedcheckout/session.
onPaymentCompleted()Create an event handler, called when the payment is completed.
onPaymentFailed()Create an event handler, called when the payment failed.

Payment Flow​

When component is created and mounted, the shopper uses the interface to finalize the payment. Component manages the entire payment process you set up upfront.

Payment Outcome​

Once the component has processed the payment, you should inform the shopper of the payment status. Straumur will notify you of the payment result via a webhook.

Payment Result Before Webhook​

To retrieve the payment result before receiving the webhook notification, follow these steps:

  1. Obtain the checkoutReference from the /embeddedcheckout response.
  2. Check the current payment status by following the Checkout Status Request.

Test Refusal Reason​

Work in progress! 👷🏻 ⚒️

Apple Pay and Google Pay​

If you wish to include Apple Pay and Google Pay as payment methods on your website, please contact our support at developers@straumur.is