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:
- Add the ability to accept customer consent for a card in your UI
- Upon confirmation of customer consent, call the Customer Consent API to save the consent
- 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:
- Collect the amount for the recurring charge and create a scheduled job within your application
- 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.
Card Type | Good Card | Declined/Failed Card |
---|---|---|
Visa | 4111111111111111 | 4012888888881881 |
MasterCard | 5555555555554444 | 5105105105105100 |
MasterCard (2-series bin) | 2223003122003222 | 2720992720992729 |
American Express | 378282246310005 | 371449635398431 |
Discover | 6011111111111117 | 6011000990139424 |
Diners Club | 30569309025904 | 30207712915383 |
JCB | 3569990010030400 | 3528327757705979 |
Updated 6 months ago