{"_id":"593fe2272418a7003933a380","category":{"_id":"593fe2262418a7003933a365","version":"593fe2262418a7003933a35e","project":"57336fd5a6a9c40e00e13a0b","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-11-03T20:45:01.593Z","from_sync":false,"order":6,"slug":"topics","title":"Guides"},"parentDoc":null,"user":"560d5913af97231900938124","project":"57336fd5a6a9c40e00e13a0b","version":{"_id":"593fe2262418a7003933a35e","project":"57336fd5a6a9c40e00e13a0b","__v":1,"createdAt":"2017-06-13T13:01:26.536Z","releaseDate":"2017-06-13T13:01:26.536Z","categories":["593fe2262418a7003933a35f","593fe2262418a7003933a360","593fe2262418a7003933a361","593fe2262418a7003933a362","593fe2262418a7003933a363","593fe2262418a7003933a364","593fe2262418a7003933a365"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"3.21.2","version_clean":"8976.0.0-Basics","version":"8976-Basics"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-07-26T12:37:39.039Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":14,"body":"[Visa Checkout](https://usa.visa.com/pay-with-visa/visa-checkout.html) is a digital wallet that securely stores a shopper's payment and shipping details. It supports all major credit and debit card types, including Visa, MasterCard, American Express, and Discover. Visa Checkout yields conversion rates that far exceed traditional checkout, and enables your customers to make fast and easy payments across all their devices.\n\nBlueSnap supports Visa Checkout in both the Payment API and Extended Payment API.\n\n*The shopper experience with Visa Checkout*\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/ceef062-visa-checkout.png\",\n        \"visa-checkout.png\",\n        1280,\n        541,\n        \"#232473\"\n      ]\n    }\n  ]\n}\n[/block]\n#Supported Markets \nVisa Checkout is supported for shoppers and merchants in the following countries as a simple and secure payment method (updated 2/2017).\n[block:html]\n{\n  \"html\": \"<div id=\\\"cols\\\">\\n   <ul>\\n     <li>Argentina (AR)</li>\\n     <li>Australia (AU)</li>\\n     <li>Brazil (BR)</li>\\n     <li>Canada (CA)</li>\\n     <li>Chile (CL)</li>\\n     <li>China (CN)</li>\\n     <li>Colombia (CO)</li>\\n   </ul>\\n\\n   <ul>\\n     <li>France (FR)</li>\\n   \\t <li>Hong Kong (HK)</li>\\n     <li>Ireland (IE)</li>\\n     <li>Malaysia (MY)</li>\\n     <li>Mexico (MX)</li>\\n     <li>New Zealand (NZ)</li>\\n     <li>Peru (PE)</li>  \\n   </ul>\\n  \\n   <ul>\\n     <li>Poland (PL)</li>\\n     <li>Singapore (SG)</li>\\n     <li>South Africa (ZA)</li>\\n     <li>Spain (ES)</li>\\n     <li>United States (US)</li>\\n     <li>United Kingdom (UK)</li>\\n     <li>United Arab Emirates (AE)</li>\\n   </ul>\\n</div>\\n\\n<style>\\n  ul{\\ndisplay:inline-block;\\nvertical-align:top;\\n}\\n</style>\\n  \\n  \\n\"\n}\n[/block]\n#Implementing Visa Checkout\n\n##Step 1: Enable the Visa Checkout payment method\nFollow these steps to enable the Visa Checkout payment method in your BlueSnap account:\n1. Log in to your account in the BlueSnap Merchant Console.\n2. Go to **Checkout Page > Payment Methods**.\n3. Select **Show** next to **Visa Checkout**, and then click **Submit**. \n\n##Step 2: Add the Visa Checkout button & JS function to your checkout page\nAdd the Visa Checkout button & required JS library to your checkout page, as follows:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Button image\\n<img alt=\\\"Visa Checkout\\\" class=\\\"v-button\\\" role=\\\"button\\\" src=\\\"https://{environment}.secure.checkout.visa.com/wallet-services-web/xo/button.png\\\" />\\n\\n// Visa Checkout JS library\\n<script type=\\\"text/javascript\\\" src=\\\"https://{environment}-assets.secure.checkout.visa.com/checkout-widget/resources/js/integration/v1/sdk.js\\\"></script>\\n\\n// Visa JS function that invokes the lightbox\\n<script>\\nfunction onVisaCheckoutReady() {\\n\\tV.init({\\n\\t\\tapikey: ‘${apiKey}’,\\n\\t\\tsettings: {\\n\\t\\t\\tlocale: ‘${visaCheckoutLocale}’,\\n\\t\\t\\tdisplayName: ‘${displayName}’,\\t\\n\\t\\t\\tlogoUrl: ‘${logoUrl}’,\\n\\t\\t},\\n\\t\\tpayment: {\\n\\t\\t      cardBrands: [\\\"VISA\\\",\\\"MASTERCARD\\\",\\\"AMEX\\\",\\\"DINERS\\\",\\\"DISCOVER\\\"]\\n\\t\\t},\\t\\t\\n\\t\\tpaymentRequest: {\\n\\t\\t\\tcurrencyCode: ‘${currency}’,\\n\\t\\t\\tsubtotal: ‘${CheckoutSubtotal}’,\\n\\t\\t},\\n\\t\\tshipping: {\\n\\t\\t\\tcollectShipping: ‘${collectShipping}’,\\n\\t\\t},\\n\\t\\tdataLevel: \\\"NONE\\\"\\n\\t});\\n\\tV.on(\\\"payment.success\\\", function(payment) {\\n\\t// TODO: Handle success response from lightbox.\\n\\t// you should send “payment.callid” to BlueSnap via CreateWallet.\\n\\t});\\n\\tV.on(\\\"payment.cancel\\\", function(payment) {\\n\\t// TODO: Handle cancel response from lightbox.\\n\\t});\\n\\tV.on(\\\"payment.error\\\", function(payment, error) {\\n\\t// TODO: Handle error response from lightbox.\\n\\t});\\n}\\n\\n</script>\",\n      \"language\": \"html\",\n      \"name\": \"Visa Checkout button and JS library\"\n    }\n  ]\n}\n[/block]\n###Button Image\nThe image for the Visa Checkout button:\n**Sandbox:** `https://sandbox.secure.checkout.visa.com/wallet-services-web/xo/button.png`\n**Production:** `https://secure.checkout.visa.com/wallet-services-web/xo/button.png`\n\n###Visa Checkout JS Library\nThe JS library for Visa Checkout:\n**Sandbox:** `https://sandbox-assets.secure.checkout.visa.com/checkout-widget/resources/js/integration/v1/sdk.js`\n**Production:** `https://assets.secure.checkout.visa.com/checkout-widget/resources/js/integration/v1/sdk.js`\n\n###Field Descriptions\nThe fields in the JS function above should be completed as follows:\n  * **apikey**: (Required) Your Visa Checkout API key. This is a static value - you only need to create a single API key. For instructions, see [Create/Retrieve Visa Checkout API Key](/v4.0/docs/create-visa-checkout-api-key).\n  * **displayName**: (Optional) The merchant's name as it appears on the Review panel of the lightbox; typically, it is the name of your company. Format: Maximum 100 characters, either alphabetic, numeric, spaces, or the following characters: ! :::at::: # $ % ^ & * -' ? and period ( . ).\n  * **logoUrl**: (Optional) Secure (HTTPS) URL path to the logo to display in the Visa Checkout lightbox; otherwise, the default Visa Checkout logo appears. Your image must not exceed 174px wide and should be 34px high; oversize logos will be scaled to fit. Format: HTTPS URL; maximum 256 characters.\n  * **cardBrands**: (Required) Card brands that are accepted by BlueSnap (already provided in the example above).\n  * **currencyCode**: (Required) The currency with which to process the transaction. Format: ISO 4217 standard alpha-3.\n  * **subtotal**: (Required) Subtotal of the payment. Format: Numeric; maximum 9 digits before an optional decimal point and 2 decimal digits. Example: \"subtotal\" : \"9.00\".\n  * **collectShipping**: (Optional) Determines whether to obtain a shipping address from the consumer. Permitted values:\n    * **true**: Collect shipping address (default)\n    * **false**: Do not collect shipping address\n  * **dataLevel**: (Required) Should be set to “NONE”.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"**Visa Checkout Asset Placement and Usage Requirements**\\n\\nOn all pages where the shopper is presented with the Visa Checkout payment method (for example, the shopping cart page or payment page), you are required to implement the [Visa Checkout branding requirements](https://developer.visa.com/products/visa_checkout/guides#user_interface_guidelines).\\n\\n**Clickjacking Prevention Requirement**\\n\\nYou must provide code on each page that hosts a Visa Checkout button and headers on your server to prevent clickjacking, which could occur if malicious code is hidden beneath legitimate buttons or other clickable content on your web page. For example, malicious code might monitor keystrokes and steal confidential information. Customers could be “clickjacked” when clicking a legitimate link on an infected page in which there are actually buttons on a transparent layer they cannot see. Visa Checkout periodically reviews each page from which a Visa Checkout button is clicked to determine if adequate anticlickjacking preventions have been taken. To prevent clickjacking, you must ensure that pages cannot be loaded as an iFrame of some other page. Specifically, you must:\\n\\n  * Ensure that the associated DOM document for the page has no child pages in which malicious code could reside.\\n  * Implement X-FRAME-OPTIONS DENY or X-FRAME-OPTIONS SAMEORIGIN filtering for headers on your server to prevent your page from being loaded from another\\n  * domain.\\n\\n[Learn more about the clickjacking prevention requirements](https://developer.visa.com/products/visa_checkout/guides#clickjacking_prevention)\",\n  \"title\": \"Visa Checkout Requirements\"\n}\n[/block]\n###Flow Description\n1. Shopper clicks on Visa Checkout button, which invokes the lightbox.\n2. Inside the lightbox, the shopper can choose their preferred payment option and shipping address.\n3. After the shopper completes the lightbox step, the response status will be “success”, “cancel” or “error”.\n4. You should handle each of those event types, as indicated in the `onVisaCheckoutReady()` function in the example above.\n5. On a “success” event, you should get a payment object populated with a `callId`, which is a unique value that points to the corresponding Visa Checkout resource. Extract this call ID and use it to complete Step 3, described below.\n\n<br>\n<a class=\"btn btn-primary\" href=\"#\" role=\"button\">Back to Top</a>\n\n##Step 3: Send the Create Wallet request to receive checkout information\nAfter extracting the call ID from the payment object (see the Flow Description above), perform a [Create Wallet](/v4.0/docs/create-wallet) request with the call ID.\nThis request should be sent to: `services/2/wallets`\n\nSample Create Wallet requests:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n    \\\"callId\\\": 5549711876630985101,\\n    \\\"walletType\\\": \\\"VISA_CHECKOUT\\\"\\n}\",\n      \"language\": \"json\",\n      \"name\": \"Create Wallet with Visa Checkout: Payment API\"\n    },\n    {\n      \"code\": \"<wallet xmlns=\\\"http://ws.plimus.com\\\">\\n   <wallet-type>VISA_CHECKOUT</wallet-type>\\n   <store-id>16500</store-id>\\n   <call-id>5549711876630985101</call-id>\\n</wallet>\",\n      \"language\": \"xml\",\n      \"name\": \"Create Wallet with Visa Checkout: Extended Payment API\"\n    }\n  ]\n}\n[/block]\nUpon success, you will receive a response similar to the following, with all checkout information. *Note:* you cannot perform two requests with the same call ID.\n\nSample Create Wallet response:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n    \\\"country\\\": \\\"us\\\",\\n    \\\"walletId\\\": 2203,\\n    \\\"firstName\\\": \\\"First\\\",\\n    \\\"lastName\\\": \\\"Last\\\",\\n    \\\"billingContactInfo\\\": {\\n        \\\"zip\\\": 12324,\\n        \\\"country\\\": \\\"us\\\",\\n        \\\"firstName\\\": \\\"First\\\",\\n        \\\"lastName\\\": \\\"Last\\\",\\n        \\\"city\\\": \\\"Santa Barbara\\\",\\n        \\\"address1\\\": \\\"BlueSnap Street\\\",\\n        \\\"state\\\": \\\"CA\\\"\\n    },\\n    \\\"phone\\\": 5032541004,\\n    \\\"shippingContactInfo\\\": {\\n        \\\"zip\\\": 12324,\\n        \\\"country\\\": \\\"us\\\",\\n        \\\"firstName\\\": \\\"First\\\",\\n        \\\"lastName\\\": \\\"Last\\\",\\n        \\\"city\\\": \\\"Santa Barbara\\\",\\n        \\\"phone\\\": 5032541004,\\n        \\\"address1\\\": \\\"BlueSnap Street\\\",\\n        \\\"state\\\": \\\"CA\\\"\\n    },\\n    \\\"creditCard\\\": {\\n        \\\"expirationYear\\\": 2020,\\n        \\\"cardLastFourDigits\\\": 4821,\\n        \\\"cardType\\\": \\\"VISA\\\",\\n        \\\"expirationMonth\\\": 8\\n    },\\n    \\\"email\\\": \\\"person&#x40;bluesnap.com\\\"\\n}\",\n      \"language\": \"json\",\n      \"name\": \"Response: Create Wallet with Visa Checkout\"\n    }\n  ]\n}\n[/block]\n<br>\n<a class=\"btn btn-primary\" href=\"#\" role=\"button\">Back to Top</a>\n\n##Step 4: Process the transaction with the wallet information\nOnce you have the shopper's final approval, you are ready to process the transaction. Follow the steps below for the Payment API or the Extended Payment API.\n\n###In the Payment API\nThere are two different ways to do this:\n\n**Option 1. Create or update a Vaulted Shopper with the wallet info, and then use the vaulted shopper ID in the Auth Capture or Auth Only request**\n\nYou can save the shopper's information from the wallet by including it in a [Create Vaulted Shopper](/v2.1/docs/create-vaulted-shopper) or [Update Vaulted Shopper](/v2.1/docs/update-vaulted-shopper) request.\n\nThen just send a standard [Auth Capture](/v2.1/docs/auth-capture) or [Auth Only](/v2.1/docs/auth-only) request with the vaulted shopper ID.\n\n**Option 2. Add the wallet ID directly in your Auth Capture or Auth Only request**\n\nYou can instead include the wallet ID directly in an [Auth Capture](/v2.1/docs/auth-capture) or [Auth Only](/v2.1/docs/auth-only) request. For example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n    \\\"walletId\\\": 21,\\n    \\\"amount\\\": 35,\\n    \\\"recurringTransaction\\\": \\\"ECOMMERCE\\\",\\n    \\\"currency\\\": \\\"USD\\\",\\n    \\\"cardTransactionType\\\": \\\"AUTH_CAPTURE\\\"\\n}\",\n      \"language\": \"json\",\n      \"name\": \"Auth Capture with wallet ID\"\n    }\n  ]\n}\n[/block]\n###In the Extended Payment API\nThere are two different ways to do this:\n\n**Option 1. Create or update a Shopper with the wallet info, and then use the shopper ID in the Create Order with Existing Shopper or Create Shopping Context request**\n\nYou can save the shopper's information from the wallet by including it in a [Create Shopper](/v3.0/docs/create-shopper) or [Update Shopper](/v3.0/docs/update-shopper) request.\nFor example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<shopper xmlns=\\\"http://ws.plimus.com\\\">\\n  <web-info>\\n    <ip>62.219.121.253</ip>\\n  </web-info>\\n  <shopper-info>\\n    <store-id>11580</store-id>\\n    <shopper-currency>USD</shopper-currency>\\n  </shopper-info>\\n  <wallet-id>21</wallet-id>\\n</shopper>\",\n      \"language\": \"xml\",\n      \"name\": \"Create Shopper with wallet ID\"\n    }\n  ]\n}\n[/block]\nThen just send a standard [Create Order with Existing Shopper](/v3.0/docs/create-order) or [Create Shopping Context](/v3.0/docs/create-shopping-context) request with the shopper ID.\n\n**Option 2. Add the wallet ID directly in Create Order and New Shopper request**\n\nYou can instead include the wallet ID directly in a [Create Order and New Shopper](/v3.0/docs/create-shopper-and-order) request. For example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<batch-order xmlns=\\\"http://ws.plimus.com\\\">\\n  <shopper xmlns=\\\"http://ws.plimus.com\\\">\\n    <web-info>\\n     <ip>62.219.121.253</ip>\\n    </web-info>\\n    <shopper-info>\\n      <store-id>11580</store-id>\\n      <shopper-currency>USD</shopper-currency>\\n    </shopper-info>\\n    <wallet-id>21</wallet-id>\\n  </shopper>\\n  <order>\\n    <ordering-shopper>\\n        <web-info>\\n        <ip>62.219.121.253</ip>\\n        <remote-host>www.merchant.com</remote-host>\\n        <user-agent>Mozilla/5.0 (Linux; X11)</user-agent>\\n      </web-info>\\n    </ordering-shopper>\\n    <cart>\\n      <cart-item>\\n        <sku>\\n        <sku-id>2183716</sku-id>\\n        </sku>\\n        <quantity>1</quantity>\\n      </cart-item>\\n    </cart>\\n    <expected-total-price>\\n      <amount>10</amount>\\n      <currency>USD</currency>\\n    </expected-total-price>\\n  </order>\\n</batch-order>\",\n      \"language\": \"xml\",\n      \"name\": \"Create Order and New Shopper with wallet ID\"\n    }\n  ]\n}\n[/block]\n<br>\n<a class=\"btn btn-primary\" href=\"#\" role=\"button\">Back to Top</a>","excerpt":"","slug":"visa-checkout","type":"basic","title":"Visa Checkout"}

Visa Checkout is a digital wallet that securely stores a shopper's payment and shipping details. It supports all major credit and debit card types, including Visa, MasterCard, American Express, and Discover. Visa Checkout yields conversion rates that far exceed traditional checkout, and enables your customers to make fast and easy payments across all their devices.

BlueSnap supports Visa Checkout in both the Payment API and Extended Payment API.

The shopper experience with Visa Checkout

Supported Markets

Visa Checkout is supported for shoppers and merchants in the following countries as a simple and secure payment method (updated 2/2017).

  • Argentina (AR)
  • Australia (AU)
  • Brazil (BR)
  • Canada (CA)
  • Chile (CL)
  • China (CN)
  • Colombia (CO)
  • France (FR)
  • Hong Kong (HK)
  • Ireland (IE)
  • Malaysia (MY)
  • Mexico (MX)
  • New Zealand (NZ)
  • Peru (PE)
  • Poland (PL)
  • Singapore (SG)
  • South Africa (ZA)
  • Spain (ES)
  • United States (US)
  • United Kingdom (UK)
  • United Arab Emirates (AE)

Implementing Visa Checkout

Step 1: Enable the Visa Checkout payment method

Follow these steps to enable the Visa Checkout payment method in your BlueSnap account:

  1. Log in to your account in the BlueSnap Merchant Console.
  2. Go to Checkout Page > Payment Methods.
  3. Select Show next to Visa Checkout, and then click Submit.

Step 2: Add the Visa Checkout button & JS function to your checkout page

Add the Visa Checkout button & required JS library to your checkout page, as follows:

// Button image
<img alt="Visa Checkout" class="v-button" role="button" src="https://{environment}.secure.checkout.visa.com/wallet-services-web/xo/button.png" />

// Visa Checkout JS library
<script type="text/javascript" src="https://{environment}-assets.secure.checkout.visa.com/checkout-widget/resources/js/integration/v1/sdk.js"></script>

// Visa JS function that invokes the lightbox
<script>
function onVisaCheckoutReady() {
	V.init({
		apikey: ‘${apiKey},
		settings: {
			locale: ‘${visaCheckoutLocale},
			displayName: ‘${displayName},	
			logoUrl: ‘${logoUrl},
		},
		payment: {
		      cardBrands: ["VISA","MASTERCARD","AMEX","DINERS","DISCOVER"]
		},		
		paymentRequest: {
			currencyCode: ‘${currency},
			subtotal: ‘${CheckoutSubtotal},
		},
		shipping: {
			collectShipping: ‘${collectShipping},
		},
		dataLevel: "NONE"
	});
	V.on("payment.success", function(payment) {
	// TODO: Handle success response from lightbox.
	// you should send “payment.callid” to BlueSnap via CreateWallet.
	});
	V.on("payment.cancel", function(payment) {
	// TODO: Handle cancel response from lightbox.
	});
	V.on("payment.error", function(payment, error) {
	// TODO: Handle error response from lightbox.
	});
}

</script>

Button Image

The image for the Visa Checkout button:
Sandbox: https://sandbox.secure.checkout.visa.com/wallet-services-web/xo/button.png
Production: https://secure.checkout.visa.com/wallet-services-web/xo/button.png

Visa Checkout JS Library

The JS library for Visa Checkout:
Sandbox: https://sandbox-assets.secure.checkout.visa.com/checkout-widget/resources/js/integration/v1/sdk.js
Production: https://assets.secure.checkout.visa.com/checkout-widget/resources/js/integration/v1/sdk.js

Field Descriptions

The fields in the JS function above should be completed as follows:

  • apikey: (Required) Your Visa Checkout API key. This is a static value - you only need to create a single API key. For instructions, see Create/Retrieve Visa Checkout API Key.
  • displayName: (Optional) The merchant's name as it appears on the Review panel of the lightbox; typically, it is the name of your company. Format: Maximum 100 characters, either alphabetic, numeric, spaces, or the following characters: ! @ # $ % ^ & * -' ? and period ( . ).
  • logoUrl: (Optional) Secure (HTTPS) URL path to the logo to display in the Visa Checkout lightbox; otherwise, the default Visa Checkout logo appears. Your image must not exceed 174px wide and should be 34px high; oversize logos will be scaled to fit. Format: HTTPS URL; maximum 256 characters.
  • cardBrands: (Required) Card brands that are accepted by BlueSnap (already provided in the example above).
  • currencyCode: (Required) The currency with which to process the transaction. Format: ISO 4217 standard alpha-3.
  • subtotal: (Required) Subtotal of the payment. Format: Numeric; maximum 9 digits before an optional decimal point and 2 decimal digits. Example: "subtotal" : "9.00".
  • collectShipping: (Optional) Determines whether to obtain a shipping address from the consumer. Permitted values:
    • true: Collect shipping address (default)
    • false: Do not collect shipping address
  • dataLevel: (Required) Should be set to “NONE”.

Visa Checkout Requirements

Visa Checkout Asset Placement and Usage Requirements

On all pages where the shopper is presented with the Visa Checkout payment method (for example, the shopping cart page or payment page), you are required to implement the Visa Checkout branding requirements.

Clickjacking Prevention Requirement

You must provide code on each page that hosts a Visa Checkout button and headers on your server to prevent clickjacking, which could occur if malicious code is hidden beneath legitimate buttons or other clickable content on your web page. For example, malicious code might monitor keystrokes and steal confidential information. Customers could be “clickjacked” when clicking a legitimate link on an infected page in which there are actually buttons on a transparent layer they cannot see. Visa Checkout periodically reviews each page from which a Visa Checkout button is clicked to determine if adequate anticlickjacking preventions have been taken. To prevent clickjacking, you must ensure that pages cannot be loaded as an iFrame of some other page. Specifically, you must:

  • Ensure that the associated DOM document for the page has no child pages in which malicious code could reside.
  • Implement X-FRAME-OPTIONS DENY or X-FRAME-OPTIONS SAMEORIGIN filtering for headers on your server to prevent your page from being loaded from another
  • domain.

Learn more about the clickjacking prevention requirements

Flow Description

  1. Shopper clicks on Visa Checkout button, which invokes the lightbox.
  2. Inside the lightbox, the shopper can choose their preferred payment option and shipping address.
  3. After the shopper completes the lightbox step, the response status will be “success”, “cancel” or “error”.
  4. You should handle each of those event types, as indicated in the onVisaCheckoutReady() function in the example above.
  5. On a “success” event, you should get a payment object populated with a callId, which is a unique value that points to the corresponding Visa Checkout resource. Extract this call ID and use it to complete Step 3, described below.



Back to Top

Step 3: Send the Create Wallet request to receive checkout information

After extracting the call ID from the payment object (see the Flow Description above), perform a Create Wallet request with the call ID.
This request should be sent to: services/2/wallets

Sample Create Wallet requests:

{
    "callId": 5549711876630985101,
    "walletType": "VISA_CHECKOUT"
}
<wallet xmlns="http://ws.plimus.com">
   <wallet-type>VISA_CHECKOUT</wallet-type>
   <store-id>16500</store-id>
   <call-id>5549711876630985101</call-id>
</wallet>

Upon success, you will receive a response similar to the following, with all checkout information. Note: you cannot perform two requests with the same call ID.

Sample Create Wallet response:

{
    "country": "us",
    "walletId": 2203,
    "firstName": "First",
    "lastName": "Last",
    "billingContactInfo": {
        "zip": 12324,
        "country": "us",
        "firstName": "First",
        "lastName": "Last",
        "city": "Santa Barbara",
        "address1": "BlueSnap Street",
        "state": "CA"
    },
    "phone": 5032541004,
    "shippingContactInfo": {
        "zip": 12324,
        "country": "us",
        "firstName": "First",
        "lastName": "Last",
        "city": "Santa Barbara",
        "phone": 5032541004,
        "address1": "BlueSnap Street",
        "state": "CA"
    },
    "creditCard": {
        "expirationYear": 2020,
        "cardLastFourDigits": 4821,
        "cardType": "VISA",
        "expirationMonth": 8
    },
    "email": "person&#x40;bluesnap.com"
}



Back to Top

Step 4: Process the transaction with the wallet information

Once you have the shopper's final approval, you are ready to process the transaction. Follow the steps below for the Payment API or the Extended Payment API.

In the Payment API

There are two different ways to do this:

Option 1. Create or update a Vaulted Shopper with the wallet info, and then use the vaulted shopper ID in the Auth Capture or Auth Only request

You can save the shopper's information from the wallet by including it in a Create Vaulted Shopper or Update Vaulted Shopper request.

Then just send a standard Auth Capture or Auth Only request with the vaulted shopper ID.

Option 2. Add the wallet ID directly in your Auth Capture or Auth Only request

You can instead include the wallet ID directly in an Auth Capture or Auth Only request. For example:

{
    "walletId": 21,
    "amount": 35,
    "recurringTransaction": "ECOMMERCE",
    "currency": "USD",
    "cardTransactionType": "AUTH_CAPTURE"
}

In the Extended Payment API

There are two different ways to do this:

Option 1. Create or update a Shopper with the wallet info, and then use the shopper ID in the Create Order with Existing Shopper or Create Shopping Context request

You can save the shopper's information from the wallet by including it in a Create Shopper or Update Shopper request.
For example:

<shopper xmlns="http://ws.plimus.com">
  <web-info>
    <ip>62.219.121.253</ip>
  </web-info>
  <shopper-info>
    <store-id>11580</store-id>
    <shopper-currency>USD</shopper-currency>
  </shopper-info>
  <wallet-id>21</wallet-id>
</shopper>

Then just send a standard Create Order with Existing Shopper or Create Shopping Context request with the shopper ID.

Option 2. Add the wallet ID directly in Create Order and New Shopper request

You can instead include the wallet ID directly in a Create Order and New Shopper request. For example:

<batch-order xmlns="http://ws.plimus.com">
  <shopper xmlns="http://ws.plimus.com">
    <web-info>
     <ip>62.219.121.253</ip>
    </web-info>
    <shopper-info>
      <store-id>11580</store-id>
      <shopper-currency>USD</shopper-currency>
    </shopper-info>
    <wallet-id>21</wallet-id>
  </shopper>
  <order>
    <ordering-shopper>
        <web-info>
        <ip>62.219.121.253</ip>
        <remote-host>www.merchant.com</remote-host>
        <user-agent>Mozilla/5.0 (Linux; X11)</user-agent>
      </web-info>
    </ordering-shopper>
    <cart>
      <cart-item>
        <sku>
        <sku-id>2183716</sku-id>
        </sku>
        <quantity>1</quantity>
      </cart-item>
    </cart>
    <expected-total-price>
      <amount>10</amount>
      <currency>USD</currency>
    </expected-total-price>
  </order>
</batch-order>