Integrating Wink Payments

Add the Wink Payment component to your webpage or app

🚧

Before you continue

Before you can integrate with Wink Payments you need to be integrated with Wink Login. Please see the Integration guide here to get started.

Wink Payment is a separate application from Wink Login, that allows you to enable a broad range of payment methods for your customers. The current way to add the Wink Payment component to your site is to use an automatically rendered iFrame provided by Wink.

To create a Wink Payment component that uses the default settings, add the below code (or similar in another language) to your checkout flow.

In order to successfully integrate with Wink Payment you'll need to pass the access_token you received from Wink Login and the full user name in the name field as well as use the following link as the payment url: https://qa.winkpayments.io

📘

iFrame Package

Wink is using the npm package iframe-resizer-react. Below is an example of how to use this library to communicate with Wink Payment.

import React, { useState, useRef, useEffect } from 'react';
import IframeResizer from 'iframe-resizer-react';

function Cards() {
  const iframeRef: any = useRef<HTMLIFrameElement>(null);
  const [messageData, setMessageData] = useState<any>();
  const onResized = (data: any) => { // set data in state for further use
    setMessageData(data); 
  };

  const onMessage = (data: any) => { //receive messages from Wink Payment
    setMessageData(data);
  };
  
  useEffect(() => {
    // sending message from parent to child
    const dataToSendToPayment = {
      access_token: <!-- Access token which is stored after login ->,
      name: <!-- user full name ->,
    };
    iframeRef.current.sendMessage(dataToSendToPayment, "https://qa.winkpayments.io");
  });
  
   return (
    <>
    <IframeResizer            
            forwardRef={iframeRef}
            heightCalculationMethod='lowestElement'
            inPageLinks
            onMessage={onMessage}
            onResized={onResized}
            src='https://qa.winkpayments.io'            
            autoResize={false}            
          />
    </>
  }
export default Card;

Receiving Messages from Wink Payments iFrame

When Wink Payments has an active card, winkCardToken can be sent to the parent domain. That winkCardToken is received with the help of the below function.

const onMessage = (data: any) => { //receive messages from Wink Payment
    setMessageData(data);
  };

📘

Verify Response Data

If you want to see the data coming back from Wink Payments, add console.log(data) to the above snippet.

Payment APIs for Merchant Initiated Payments

Merchant Initiated Payments or Subscription payments can be used with Wink for charging a user's payment method on a periodic basis without the user logging in with Wink for authorizing the payment each time. In order to achieve this, the user must select a card they want to pre-authorize for the scheduled payment.

📘

API Reference

The Wink Payment API reference can be found here

In order to enable Merchant Initiated Payments (subscription payments) the following steps need to be followed:

1. Add the ability to accept customer consent for a card in your UI
2. Upon confirmation of customer consent, call the Customer Consent API to save the consent
3. Store the winkCardToken from the response within your system so it can be used for future payments

In order to create a merchant initiated payment the following steps need to be followed:

1. Collect the amount for the recurring charge and create a scheduled job within your application
2. Call the Purchase API using the winkCardToken from the Customer Consent API.
   See example below:

{
  "winkCardToken": "card_qGXnv5pcvZIfvl",
  "amount": 12.34,
  "currencyCode": "USD"
}

📘

winkCardToken for Merchant Initiated Payment

The same Credit Card will have two different winkCardToken values if the customer has consented to a Merchant Initiated Payment. The other token will be for a standard Customer Initiated Payment.

Test Card Data

This table can be used when creating cards and transactions for testing purposes.