This technical manual is for integrating the previous release of the payment component.

1. Add the elements

Add the component's CSS to the <head> of your checkout page:
```
<link rel="stylesheet" href="https://pay.multisafepay.com/sdk/components/v1/components.css">
```

Add the component's script tothe bottom of the <body> of your checkout page:

<script src="https://pay.multisafepay.com/sdk/components/v1/components.js"></script>

Add the DOM element for the component's UI in the <body> of your checkout page:
```
<div id="MultiSafepayPayment"></div>
```

2. Initialize the component

Generate an API token

Payment Components require a MultiSafepay API token. See API reference – Generate an API token.

💡 Tip! To keep your API key private, request the token from your own server.

Construct the component object

Initialize an orderData object, containing information about the customer's order collected during the checkout process:

const orderData = {
   currency: 'EUR',
   amount: 10000,
   customer: {
       locale: 'en',
       country: 'NL',
       reference: 's9Q8ikjFJBCX'
   },
   template : {
       settings: {
           embed_mode: true
       }
   }
};

Properties

Key	Value
currency	The currency of the order. Format: ISO-4217 , e.g. `EUR`. Required.
amount	The value of the order. Format: Number without decimal points, e.g. 100 euro is formatted as `10000`. Required.
customer.country	The customer's country code. Checks the availability of the payment method. Format: ISO-3166-1 alpha-2 , e.g. `NL`. Required.
customer.locale	The customer's language. Sets the language of the payment component UI. Format: ISO 639 Supported languages: `en`, `es`, `fr`, `it`, `nl`. Optional.
template.settings.embed_mode	A template designed to blend in seamlessly with your ecommerce platform. Format: Boolean. Optional.

⚠️ Note: We use the orderData object to ensure the payment method is enabled and the currency, country, and order amount are supported.

Construct a PaymentComponent object in the test environment using the orderData object and your API token:
```
PaymentComponent = new MultiSafepay({
   env: 'test',
   apiToken: apiToken,
   order: orderData
});
```

Initialize the component

Call the PaymentComponent.init() method with the following arguments:

PaymentComponent.init('payment', {
    container: '#MultiSafepayPayment',
    gateway: '<GATEWAY>',
    onLoad: state => {
        console.log('onLoad', state);
    },
    onError: state => {
        console.log('onError', state);
    }
});

Replace the <GATEWAY> placeholder with the relevant payment gateway identifier.

Gateway IDs

Payment method Gateway IDs
Card payments CREDITCARD
iDEAL IDEAL

Payment method	Gateway IDs
Card payments	`CREDITCARD`
iDEAL	`IDEAL`

Create event handlers for the following events:

Events

Event	Event handler
`onError`	Called when an error occurs in the payment component
`onLoad`	Called when the payment component UI is rendered

The PaymentComponent uses the following methods:

Methods

Method	Description
`getErrors`	Returns error details, e.g. error messages or codes.
`hasErrors`	Returns a boolean value depending on whether errors have been registered.
`getPaymentData`	Creates a `payload` object with the customer's payment details, used to create orders

3. Create an order

Collect payment data

To collect the customer's payment details from the payment component UI, call the PaymentComponent.getPaymentData() method:
```
PaymentComponent.getPaymentData()
```
Pass the payment_data to your server.

Create an order

Make a Create order > Payment component request from your server:

Append the payment_data collected from the payment component UI to the orderData collected during the checkout process.

Replace the <GATEWAY> placeholder with the relevant gateway identifier, see Step 2: Initialize the component.

curl -X POST "https://testapi.multisafepay.com/v1/json/orders" \
--header "accept: application/json" \
--header "Content-Type: application/json" \
--header "api_key: <your-website-API-key>" \
--data-raw '{
    "type": "direct",
    "order_id": "my-order-id-1",
    "gateway": "<GATEWAY>",
    "currency": "EUR",
    "amount": 100,
    "description": "Test order description",
...
    "payment_data": {
    "payload": "{secure_payload}"
    },
}'

Redirect the customer

From your server, pass the response to the create order request to the customer's device.
Check that response.success is true.
Call the PaymentComponent.init() method using the following arguments:
```
PaymentComponent.init('redirection', {
   order: response.data
});
```
If the customer needs to perform additional actions, they are redirected to the relevant page, e.g. the payment_url or 3D Secure. Then, if successful, they are redirected to the redirect_url.

If no further action is required, the customer is redirected to the redirect_url.

4. Go live

When you're ready to process real payments, make the following changes:

In Step 2: Construct the component object, change the environment from test to live:

PaymentComponent = new MultiSafepay({
   env: 'live',
   apiToken: apiToken,
   order: orderData
});

In Step 3: Create an order, change the test endpoint to the live endpoint:
```
https://api.multisafepay.com/v1/json/orders
```

💬
Support

Email [email protected]

Top of page