# By redirection

# Use case

If the Pledg funnel cannot be integrated within an iframe inside the merchant payment page (for security, organisational or any other technical reasons), the merchant should redirect the customer to the Pledg funnel and pass the parameters of the purchase in the parameters of the URL.

# Settings

This section lists the settings specific of the integration by redirection, none of them being used for the scoring.

The other settings are detailed in the settings section.

# Required settings

Name Type Details
redirectUrl string URL where the customer must be redirected after the payment
cancelUrl string URL where the customer must be redirected when he cancels the payment or when the payment fails
currency string Mandatory if using aggregation of payment solutions. Refer to settings section

# Merchant frontend

# From the merchant frontend

The merchant must redirect the customer with a URL pointing to the frontend of Pledg:

  • The URL prefix is either this one for test purposes or this one for production.
  • The path of the URL is

/purchase : offer access to 1 payment solution (=1 merchant uid)

/payment_solutions : offer access to 1-N payment solution(s) (=1 company uid)

  • It is recommended to add a random text at the end of the path to prevent any caching effect

The settings are passed as parameters of this URL.

If the parameters are signed, a unique parameter signature is passed to the URL.

# Back to the merchant frontend

In case of success,

  • The customer is redirected to redirectUrl?pledg_result={}.
  • Formerly, customer was redirected to redirectUrl?pledg_result={result}, where result is the result returned by the solution.

In case of error, the customer is redirected to cancelUrl?pledg_error={error}, where error is the error returned by the solution. The error is signed if there is a secret in the merchant configuration.

# Code sample

# HTML


<body>
...
<!-- The button to open the Pledg payment funnel -->
<button id="pledg-button" type="button" onclick="redirect()">Pay in installments</button>
...
<!-- This script contains the call to the redirection - See the "Javascript" section below -->
<script type="text/javascript">
...
</script>
</body>

# Javascript

<script type="text/javascript">

  function getRandomText() {
      var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
      var randomtext = ""
      for (var i = 0; i < 5; i++)
          randomtext += possible.charAt(Math.floor(Math.random() * possible.length));
      return randomtext
  }

  function buildUrlEncodedFormData(obj) {
      var params = [];
      for (var param in obj)
          params.push(encodeURIComponent(param) + "=" + encodeURIComponent(obj[param]));
      return params.join("&");
  }

  function redirect() {
    const params = {
      merchantUid: "mer_uid",
      amountCents: 30550,
      email: "[email protected]",
      title: "STAY IN LONDON",
      subtitle: "Fly + Hotel 2 nights (3 rooms)",
      reference: "order_123",
      firstName: "Gaëlle",
      lastName: "Guéguen",
      metadata : {"departure-date": "2022-03-30"},

      // Parameters below are specific to the integration by redirection
      redirectUrl: "https://www.pledg.co",
      cancelUrl: "https://www.pledg.co",
    }

    params['metadata'] = JSON.stringify(params['metadata'])
    queryString = buildUrlEncodedFormData(params)
    window.location.href = `{HOST}/purchases?{queryString}&{getRandomText()}`
  }
  
</script>

The value of URL is described there.

# Demos

Examples of integrations by redirection are avalable in back mode (opens new window), transfer mode (opens new window).

An exemple of integration by redirection using signature is available there (opens new window).