Skip to main content

Client integration

After the create session request has been completed and the sessionId has been obtained, the next step is to render Ledyer as a payment alternative, you should use the information provided in the create session response.

<!-- this id is required -->
<script
  id="ledyer-payments"
  src="https://payments.sandbox.ledyer.com/bootstrap.js"
></script>

Options​

Handling Sessions and secrets​

The sessionId string should be stored and re-used until the purchase has been completed or the expiresAt time has been reached.

Authorize a payment​

Once a user has selected Ledyer as payment method and proceeds, the client event authorize should be called to provide ledyer with billing address, shipping address and customer information.

window.ledyer.payments.api.authorize(authArgs);

The authArgs object contains several properties, one of which is the shippingAddress. This property is optional and may be omitted entirely for digital goods. In instances where physical goods are involved and a shippingAddress is not provided, the billing address will automatically be used as the shipping address. This ensures flexibility in handling different types of transactions.

const authArgs = {
  sessionId: "ps_2A123Kfl8maqB4sJOG0pKi06aFk",
  customer: {
    companyId: "556751-5019",
    email: "bodil.andersson@alfonskritor.com",
    firstName: "Bodil",
    lastName: "Andersson",
    phone: "0700000000",
    reference1: "",
    reference2: "",
    billingAddress: {
      attentionName: "",
      careOf: "",
      city: "Stockholm",
      companyName: "Alfons kritor AB",
      country: "SE",
      postalCode: "11359",
      streetAddress: "Sveavägen 49"
    },
    shippingAddress: {
      attentionName: "",
      careOf: "",
      city: "Stockholm",
      companyName: "Alfons kritor AB",
      country: "SE",
      postalCode: "11359",
      streetAddress: "Sveavägen 49",
      contact: {
        email: "",
        firstName: "",
        lastName: "",
        phone: "",
      }
    }
  }
};

Listen for ledyer payment promise​

All the required information has to be collected before the authorize event is called.

const handleProceedWithLedyer = async () => {
  try {
    const authResponse = await window.ledyer.payments.api.authorize(authArgs);

    // ... some time will pass while the user is interacting with the dialog

    if (authResponse) {

      // if state is authorized, the order is ready to be created
      if (authResponse.state === "authorized") {
        // Get the authorization token to create an order from your backend
        const authToken = authResponse.authorizationToken;
      }

      if (authResponse.state === "awaitingSignatory") {
        // A signatory is required to complete the purchase
      }

      // redirect the user to a success page
    }
  } catch (error) {
    // Handle error
  }
};

Also take a look at best practises. For more detailed information.