PAY.Parts (beta)

A suite of pre-built UI components that you can embed in your own checkout to accept payments.

🚧

Pay.Parts is in private Beta If you are interested in PAY.Parts or if you want to join the private beta, please contact your account manager.

Different components

ComponentVisual
Payment Method OptimizerComing soon: The last and most effective payment method, based on earlier usage, conversion and pricing of the Payment Method.
Card Network Payment form
Alternative Payment methods
Checkout buttons
Gifcard Redeem form
👍

View a full working demo; https://zero-parts.pay.nl/


A vibe-coded proof of concept

To indicate how easy it is to integrate PAY.Parts we have vibe-coded a proof of concept with one single prompt.



Introduction

The frontend must include PayParts.js, a JavaScript SDK developed by Pay. This SDK is responsible for rendering the payment UI components directly on your checkout page.

When the consumer is ready to proceed, the merchant backend requests a session token from Pay. Once the session token is retrieved, PayParts.js can be initialized and the required components can be mounted.

Your client then completes the payment. If 3D Secure authentication is required, the payer is redirected to a 3D Secure page to finalize the verification. After the payment process is completed (successfully or not), Based on this result, the appropriate order confirmation or failure page can be shown to the consumer.

Some flows result in a redirect flow where the user is returned to your ReturnURL where you can confirm the payment state, other flows will result in a direct confirm of state based on the PaymentComplete Event.

We send a webhook to the merchant backend with the results of the payment, based on the Exchange URL configured in the ServiceLocation or injected via the PayLoad.

Setting up a checkout on your website using PayParts involves a few straightforward steps and is relatively easy to implement.

Flowchart


Available components

ComponentWhat it is
checkout-buttonsComponent that combines the Apple Pay, PayPal and Google Pay buttons
card-paymentsComponent to enter card details (name, cardnumber (Pan), expiry date and CVC). See section below for specific PCI requirements for this component
applepayComponent to add the Apple Pay wallet button
googlepayComponent to add the Google Pay wallet button
paypalComponent to add the PayPal wallet button
methodsFull payment method list from the payment methods that are enabled on the service. The same as our Hosted Checkout.
giftcardsGiftcards to accept a variety of giftcards on checkout page.

PCI requirements for the Card Payments component

Before you can request, process, or store cardholder data on your website, you must comply with the Payment Card Industry Data Security Standard (PCI DSS). This is a set of security requirements designed to ensure that all companies handling card information maintain a secure environment.

Read the knowledgebase article: https://support.pay.nl/en/knowledge/pay-parts-requirements

Requirements for ApplePay and GoogleWallet button

To enable Apple Pay and Google Wallet buttons on your own domain, your domain must be registered with both Apple and Google. We handle this enrollment automatically for the URLs you provide during signup.

Apple Pay

  1. You have to host our .well known file at https://yoururl.com/.well-known/apple-developer-merchantid-domain-association
    Here is the file: Right click [save as]
  2. Then contact our support with the request to have your domain whitelisted.
  3. Make sure you've finished boarding Apple Pay under Sales Locations in the dashboard. Sales locations portal
  4. After confirmation from boarding you should be able to accept payments with Apple Pay!

Google wallet

[Google wallet is currently not enabled for production]

Read the knowledgebase article: TBD

How to integrate Pay.Parts

Use the following steps to integrate Pay.Parts