{"_id":"59dfa5838b51880010b74ad5","category":{"_id":"59dfa5828b51880010b74ac4","version":"59dfa5828b51880010b74ab6","project":"57336fd5a6a9c40e00e13a0b","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-11-03T20:45:01.593Z","from_sync":false,"order":13,"slug":"topics","title":"Guides & Tools"},"user":"560d5913af97231900938124","parentDoc":null,"project":"57336fd5a6a9c40e00e13a0b","version":{"_id":"59dfa5828b51880010b74ab6","project":"57336fd5a6a9c40e00e13a0b","__v":1,"createdAt":"2017-10-12T17:25:22.850Z","releaseDate":"2017-10-12T17:25:22.850Z","categories":["59dfa5828b51880010b74ab7","59dfa5828b51880010b74ab8","59dfa5828b51880010b74ab9","59dfa5828b51880010b74aba","59dfa5828b51880010b74abb","59dfa5828b51880010b74abc","59dfa5828b51880010b74abd","59dfa5828b51880010b74abe","59dfa5828b51880010b74abf","59dfa5828b51880010b74ac0","59dfa5828b51880010b74ac1","59dfa5828b51880010b74ac2","59dfa5828b51880010b74ac3","59dfa5828b51880010b74ac4","59dfa5828b51880010b74ac5"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":false,"codename":"3.23 Release","version_clean":"8976.0.0-JSON","version":"8976-JSON"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-01-19T13:44:36.011Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":14,"body":"It is easy to make a VIP checkout experience for returning shoppers and improve your conversion rates by pre-populating your checkout page with the shopper's saved information. Then the shopper can complete checkout in a single click!\n\nFollow these steps to build a great checkout experience for your returning shoppers:\n\n###Step 1: Create a vaulted shopper\n\nIf you’ve asked the shopper to create an account or log in to your site, then one-click checkout becomes really easy to achieve using BlueSnap’s Payment API. All you have to do is \"vault\" your shopper. This means you send BlueSnap the shopper name and payment info, and then we’ll save the shopper information for future use and send you an ID for that shopper's record in our system. Since this information is stored by BlueSnap, you get the benefit of ultra-streamlined checkout for returning shoppers, with no need to worry about encryption and security headaches.\n\nBlueSnap will automatically return a vaulted shopper ID to you in response to a card transaction request like an [Auth Capture](doc:auth-capture).\n\nAlternatively, you can save the shopper info before processing a transaction, by sending BlueSnap a [Create Vaulted Shopper](doc:create-vaulted-shopper) request. Below is an example of a Create Vaulted Shopper request for a shopper with a credit card.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n    \\\"paymentSources\\\": {\\\"creditCardInfo\\\": [{\\\"creditCard\\\": {\\n        \\\"expirationYear\\\": 2019,\\n        \\\"cardType\\\": \\\"VISA\\\",\\n        \\\"securityCode\\\": 111,\\n        \\\"expirationMonth\\\": \\\"07\\\",\\n        \\\"cardNumber\\\": 4000111122223333\\n    }}]},\\n    \\\"firstName\\\": \\\"Jane\\\",\\n    \\\"lastName\\\": \\\"Smith\\\"\\n}\",\n      \"language\": \"json\",\n      \"name\": \"Create Vaulted Shopper Request\"\n    }\n  ]\n}\n[/block]\nBlueSnap sends a response to the Create Vaulted Shopper Request, with the ID number we assigned to that stored shopper. For example, Jane Smith's vaulted shopper ID in the response below is *12345678*.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"HTTP/ 1.1 201 Created\\nLocation: https://sandbox.bluesnap.com/services/2/vaulted-shoppers/12345678\",\n      \"language\": \"http\",\n      \"name\": \"Create Vaulted Shopper Response\"\n    }\n  ]\n}\n[/block]\n###Step 2: Retrieve the shopper details and prepopulate the checkout page\n\nOnce you have stored a shopper and have obtained the shopper ID from BlueSnap, optimized checkout then becomes very easy.\n\nWhenever your saved shopper (in this example, Jane Smith) logs in to her account, you can easily retrieve her payment details by sending a [Retrieve Vaulted Shopper](doc:retrieve-vaulted-shopper) request to the API, with Jane Smith's shopper ID included in the API call.\n\nBlueSnap will then reply with Jane’s saved information, including her card details, so you can populate the information in the checkout form.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/Z5qec76SDuSKpH95WNBa_populated-checkout.png\",\n        \"populated-checkout.png\",\n        \"405\",\n        \"720\",\n        \"#2379f4\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nNow checkout is streamlined and as easy as possible. All Jane has to do is click “Buy Now” to make the purchase! \n[block:callout]\n{\n  \"type\": \"success\",\n  \"body\": \"We recommend capturing the shopper’s CVV during checkout and including this value within the transaction request to BlueSnap.  Transactions with CVV generally result in higher success rates since the issuers' fraud and risk engines consider these transactions to be a lower risk.\\n\\nFor code samples, see [Auth Capture](/v2.1/docs/auth-capture#section-request-examples) or [Auth Only](/v2.1/docs/auth-only#section-examples).\",\n  \"title\": \"Capturing CVV during checkout\"\n}\n[/block]\n###Step 3: Complete the purchase using the vaulted shopper ID\n\nWhen Jane clicks \"Buy Now\", you can easily complete the purchase using her vaulted shopper ID. Simply send in the relevant transaction request, such as an [Auth Capture](doc:auth-capture), and include the vaulted shopper ID. If there are multiple credit cards saved to that vaulted shopper, make sure you include the relevant card's last four digits, and the card type.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n    \\\"amount\\\": 75,\\n    \\\"vaultedShopperId\\\": 12345678,\\n    \\\"recurringTransaction\\\": \\\"ECOMMERCE\\\",\\n    \\\"currency\\\": \\\"USD\\\",\\n    \\\"creditCard\\\": {\\n        \\\"cardLastFourDigits\\\": 3333,\\n        \\\"cardType\\\": \\\"VISA\\\"\\n    },\\n    \\\"cardTransactionType\\\": \\\"AUTH_ONLY\\\"\\n}\",\n      \"language\": \"json\",\n      \"name\": \"Auth Capture request with vaulted shopper\"\n    }\n  ]\n}\n[/block]\nThis means there is no need to store the shopper details on your end, and the complete purchase flow is simple for both the shopper and the merchant!","excerpt":"Optimize the checkout experience for returning shoppers, with BlueSnap's Payment API","slug":"returning-shopper-tutorial","type":"basic","title":"Returning Shoppers Guide"}

Returning Shoppers Guide

Optimize the checkout experience for returning shoppers, with BlueSnap's Payment API

It is easy to make a VIP checkout experience for returning shoppers and improve your conversion rates by pre-populating your checkout page with the shopper's saved information. Then the shopper can complete checkout in a single click!

Follow these steps to build a great checkout experience for your returning shoppers:

Step 1: Create a vaulted shopper

If you’ve asked the shopper to create an account or log in to your site, then one-click checkout becomes really easy to achieve using BlueSnap’s Payment API. All you have to do is "vault" your shopper. This means you send BlueSnap the shopper name and payment info, and then we’ll save the shopper information for future use and send you an ID for that shopper's record in our system. Since this information is stored by BlueSnap, you get the benefit of ultra-streamlined checkout for returning shoppers, with no need to worry about encryption and security headaches.

BlueSnap will automatically return a vaulted shopper ID to you in response to a card transaction request like an Auth Capture.

Alternatively, you can save the shopper info before processing a transaction, by sending BlueSnap a Create Vaulted Shopper request. Below is an example of a Create Vaulted Shopper request for a shopper with a credit card.

{
    "paymentSources": {"creditCardInfo": [{"creditCard": {
        "expirationYear": 2019,
        "cardType": "VISA",
        "securityCode": 111,
        "expirationMonth": "07",
        "cardNumber": 4000111122223333
    }}]},
    "firstName": "Jane",
    "lastName": "Smith"
}

BlueSnap sends a response to the Create Vaulted Shopper Request, with the ID number we assigned to that stored shopper. For example, Jane Smith's vaulted shopper ID in the response below is 12345678.

HTTP/ 1.1 201 Created
Location: https://sandbox.bluesnap.com/services/2/vaulted-shoppers/12345678

Step 2: Retrieve the shopper details and prepopulate the checkout page

Once you have stored a shopper and have obtained the shopper ID from BlueSnap, optimized checkout then becomes very easy.

Whenever your saved shopper (in this example, Jane Smith) logs in to her account, you can easily retrieve her payment details by sending a Retrieve Vaulted Shopper request to the API, with Jane Smith's shopper ID included in the API call.

BlueSnap will then reply with Jane’s saved information, including her card details, so you can populate the information in the checkout form.

Now checkout is streamlined and as easy as possible. All Jane has to do is click “Buy Now” to make the purchase!

Capturing CVV during checkout

We recommend capturing the shopper’s CVV during checkout and including this value within the transaction request to BlueSnap. Transactions with CVV generally result in higher success rates since the issuers' fraud and risk engines consider these transactions to be a lower risk.

For code samples, see Auth Capture or Auth Only.

Step 3: Complete the purchase using the vaulted shopper ID

When Jane clicks "Buy Now", you can easily complete the purchase using her vaulted shopper ID. Simply send in the relevant transaction request, such as an Auth Capture, and include the vaulted shopper ID. If there are multiple credit cards saved to that vaulted shopper, make sure you include the relevant card's last four digits, and the card type.

{
    "amount": 75,
    "vaultedShopperId": 12345678,
    "recurringTransaction": "ECOMMERCE",
    "currency": "USD",
    "creditCard": {
        "cardLastFourDigits": 3333,
        "cardType": "VISA"
    },
    "cardTransactionType": "AUTH_ONLY"
}

This means there is no need to store the shopper details on your end, and the complete purchase flow is simple for both the shopper and the merchant!