Skip to main content

Zip Checkout​

The fastest way to build beautiful payment experiences for your customers

Zip Checkout lets you create a secure payment form, hosted by Zip, that give your customers a pleasant payment experience. Checkout is responsive to the device your customers are paying in, and will present the form accordingly. You can quickly collect payments from your customers with a top-rate experience, with the following benefits:

  • Mobile-first, desktop-ready — No-compromise responsive design on mobiles, laptops, and tablets. The form renders well on any device
  • Helpful, less friction — Every data format is assiduously validated, such as cards, email addresses, with useful error messages, so customers know how to complete the process
  • Make it your own — Customize background and button colors; use your own logo; or collect shipping and billing address or not Your brand, your Checkout.
  • Multiple payment methods — Select one or many or all payment methods supported by Zip. It's your call.
  • Compliance built-in — With two-factor authentication and 3D Secure support, you mitigate fraud and enhance compliance.
note

You will need a Zip account to use this feature. Get your account now.

Checkout is a low-code platform to get your web or native up and running to collect payments from customers. You will need the following:

  • Your secret key

    Look it up in your Dashboard. From the menu on the left, click on Developers, and look for API keys. Your secret key is hidden behind a button. Press the button to reveal the key, copy it, and save in a safe place.

  • A backend server

    You will be making calls to Checkout's endpoints using a backend server. Use any language or framework of your choice.

  • Redirect your customer to Zip Checkout

    Add a payment button to your website that calls a server-side endpoint to create a Checkout Session.

    <html>
      <head>
        <title>Buy now</title>
      </head>
      <body>
        <form action="/create-checkout-session" method="POST">
          <button type="submit">Checkout</button>
        </form>
      </body>
    </html>

    A Checkout Session is a rendering of your instructions to Zip about what to offer your customer in terms of payment options. You can set the following options:

    • Payment methods to accept
    • List of items
    • Billing address collection
    • Shipping address collection

    You will need to specify:

    • success_url - a page on your website to redirect your customer after they complete the payment.
    • cancel_url - a page on your website to redirect your customer if they cancel the payment.
info

Checkout Sessions expire six (6) hours after creation.

const fetch = require('node-fetch');

const resp = await fetch(
  `https://checkout.zip.ph/v2/sessions`,
  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: 'Basic ' + Buffer.from('<username>:<password>').toString('base64')
    },
    body: JSON.stringify({
      amount: 5000,
      billing_address_collection: true,
      branding: {
        icon: 'https://example.com/public/icon.svg',
        logo: 'https://example.com/public/logo.svg',
        use_logo: true,
        primary_color: '#339af5',
        secondary_color: '#0074d4'
      },
      cancel_url: 'https://example.com/cancel?ref_id=e900558b-8919-4984-94ca-330bbd26bb11',
      client_reference_id: 'e900558b-8919-4984-94ca-330bbd26bb11',
      currency: 'php',
      customer: 'cus_SDF8wrecdsaic4sw',
      customer_email: '[email protected]',
      line_items: [
        {
          name: 'Surf board',
          description: 'Custom surf board, Hawaii',
          quantity: 1,
          amount: 127500,
          currency: 'PHP',
          image: 'https://example.com/surf-board/custom_board.jpeg'
        }
      ],
      locale: 'en',
      metadata: {},
      payment_method_types: ['card'],
      shipping_address_collection: {allowed_countries: []},
      submit_type: 'pay',
      success_url: 'https://example.com/success?ref_id=e900558b-8919-4984-94ca-330bbd26bb11'
    })
  }
);

const data = await resp.json();
console.log(data);

Fire up your web server. For example, if you want to use PHP's built in web server, then run the following command on your terminal. (We assume you know how to set these all up.)

$ php -S localhost:8000

Your server should print a response on the screen and the body would look something like this (clipped):

{
    "id": "cs_dPYJwLDmvKA41z9p",
    "object": "checkout.session",
    "amount_subtotal": 10000,
    "amount_total": 10000,
    ...
    "payment_status": "unpaid",
    "payment_url": "https://checkout.zip.ph/cs_dPYJwLDmvKA41z9p",
    "shipping": null,
    "shipping_address_collection": null,
    "submit_type": "pay",
    "success_url": "https://d30w64u2si0u8h.cloudfront.net/success",
    "updated": 1631023627069
}

Take the payment_url (ie https://checkout.zip.ph/cs_dPYJwLDmvKA41z9p) and redirect your customer there.

Show a success page​

Once the customer is redirected, Checkout takes care of managing the payment experience on your behalf. Your customer would typically:

  1. Input an email and name (if you did not pre-fill these fields).
  2. Select a payment methods from the Checkout form.
  3. Enter information, such as account or card number, and other required information.
  4. Be redirected to the payment method's own user interface.
  5. Enter a PIN or one-time password.
  6. Get some confirmation of success or failure.

On success, Checkout will call your success_url, and you should display an informative page that shows your customer such things as payment information, amount charged, and date and time. Your contact information would be useful, too.

A minimal sucess page:

<html>
  <head><title>Thanks for your order!</title></head>
  <body>
    <h1>Salamat po!</h1>
    <p>
      We appreciate your business!
      If you have any questions, please email
      <a href="mailto:[email protected]">[email protected]</a>.
    </p>
  </body>
</html>

You should be able to see the successful payment listed in the Payments page in your Dashboard. The detailed view would contain more information that you can use to fulfill the order.

Congratulations! You have just made your first Checkout integration.