Visa Checkout
Visa Checkout offers an alternative way for your consumers to provide their card details. In this payment journey a user must log in with their Visa Checkout account, or create an account in order to log in. They must then enter and save their card details to their Visa Checkout account or select a previously saved card. Once a card has been selected the user will be returned to the payment form to complete their payment.
Boarding with Visa Checkout
Contact us, and we will set up your merchant account within our Visa Checkout integration. You will then be given the following data:
| Description | |
|---|---|
| API Key | Your credential for accessing the Visa Checkout API. You’ll need this if you’re integrating to Visa Checkout on your own payment page. If you’re using our hosted payment page you don’t need this key. |
Processing transactions
Visa Checkout is available with both Your Payment Page and the PaySuite Payment Page.
When using Your Payment Page
If you want to process a Visa Checkout transaction on your own payment page, you’ll first need to integrate your payment page with the Visa Checkout JavaScript SDK. For more information on this, see Visa Checkout’s own documentation.
Capture the “Call ID” Visa Checkout sends you via their JavaScript API. You will need this to process a transaction for the selected card.
Retrieving card information
Once the customer has gone through the Visa Checkout journey on your payment page, we offer a service for retrieving some basic information about the card, should you want to display it to the customer before they confirm the transaction.
Get Payment Data
GET /acceptor/rest/visacheckout/{instId}/getPaymentData/{callId}curl -X GET "{targetEnvironmentPath}/acceptor/rest/visacheckout/{instId}/getPaymentData/{callId}" \
-u "{apiUser}:{apiPassword}" \
-H "Accept: application/json"HTTP/1.1 200
{
"externalClientId": "test-account",
"paymentRequest": {
"currencyCode": "GBP",
"subtotal": 10,
"total": 10
},
"userData": {
"userFirstName": "Test",
"userLastName": "User",
"userFullName": "Test User",
"userName": "[email protected]",
"encUserId": "kbmMWubCjnnq2z+Im9NJ9YrTVcmyV6b4QfbMgyqNJqQ=",
"userEmail": "[email protected]"
},
"creationTimeStamp": 1523356649334,
"paymentInstrument": {
"id": "TAt98bssw11v/wL0z+uXrckSbecuK17mn+9QD923XVI=",
"lastFourDigits": "4242",
"binSixDigits": "424242",
"paymentType": {
"cardBrand": "MASTERCARD",
"cardType": "DEBIT"
},
"billingAddress": {
"personName": "Test User",
"firstName": "Test",
"lastName": "User",
"line1": "123 Bogus Street",
"city": "Fakeville",
"postalCode": "FA12 3KE",
"countryCode": "GB",
"phone": "01234 567890",
"default": false
},
"verificationStatus": "VERIFIED",
"expired": false,
"cardArts": {
"cardArt": [
{
"baseImageFileName": "https://sandbox.secure.checkout.visa.com/VmeCardArts/M_4ihRlUegCr1z4-J-F4iCjJf1W8m7P9NG1MtIbFAvM.png",
"height": 105,
"width": 164
}
]
},
"issuerBid": "10077178",
"nameOnCard": "Test User",
"cardFirstName": "Test",
"cardLastName": "User",
"expirationDate": {
"month": "01",
"year": "2019"
}
},
"riskData": {
"advice": "UNAVAILABLE",
"score": 0,
"avsResponseCode": "0",
"cvvResponseCode": "0",
"ageOfAccount": 63,
"firstUseAuthenticated": false
},
"visaCheckoutGuest": false,
"walletInfo": {
"walletName": "VISA_CHECKOUT"
}
}Our payment data endpoint shown above returns the data from Visa Checkout verbatim, and as such this data is subject to change without notification from us. For more information, please consult the Visa Checkout Integration Guide for documentation of the ConsumerInformation data structure.
Submitting the transaction
After the Visa Checkout journey has been completed and you’ve retrieved the Call ID, you can send it to us over our API and we will process the transaction. For more information about our full card payment API, see our Payment documentation.
Submit Transaction
POST /acceptor/rest/transactions/{instId}/payment{
"transaction" : {
"currency" : "GBP",
"amount" : 10.00,
"commerceType" : "ECOM"
},
"paymentMethod" : {
"visaCheckout" : {
"callId" : "765398485730564390846"
}
}
}curl -X POST "{targetEnvironmentPath}/acceptor/rest/transactions/{instId}/payment" \
-u "{apiUser}:{apiPassword}" \
-H "Content-Type: application/json" \
-d '{
"transaction" : {
"currency" : "GBP",
"amount" : 10.00,
"commerceType" : "ECOM"
},
"paymentMethod" : {
"visaCheckout" : {
"callId" : "765398485730564390846"
}
}
}'HTTP/1.1 201
{
"processing": {
"authResponse": {
"statusCode": "00",
"acquirerName": "B&S Card Services",
"message": "Approved",
"gatewayReference": "1343434032",
"gatewaySettlement": "2018-04-06",
"gatewayMessage": "Success",
"avsAddressCheck": "FULL_MATCH",
"avsPostcodeCheck": "FULL_MATCH",
"cv2Check": "MATCHED",
"status": "AUTHORISED"
},
"route": "MCPE"
},
"paymentMethod": {
"registered": false,
"card": {
"cardFingerprint": "=EjkiH3puA2X0ItEYbj3ZV39kVeA",
"new": true,
"cardType": "MC_DEBIT",
"cardUsageType": "DEBIT",
"cardScheme": "MASTERCARD",
"cardCategory": "DEBIT",
"maskedPan": "424242******4242",
"expiryDate": "0130",
"issuer": "PAY360 TESTING",
"issuerCountry": "GBR",
"cardHolderName": "Test User",
"source": "VISA_CHECKOUT"
},
"billingAddress": {
"line1": "123 Bogus Street",
"city": "Fakeville",
"postcode": "FA12 3KE",
"countryCode": "GBR"
},
"paymentClass": "CARD"
},
"transaction": {
"transactionId": "12801845000",
"status": "SUCCESS",
"type": "PAYMENT",
"amount": 10,
"consumerSpend": 10,
"currency": "GBP",
"transactionTime": "2018-04-05T12:51:56.839Z",
"receivedTime": "2018-04-05T12:51:56.839Z"
},
"outcome": {
"status": "SUCCESS",
"reasonCode": "S100",
"reasonMessage": "Authorised"
}
}When using the PaySuite Payment Page
Our payment pages take care of setting up the Visa Checkout journey for you. We handle the JavaScript integration and the gathering of card information. You can customise the look and feel of our payment pages as much as you like, including which of the card information data points from Visa Checkout are displayed on the page.
Be sure to pay heed to Visa Checkout’s branding guidelines if you change how things look.
By default, Visa Checkout will appear as the first payment method on the page. This can be overridden in the session initialisation request.
Changing Payment Method Ordering
POST /hosted/rest/sessions/{instId}/payments{
"session" : {
"returnUrl" : {
"url" : "http://www.example.com"
}
},
"transaction" : {
"money" : {
"currency" : "GBP",
"amount" : {
"fixed": 10.00
}
}
},
"features": {
"paymentMethods": ["card", "visacheckout", "paypal"]
}
}curl -X POST "{targetEnvironmentPath}/hosted/rest/sessions/{instId}/payments" \
-u "{apiUser}:{apiPassword}" \
-H "Content-Type: application/json" \
-d '{
"session" : {
"returnUrl" : {
"url" : "http://www.example.com"
}
},
"transaction" : {
"money" : {
"currency" : "GBP",
"amount" : {
"fixed": 10.00
}
}
},
"features": {
"paymentMethods": ["card", "visacheckout", "paypal"]
}
}'HTTP/1.1 201 Created
{
"sessionId": "SMjpzZjk_3-VG07Ukg2_MwlJ-",
"redirectUrl": "https://secure.pay360.com/hosted/SMjpzZjk_3-VG07Ukg2_MwlJ-/begin/SMjpzZjk_3-VG07Ukg2_MwlJ-",
"status": "SUCCESS"
}For more information on session initialisation requests, read our Take a Payment documentation for the PaySuite Payment Page.