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
- Using the NPM Package
- Embed the Script into your HTML
Use the Straumur Web npm package:
-
npm install straumur-web-component --save
- Import Straumur Web into your application:
import { StraumurCheckout } from "straumur-web-component";
Work in progress! 👷🏻 ⚒️
In case you want a pre-released version of script, contact our support.
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>
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
Parameter | Description |
---|---|
environment | Use test for staging/testing environment. When you are ready to accept live payments, change to live. |
sessionId | The 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:
- Obtain the
checkoutReference
from the/embeddedcheckout
response. - 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