Migration

Migrating from previous versions

If you were using the previous version of Checkout, these are the steps you should follow to upgrade to the latest version:

Script tag

Replace the previous Checkout script with the new one:

<script src="https://cdn.easypay.pt/checkout/2.4.0/"></script>

If you wish to further migrate to an NPM package, follow the guide to install @easypaypt/checkout-sdk.

Button

Replace the <div id="easypay-checkout"></div> with a button and give it your preferred text:

<button id="easypay-checkout">Pay with easypay</button>

Checkout Setup

Replace the call to EasypayCheckoutUI.setup with the new easypayCheckout.startCheckout:

easypayCheckout.startCheckout(manifest, {
  display: 'popup',
})

If you were using the modal.onCancel, modal.onClose or modal.onComplete options, add the desired success/close behaviour(s):

let successfulPaymentInteraction = false

function mySuccessHandler() {
  successfulPaymentInteraction = true
  // Previous modal.onComplete behaviour
}

function myCloseHandler() {
  if (successfulPaymentInteraction) {
    // Previous modal.onClose behaviour
  } else {
    // Previous modal.onCancel behaviour
  }
}

easypayCheckout.startCheckout(manifest, {
  display: 'popup',
  onSuccess: mySuccessHandler,
  onClose: myCloseHandler,
})

UI Configuration

If you used any of the following configuration options during Checkout creation:

  • language
  • logo_url
  • hide_details

You should move them to the initialisation options of the startCheckout function:

easypayCheckout.startCheckout(manifest, {
  display: 'popup',
  language: 'en', // or 'pt_PT'
  logoUrl: 'https://path.com/to/image.png',
  hideDetails: true, // or false
})

To configure the remaining UI appearance, use the desired styling options.

Testing

To test your implementation without actually transferring funds, you should:

  • Create the Checkout session using the testing API endpoint: api.test.easypay.pt
  • Set the testing property of the SDK to true
easypayCheckout.startCheckout(manifest, {
  display: 'popup',
  testing: true,
})

Remember to remove the testing property when switching to the api.prod.easypay.pt endpoint, otherwise Checkout will be unable to find the created Checkout sessions.

For all the details and options, check the Guide and Reference pages.

Reference Overview