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:

Basic Dynamic Checkout implementation — Simple Dynamic Checkout implementation

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]"
    }
  },
});

Reacting to payment flow events

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

window.addEventListener("processout_dynamic_checkout_payment_success", function (event) {
  // Handle the event.
});

Every event has information about it attached. You can see it by accessing event.detailproperty.

Event	Description
`processout_dynamic_checkout_loading`	Fired when the widget starts loading and requests invoice details
`processout_dynamic_checkout_ready`	Fired when the widget has rendered available payment methods and is ready to use
`processout_dynamic_checkout_invoice_fetching_error`	Fired when fetching invoice details fails
`processout_dynamic_checkout_no_dynamic_checkout_configuration`	Fired when the invoice has no dynamic checkout configuration or payment methods
`processout_dynamic_checkout_payment_submitted`	Fired when the shopper clicks on the payment button
`processout_dynamic_checkout_payment_pending`	Fired when the payment requires asynchronous completion or confirmation
`processout_dynamic_checkout_payment_success`	Fired when a payment is successfully completed for the invoice
`processout_dynamic_checkout_payment_error`	Fired when a payment attempt fails at any stage after checkout starts
`processout_dynamic_checkout_payment_cancelled`	Fired when the shopper cancels the payment
`processout_dynamic_checkout_google_pay_load_error`	Fired when Google Pay cannot initialize or load payment data
`processout_dynamic_checkout_apple_pay_new_session`	Fired when a new Apple Pay session is successfully created
`processout_dynamic_checkout_apple_pay_session_error`	Fired when Apple Pay session creation fails
`processout_dynamic_checkout_apple_pay_authorized_post_process`	Fired after Apple Pay authorization, before final payment completion handling
`processout_dynamic_checkout_delete_payment_method_success`	Fired after a saved payment method is deleted successfully
`processout_dynamic_checkout_delete_payment_method_error`	Fired when deleting a saved payment method 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:

Property	Description	Data type
`payButtonText`	Change the payment method's pay button text	Text
`enforceSavePaymentMethod`	Enforces saving a payment method when client secret is provided	Boolean (true/false)
`hideSavedPaymentMethods`	Hides the customer's saved payment methods section	Boolean (true/false)
`cvcLabel` , `cvcPlaceholder`	Change the label and placeholder of the CVC input field	Text

Supported theme properties:

Property	Description	Format
`payButtonColor`	Background color of the submit button	CSS color
`payButtonTextColor`	Text color of the submit button	CSS color