# Saferpay

### Introduction

Saferpay can be used if you want to have a solution that supports the post-checkout payments. It allows the users to pay after they submit the order, within the next 30 minutes.

It's not possible to use Saferpay for the payments done before the checkout is completed.

The diagram shows how Saferpay sequence looks like when it's integrated with Emporix:

<figure><img src="/files/eI15whPD1DR7L7qv7ZZ3" alt=""><figcaption></figcaption></figure>

### Gateway configuration

1. To create the Spreedly receiver, execute the following request:

```js
curl --location --request POST 'https://core.spreedly.com/v1/receivers.json' \
--header 'Content-Type: application/json' \
--header 'Authorization: Basic {SPREEDLY_BASIC_AUTH}' \
--data-raw '{
        "receiver": {
          "receiver_type": "saferpay",
          "hostnames": "https://test.saferpay.com",
          "credentials": [
          ]
        }
      }'
```

**Result**:

```json
{
    "receiver": {
        "company_name": "SIX Payment Services",
        "receiver_type": "saferpay",
        "token": "CwFlWAMQaOfUqcsP8Gce2iyzNIU",
        "hostnames": "https://test.saferpay.com,https://www.saferpay.com",
        "sub_merchant_key": null,
        "state": "retained",
        "created_at": "2023-07-16T20:18:48Z",
        "updated_at": "2023-07-16T20:18:48Z",
        "credentials": [

        ],
        "ssl_certificate_token": null
    }
}
```

{% hint style="danger" %}
Save the token, it's needed for the payment mode configuration. Use this token as the {SPREEDLY\_RECEIVER\_ID} variable.
{% endhint %}

2. Create the new payment mode, execute the following request:

```js
curl --location --request POST 'https://api.emporix.io/payment-gateway/{TENANT}/paymentmodes/config' \
--header 'Content-Type: application/json' \
--header 'Accept: application/json' \
--header 'Authorization: Bearer {EMPORIX_AUTH_TOKEN}' \
--data-raw '{
    "code": "saferpay",
    "active": true,
    "provider": "SPREEDLY_SAFERPAY",
    "configuration": {
        "Spreedly/EnvironmentKey": "{SPREEDLY_ENV_KEY}",
        "Spreedly/AccessSecret": "{SPREEDLY_ACCESS_SECRET}",
        "Spreedly/ReceiverId" : "{SPREEDLY_RECEIVER_ID}",
        "Saferpay/BasicAuth" : "{SAFERPAY_BASIC_AUTH}",
        "Saferpay/CustomerId" : "{SAFERPAY_CUSTOMER_ID}",
        "Saferpay/TerminalId" : "{SAFERPAY_TERMINAL_ID}",
        "Saferpay/TestEnvironment" : "{SAFERPAY_TEST_ENV}",
        "Saferpay/RedirectUrl" : "{SAFERPAY_REDIRECT_URL}"
    }
}'
```

* SPREEDLY\_ENVIRONMENT\_KEY - Spreedly environment key that you got from Emporix support team.
* SPREEDLY\_ACCESS\_SECRET - Spreedly secret key that you got from Emporix support team.
* SPREEDLY\_RECEIVER\_ID - The token from the receiver creation request.
* SAFERPAY\_BASIC\_AUTH - The `base64` of a user:password of Saferpay JSON API Basic Authentication.\
  You can create new credentials on the Saferpay page.
* SAFERPAY\_CUSTOMER\_ID - The customer ID of your Saferpay account. You can find the information on the Saferpay page.
* SAFERPAY\_TERMINAL\_ID - The terminal ID of your Saferpay account.
* SAFERPAY\_TEST\_ENV : expected values: true or false. Indicates whether the configuration is related to the test account or not. Based on the flag the following url is used:
  * true - <https://test.saferpay.com>
  * false - <https://saferpay.com>
* SAFERPAY\_REDIRECT\_URL - The URL to which the user should be redirected after 3DS2 operation. Usually it’s the merchant's storefront. For example [Emporix Demo Storefront](https://storefront.emporix.io/my-tenant/saferpay-callback).\
  The following query params are automatically attached to the [redirect URL](https://storefront.emporix.io/my-tenant/saferpay-callback?orderId=E4131\&transactionId=e3686fe2-e30d-4425-9b2e-75a8d5215dae\&paymentModeId=1cdf30e6-3479-4f54-ac7d-e48ba3b0b6b0):
  * orderId
  * transactionId
  * paymentModeId

### Storefront implementation

Saferpay is available only for the post-checkout approach, after the actual order is done.

{% hint style="warning" %}
Make sure that you have Spreedly scripts included in your index.html:

* `<script src="https://core.spreedly.com/iframe/express-3.min.js" id="express-script"></script>`
* `<link id="spreedly-express-css-file" rel="stylesheet" type="text/css" href="https://core.spreedly.com/stylesheets/express-3.0.0.min.css">`
  {% endhint %}

{% hint style="info" %}
You can find the examples in the [Emporix B2B Showcase](https://github.com/emporix/b2b-showcase) repository.
{% endhint %}

1. In the html part, create two buttons needed for the Saferpay:

* A button that opens Spreedly Express modal:

```js
<button className='large-primary-btn' onClick={openModal}>Enter Payment Info</button>
```

* A button that triggers the payment process:

```js
<FilledButton
  onClick={executePayment}
  className="mt-4 w-auto bg-yellow text-eerieBlack">
      PAY via Saferpay
</FilledButton>
```

2. In the same html, add also the JS part:

```js
const [spreedlyToken, setSpreedlyToken ] = useState(null)

useEffect(() => {
      window['SpreedlyExpress'].init(paymentMode.environmentKey, {
        "amount": props.grossValue + ' ' + props.currency,
        "company_name": "PowerZone",
        "sidebar_bottom_description": "Total Price",
      }, {
        "customerId": props.customerId
      });

      window['SpreedlyExpress'].onPaymentMethod(function(token, paymentMethod) {
        setSpreedlyToken(token)
        window['SpreedlyExpress'].unload()
      });
    }
  }, [])

  const openModal = (e) => {
    window['SpreedlyExpress'].openView()
  }

  const executePayment = async () => {
    const accessToken = localStorage.getItem(ACCESS_TOKEN)
    const headers = {
      Authorization: `Bearer ${accessToken}`
    }
    const body = {
      order : {
        id : props.orderId
      },
      paymentModeId: paymentMode.id,
      creditCardToken: spreedlyToken
    }
    const res = await api.post(`${initializePayment()}`, body, { headers })
    window.location.replace(res.data.externalPaymentRedirectURL)
  }
```

**Result**: With this configuration, the user sees a button to provide their credit card data.

1. When a user completes the data, Spreedly sends a token via the `onPaymentMethod` js callback.
2. Having this token, it's possible to display a button where the user can trigger the payment initialization, where `${initializePayment()}` is resolved to /`payment-gateway/${getTenant()}/payment/frontend/initialize`. As a response you get an object that contains the `externalPaymentRedirectURL` property.
3. You have to redirect the user to the URL. The user has to do the 3DS2 flow right on the Saferpay page.
4. After the operation, Saferpay redirects to the `SAFERPAY_REDIRECT_URL` configured in payment-mode, with additional query parameters.

An example of the redirect page:

```js
{!authorizationFinished ? 
    (
      <>We're authorizing the request...</>
    ) : 
    (
      <>
        {authorizationSuccess ? (
          <>
            Authorization finished with success <br/>
            <button className="bg-primaryBlue text-[white] px-6 py-0 h-[50px] text-[14px] leading-[14px] md:w-[400px] w-full" 
              onClick={() => {
                navigate(`/${tenant}/my-account/my-orders`)
              }}>
              CHECK YOUR ORDERS
            </button>
           
           </>
          ) : (<>Authorization failed</>)} 
        </>
    ) 
} 
```

```js
const authorize = async (orderId, paymentModeId) => {
    const accessToken = localStorage.getItem(ACCESS_TOKEN)
    const headers = {
      Authorization: `Bearer ${accessToken}`
    }
    const body = {
      order : {
        id : orderId
      },
      paymentModeId: paymentModeId
    }
    try {
      const res = await api.post(`${authorizePayment()}`, body, { headers })
      setAuthorizationFinished(true)
      setAuthorizationSuccess(res.data.successful)
    } catch(ex) {
      setAuthorizationFinished(true)
      setAuthorizationSuccess(false)
    }
  }

  useEffect(() => {
      const orderId = searchParams.get('orderId')
      const paymentModeId = searchParams.get('paymentModeId')
      authorize(orderId, paymentModeId)
  },[])
```

5. When the user is redirected to callback page, you should read query parameters related to the `orderId` and `paymentModeId`.
6. Having the two parameters, you can invoke the authorize method, where `${authorizePayment()}` is resolved to `/payment-gateway/${getTenant()}/payment/frontend/authorize`.

**Result**:

* If the 3DS2 finishes with success, then the authorization response is `successful: true`.
* If the 3DS2 doesn't finish with success, the authorization response is `successful: false`.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.emporix.io/ce/extensibility-and-integrations/payments/saferpay.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.