Payment-method icon

Zip Component

Add Zip to your Web Components integration.

This page explains how to add Zip to your existing Web Components integration.

Requirements

Select which endpoint you are using:

API reference

Select which endpoint you are using:

Component configuration

Step 1: Create a DOM element

Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:

 <div id="zip-container"></div>

Step 2: Create an instance of the Component

v6.0.0 or later

Create an instance of the Component, passing:

  • Your instance of AdyenCheckout.
const zip = new Redirect(checkout, { type: 'zip' }).mount('#zip-container');

Use the create method of your AdyenCheckout instance, in this case checkout, to create the Component:

const zipComponent = checkout.create('zip').mount('#zip-container');

Recurring payments

We support recurring transactions for Zip. To make recurring payments, you need to:

  1. Create a shopper token.
  2. Use the token to make future payments for the shopper.

Create a token

To create a token, include in your /payments request:

  • storePaymentMethod: true
  • shopperReference: Your unique identifier for the shopper.

When the payment has been settled, you receive a webhook containing:

  • eventCode: RECURRING_CONTRACT
  • originalReference: The pspReference of the initial payment.
  • pspReference: This is the token that you need to make recurring payments for this shopper.

Make sure that your server is able to receive RECURRING_CONTRACT as part of your standard webhooks. You can enable the RECURRING_CONTRACT event code in the webhook settings page.

Make a payment with a token

To make a payment with the token, include in your /payments request:

  • paymentMethod.storedPaymentMethodId: The pspReference from the RECURRING_CONTRACT.

    You can also get this value using the /listRecurringDetails endpoint.

  • shopperReference: The unique shopper identifier that you specified when creating the token.

  • shopperInteraction: ContAuth.

  • recurringProcessingModel: Subscription or UnscheduledCardOnFile.

For more information about the shopperInteraction and recurringProcessingModel fields, refer to Tokenization.

Test and go live

Create Zip test accounts using the credentials on Zip's test credentials page. You can then use your test account to make a payment in the test environment.

Check the status of Zip test payments in your Customer Area > Transactions > Payments.

Before you can accept live Zip payments, you need to submit a request for Zip in your live Customer Area.

See also