ProcessOut.js enables the integration of Dynamic Checkout on Web, by importing our SDK hosted on our CDN. After creating your Dynamic Checkout configuration using our Dashboard or API you can enable the end-to-end Dynamic Checkout payment flow by importing the script on your website.

To set up the Dynamic Checkout Web SDK you will need to retrieve these parameters from your application’s backend:

• Project ID
• Invoice ID
• Client secret (optional). The client secret is not required if you do not want to let users save and re-use payment methods.

Setup

To be able to use the Dynamic Checkout utilities from our Web SDK, you need to attach the ProcessOut.js script to your HTML file and create a HTML element that will act as the mounting point for Dynamic Checkout:

<div id="dynamic-checkout-container"></div>

<script src="https://js.processout.com/processout.js"></script>

After linking the script your code will have access to the global ProcessOut instance. This will help you to set up ProcessOut Client using the invoice ID, project ID, and optionally the client secret:

const client = new ProcessOut.ProcessOut('{projectId}');

const dynamicCheckout = client.setupDynamicCheckout({
  invoiceId: '{invoiceId}',
  clientSecret: '{clientSecret}' // Optional.
});

dynamicCheckout.mount("#dynamic-checkout-container");

After that you should see the Dynamic Checkout widget displayed on your website:

Additional data

Use additionalData to pass gateway-specific parameters to Dynamic Checkout. These values are attached to the redirection URL as additional_data[...] query parameters, allowing you to provide extra information required by a given payment method.

const dynamicCheckout = client.setupDynamicCheckout({
  invoiceId: '{invoiceId}',
  additionalData: {
    'paypal-rest': {
      issuer_id: "1234",
    },
    everypay: {
      customer_email: "[email protected]"
    }
  },
});

Event System

Dynamic Checkout dispatches browser events on every important step of the payment. This enables you to react on them however you like. To react to events, you need to add event listeners. For example:

window.addEventListener("processout_dynamic_checkout_payment_success", function (event) {
  console.log(event.detail);
});

Event reference

Event payloads

All events include a common set of fields. Additional fields are listed per event.

Common fields (present in every event)

processout_dynamic_checkout_loading

Fired when the widget starts fetching invoice details. payment_method_name and payment_method_display_name are always null.

No additional fields.

processout_dynamic_checkout_ready

Fired when payment methods have been rendered and the widget is ready for interaction. payment_method_name and payment_method_display_name are always null.

No additional fields.

processout_dynamic_checkout_invoice_fetching_error

Fired when the invoice cannot be fetched.

processout_dynamic_checkout_no_dynamic_checkout_configuration

Fired when the fetched invoice has no payment_methods configured.

No additional fields beyond common fields.

processout_dynamic_checkout_payment_submitted

Fired immediately when the shopper clicks the pay button, before any network request.

processout_dynamic_checkout_payment_success

Fired when the payment completes successfully.

processout_dynamic_checkout_payment_error

Fired when the payment fails at any stage.

processout_dynamic_checkout_payment_cancelled

Fired when the shopper cancels the payment flow (e.g. closes the APM redirect popup).

processout_dynamic_checkout_payment_pending

Fired when the payment is submitted but awaits asynchronous confirmation (e.g. bank redirect, push notification).

processout_dynamic_checkout_google_pay_load_error

Fired when the Google Pay SDK fails to initialize or when isReadyToPay rejects. payment_method_name is always "google_pay".

processout_dynamic_checkout_apple_pay_new_session

Fired when an Apple Pay session is successfully created. payment_method_name is always "apple_pay".

No additional fields beyond common fields.

processout_dynamic_checkout_apple_pay_session_error

Fired when Apple Pay session creation fails. payment_method_name is always "apple_pay".

processout_dynamic_checkout_apple_pay_authorized_post_process

Fired after the shopper authorizes the Apple Pay payment but before the SDK calls session.completePayment. Use this to show an intermediate loading state. payment_method_name is always "apple_pay".

No additional fields beyond common fields.

processout_dynamic_checkout_delete_payment_method_success

Fired when a saved payment method is successfully deleted by the shopper.

No additional fields beyond common fields.

processout_dynamic_checkout_delete_payment_method_error

Fired when a saved payment method deletion fails.

Localization

You can localize all of the text displayed in Dynamic Checkout widget by passing the locale property when setting up Dynamic Checkout:

const dynamicCheckout = client.setupDynamicCheckout({
  invoiceId: '{invoiceId}',
  clientSecret: '{clientSecret}',
  locale: 'pl'
});

The currently supported locales are de, en, es, fr, it, ja, ko, pl and pt. Please get in touch with your ProcessOut account manager to request support for new locales.

Customization

You can configure some behavioural aspects and the theme of the widget by passing additional arguments when setting up Dynamic Checkout:

const config = {
  invoiceId: '{invoiceId}',
  clientSecret: '{clientSecret}',
  payButtonText: "Pay now",
  // ...
};

const theme = {
  payButtonColor: "red",
  payButtonTextColor: "white"
};

const dynamicCheckout = client.setupDynamicCheckout(config, theme);

Supported configuration properties:

Supported theme properties: