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