{"_id":"59dfa8f45c0bae001c2e8af1","category":{"_id":"59dfa8f45c0bae001c2e8ae9","version":"59dfa8f45c0bae001c2e8ae8","project":"57336fd5a6a9c40e00e13a0b","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-10-01T16:04:11.135Z","from_sync":false,"order":0,"slug":"welcome","title":"Quickstart"},"parentDoc":null,"project":"57336fd5a6a9c40e00e13a0b","user":"560d5913af97231900938124","version":{"_id":"59dfa8f45c0bae001c2e8ae8","project":"57336fd5a6a9c40e00e13a0b","__v":1,"createdAt":"2017-10-12T17:40:04.535Z","releaseDate":"2017-10-12T17:40:04.535Z","categories":["59dfa8f45c0bae001c2e8ae9","59dfa8f45c0bae001c2e8aea","59dfa8f45c0bae001c2e8aeb","59dfa8f45c0bae001c2e8aec","59dfa8f45c0bae001c2e8aed","59dfa8f45c0bae001c2e8aee","59dfa8f45c0bae001c2e8aef","59dfa8f45c0bae001c2e8af0"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"3.23. Release","version_clean":"8976.0.0-Basics","version":"8976-Basics"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-03-18T16:55:01.143Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"Welcome to the BlueSnap Developer Hub. Our [Payment API](/v2.1/docs) is RESTful and uses standard HTTP features. Design your own checkout form and use our API to take credit & debit cards, digital wallets, ACH, SEPA Direct Debit & Paypal.\n\n###Start coding\n[block:html]\n{\n  \"html\": \"   <div class=\\\"row\\\">  \\n    \\n      <div class=\\\"landing-box-left-2 col-md-5 col-md-offset-1\\\" style=\\\"height:90px;\\\">\\n           <div class=\\\"landing-box-content-2\\\">\\n             <p style=\\\"font-size:110%;\\\"><i class=\\\"fa fa-file-text fa-lg\\\"></i>  &nbsp;&nbsp;&nbsp; Step 1: Build a checkout form</p>\\n             <a href=\\\"/docs/build-a-form\\\" class=\\\"orange-hover\\\"><i class=\\\"fa fa-angle-right fa-lg\\\"></i>&nbsp Start now</a>\\n           </div>\\n         </div> \\n         \\n       <div class=\\\"landing-box-right-2 col-md-5\\\" style=\\\"height:90px;\\\">\\n            <div class=\\\"landing-box-content-2\\\">\\n            <p style=\\\"font-size:110%;\\\"><i class=\\\"fa fa-credit-card fa-lg\\\"></i>  &nbsp;&nbsp;&nbsp; Step 2: Make a payment</p>\\n            <a href=\\\"/docs/make-a-payment-payment-api\\\" class=\\\"orange-hover\\\"><i class=\\\"fa fa-angle-right fa-lg\\\"></i>&nbsp Start now</a>\\n           </div>\\n      </div>\\n    \\n   </div>\"\n}\n[/block]\n<span id=\"try-it-now-1\"</span>\n###Try it now\nTry our Payment API here! Create a token, charge a card, and vault the shopper by following these steps: \n[block:html]\n{\n  \"html\": \"<div class=\\\"container\\\">\\n\\t<div class=\\\"row\\\">\\n    <article class=\\\"col-sm-12 col-md-12 col-lg-12 sortable-grid ui-sortable\\\">\\n      <div id=\\\"wid-id-0\\\">\\n        <!-- widget div-->\\n        <div role=\\\"content\\\">\\n          <!-- widget content -->\\n          <div class=\\\"widget-body\\\">\\n            <div class=\\\"row\\\">\\n              <form id=\\\"wizard-1\\\" novalidate=\\\"novalidate\\\">\\n                <div id=\\\"bootstrap-wizard-1\\\" class=\\\"col-sm-12\\\">\\n                  <div class=\\\"form-bootstrapWizard\\\">\\n                    <ul class=\\\"bootstrapWizard form-wizard\\\">\\n                      <li class=\\\"active\\\" data-target=\\\"#step1\\\">\\n                        <a href=\\\"#tab1\\\" data-toggle=\\\"tab\\\" class=\\\"active\\\"> <span class=\\\"step\\\">1</span> <span class=\\\"title\\\">Token</span> </a>\\n                      </li>\\n                      <li data-target=\\\"#step2\\\" class=\\\"\\\">\\n                        <a id=\\\"card-step\\\" href=\\\"#tab2\\\" data-toggle=\\\"tab\\\"> <span class=\\\"step\\\">2</span> <span class=\\\"title\\\">Card</span> </a>\\n                      </li>\\n                      <li data-target=\\\"#step3\\\" class=\\\"\\\">\\n                        <a id=\\\"step-3\\\"href=\\\"#tab3\\\" data-toggle=\\\"tab\\\"> <span class=\\\"step\\\">3</span> <span class=\\\"title\\\">Charge & Vault</span> </a>\\n                      </li>\\n                      <li data-target=\\\"#step4\\\" class=\\\"\\\">\\n                        <a id=\\\"step-4\\\" href=\\\"#tab4\\\" data-toggle=\\\"tab\\\"> <span class=\\\"step\\\">4</span> <span class=\\\"title\\\">Success!</span> </a>\\n                      </li>\\n                    </ul>\\n                    <div class=\\\"clearfix\\\"></div>\\n                  </div>\\n                  \\n                  <div class=\\\"tab-content\\\">\\n                    <div class=\\\"tab-pane active\\\" id=\\\"tab1\\\">\"\n}\n[/block]\n<br  />\n###1. Token\nThe first step is to create a Hosted Payment Fields token by sending a server-to-server POST request to BlueSnap. A successful response will provide the token in the location header, as follows:\n`location: BLUESNAPDOMAINPATH/services/2/payment-fields-tokens/HOSTEDFIELDTOKENID`\n\nThe following code shows a sample request and response.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"curl -v -X POST https://sandbox.bluesnap.com/services/2/payment-fields-tokens \\\\\\n-H 'Content-Type: application/json' \\\\\\n-H 'Accept: application/json' \\\\ \\n-H 'Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=' \\\\\\n-d '\",\n      \"language\": \"curl\",\n      \"name\": \"Create Token: Request\"\n    },\n    {\n      \"code\": \"HTTP/ 1.1 201 Created\\nlocation: https://sandbox.bluesnap.com/services/2/payment-fields-tokens/f977b920a0c6a55b2156635f368ed94cd37c26b62ac2b1e521e17ace6495f874_\",\n      \"language\": \"curl\",\n      \"name\": \"Response\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<!-- Try it -->\\n<div class=\\\"container\\\">\\n    <div class=\\\"panel panel-success\\\">\\n      <div class=\\\"panel-heading\\\"><strong>Try it!</strong></div>\\n      <div class=\\\"panel-body\\\"><p>\\nClick the button below to go to our API Explorer. Click the Try it! button on the page, and copy the token from the response’s location header. Return here and paste your token.\\n   </p> \\n        <div style=\\\"float:left;\\\">\\n          <a class=\\\"btn btn-success\\\" href=\\\"/v4.0/docs/create-hosted-payment-fields-token#section-api-explorer\\\" target=\\\"_blank\\\" role=\\\"button\\\">Try it in the API Explorer</a>\\n        </div>\\n        \\n          <div class=\\\"col-xs-4\\\" style=\\\"float:left;\\\">\\n    <input class=\\\"form-control\\\" id=\\\"pf-token\\\" type=\\\"text\\\" placeholder=\\\"Paste your token here\\\">\\n  </div>\\n        <span id=\\\"go-to-step-2\\\"></span>\\n        \\n          </div>\\n    </div>\\n</div>\\n\\n<script>\\n  // when user enters input, pfToken will be updated with new value\\n  // if not input entered, pfToken will default to test token\\n  input = document.querySelector('#pf-token'); \\n  var pfToken;\\n  input.addEventListener(\\\"keyup\\\", function() {\\n    pfToken = this.value; \\n    // trim pfToken to remove whitespace on both ends \\n    pfToken.trim(); \\n    // add \\\"_\\\" if it is missing from end of string\\n    if (pfToken.indexOf(\\\"_\\\") === -1) {\\n      pfToken += \\\"_\\\" ;\\n    }\\n    console.log(pfToken); \\n    if (pfToken.length == 65) {\\n      // add \\\"next button\\\"\\n      $('#go-to-step-2').html(\\\"<button id='next-2' type='button' class='btn btn-primary btn-sm' style='margin-top:3px;'>Great. Continue to Step 2!</button>\\\"); \\n      // add an event listener for 'click' \\n      $('#next-2').on('click', function() {\\n        // change window hash \\n        window.location.hash = \\\"#try-it-now-1\\\"; \\n        // trigger click event on button 2\\n        $('#card-step').trigger('click'); \\n      }); \\n    } else if (pfToken) {\\n      $('#go-to-step-2').html(\\\"Hmmm... Try again. Make sure to copy the token <i>exactly</i>.\\\");\\n    }\\n      \\n      \\n  }); \\n</script>\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"</div>\\n<div class=\\\"tab-pane\\\" id=\\\"tab2\\\">\"\n}\n[/block]\n<br />\n###2. Card\nBlueSnap captures the shopper's sensitive card data via our Hosted Payment Fields, and binds it to the token. Your PCI compliance is reduced to SAQ-A because sensitive data never hits your sever. \n[block:html]\n{\n  \"html\": \"<div class=\\\"container\\\">\\n  <div class=\\\"panel panel-default\\\" style=\\\"margin-bottom:0;\\\">\\n    <div class=\\\"panel-body\\\"><p>    \\nHere's an example of a Hosted Payment Fields integration configured with your token <span id='pf-token-value-1'></span> from Step 1. <br> To see the code, check out our <a href=\\\"https://codepen.io/BlueSnap/pen/LxqPMx\\\" target=\\\"_blank\\\">CodePen</a>. </p>\\n    </div>\\n  </div>\\n</div> \"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<!-- checkout form example -->\\n<!-- HTML -->\\n<div class=\\\"container\\\">\\n\\n<div id=\\\"my-div\\\">   \\n    <div class=\\\"row\\\">    \\n  <!-- Try it! -->\\n        <div class=\\\"panel panel-success col-md-4\\\" style=\\\"padding:0px;margin-right:1em;\\\">\\n      <div class=\\\"panel-heading\\\"><strong>Try it!</strong></div>\\n      <div class=\\\"panel-body\\\">\\n       Enter this test card: <br />\\n        <br />\\n            <strong>Card Number</strong>: 4263982640269299 <br />\\n        <br />\\n            <strong>Exp. Date</strong>: 02/18 <br />\\n        <br />\\n            <strong>CVV</strong>: 837 <br />\\n      <br />\\n        Click the <strong>Pay Now</strong> button\\n\\n          </div>\\n    </div>\\n    \\n    <!-- Checkout form -->\\n<div class=\\\"panel panel-default col-md-7\\\" style=\\\"padding:0px;\\\">\\n    <div class=\\\"panel-heading\\\">\\n    \\t<h3 class=\\\"panel-title\\\">Enter your card details</h3>\\n  \\t</div>\\n<form class=\\\"panel-body\\\" action=\\\"your-form-handling-page\\\" method=\\\"POST\\\" id=\\\"checkout-form\\\" onsubmit=\\\"return do_when_clicking_submit_button()\\\">\\n   <!-- <div class=\\\"row\\\" style=\\\"margin:2em auto;\\\"> -->\\n       <div class=\\\"form-group col-xs-12\\\" style=\\\"margin-top:1em;\\\">\\n          <label for=\\\"cardholder-name\\\">Name on Card</label>\\n          <input type=\\\"text\\\" class=\\\"form-control\\\" id=\\\"cardholder-name\\\"  value=\\\"Jane Shopper\\\">\\n      </div>\\n        <!--Hosted Field for CC number-->\\n       <div class=\\\"form-group col-xs-12\\\">\\n         <label for=\\\"card-number\\\">Card Number</label>\\n           <div class=\\\"form-control\\\" id=\\\"card-number\\\" data-bluesnap=\\\"ccn\\\"></div>\\n\\n                  <span class=\\\"helper-text\\\" id=\\\"ccn-help\\\"></span>\\n       </div>\\n\\n\\t\\t\\t <!--Hosted Field for CC EXP-->\\n       <div class=\\\"form-group col-xs-7\\\">\\n          <label for=\\\"exp-date\\\">Exp. Date</label>\\n          <div class=\\\"form-control\\\" id=\\\"exp-date\\\" data-bluesnap=\\\"exp\\\"></div>\\n         <span class=\\\"helper-text\\\" id=\\\"exp-help\\\"></span>\\n       </div>\\n\\t\\t\\t<!--Hosted Field for CC CVV-->\\n\\t\\t\\t<div class=\\\"form-group col-xs-5\\\">\\n         <label for=\\\"cvv\\\">CVV</label>\\n         <div class=\\\"form-control\\\" id=\\\"cvv\\\" data-bluesnap=\\\"cvv\\\"></div>\\n        <span class=\\\"helper-text\\\" id=\\\"cvv-help\\\"></span>\\n    </div>\\t\\n\\n\\t\\t<button class=\\\"btn btn-success btn-lg center-block\\\" type=\\\"submit\\\" id=\\\"submit-button\\\" style=\\\"margin-bottom:1em;\\\">Pay Now</button>\\n\\t\\t\\t\\n\\t\\t</form>\\n  \\n</div>\\n  \\n </div> \\n</div>\\n</div>\\n<!--BlueSnap Hosted Payment Fields JavaScript file-->\\n<script type=\\\"text/javascript\\\" src=\\\"https://sandbox.bluesnap.com/services/hosted-payment-fields/v2.0/bluesnap.hpf.min.js\\\"></script> \\n\\n<!-- CSS -->\\n<style>\\n  /* Bootstrap styles*/\\n  \\n\\n #my-div > .panel {\\n  width: 100%;\\n  margin: 2em auto; \\n}\\n\\n\\n#my-div > .panel-body {\\n  width: 100%;\\n  margin: 2em auto;\\n}\\n#my-div > .row {\\n  margin: 2em auto; \\n}\\n\\n.helper-text {\\n  color: #e93143;\\n  font-size: 12px;\\n  margin-top: 5px;\\n  height: 12px;\\n  display: block;\\n}\\n \\n.center-block {\\n  display: block;\\n  margin-left: auto;\\n  margin-right: auto;\\n}\\n\\n\\n/* Hosted Payment Fields styles*/\\n.hosted-field-focus { \\n  border: 1px solid #66afe9;\\n  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);\\n}\\n\\n.hosted-field-invalid {\\n  border: 1px solid #e93143;\\n  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(233,49,67, 0.8);\\n}\\n\\n.hosted-field-valid {\\n  border: 1px solid #14ba57 ;\\n}\\n</style>\\n<script>\\n\\n/* Defining helper functions/objects */\\n// changeImpactedElement: function that removes the provided class(es) and adds the provided class(es) to Hosted Payment Fields element\\nfunction changeImpactedElement(tagId, removeClass, addClass) {\\n    removeClass = removeClass || \\\"\\\";\\n    addClass = addClass || \\\"\\\";\\n    $(\\\"[data-bluesnap=\\\" + tagId + \\\"]\\\")\\n        .removeClass(removeClass)\\n        .addClass(addClass);\\n}\\n// getErrorText: function that takes error code (received from BlueSnap) and returns associated help text\\nfunction getErrorText(errorCode) {\\n  switch (errorCode) {\\n    case \\\"001\\\":\\n      return \\\"Please enter a valid card number\\\";\\n    case \\\"002\\\":\\n      return \\\"Please enter the CVV/CVC of your card\\\";\\n    case \\\"003\\\":\\n      return \\\"Please enter your card's expiration date\\\";\\n    case \\\"22013\\\": \\n      return \\\"Card type is not supported by merchant\\\"; \\n    case \\\"400\\\":\\n      return \\\"Session expired please refresh page to continue\\\";\\n    case \\\"403\\\": \\n    case \\\"404\\\":\\n    case \\\"500\\\":\\n      return \\\"Internal server error please try again later\\\";\\n    default: \\n      break; \\n   }\\n }\\n// cardUrl: object that stores card type code and associated card image URL\\nvar cardUrl = {\\n  \\\"AmericanExpress\\\": \\\"https://files.readme.io/97e7acc-Amex.png\\\", \\n  \\\"CarteBleau\\\": \\\"https://files.readme.io/5da1081-cb.png\\\",\\n  \\\"DinersClub\\\": \\\"https://files.readme.io/8c73810-Diners_Club.png\\\",\\n  \\\"Discover\\\": \\\"https://files.readme.io/caea86d-Discover.png\\\",\\n  \\\"JCB\\\": \\\"https://files.readme.io/e076aed-JCB.png\\\",\\n  \\\"MaestroUK\\\": \\\"https://files.readme.io/daeabbd-Maestro.png\\\",\\n  \\\"MasterCard\\\": \\\"https://files.readme.io/5b7b3de-Mastercard.png\\\",\\n  \\\"Solo\\\": \\\"https://sandbox.bluesnap.com/services/hosted-payment-fields/cc-types/solo.png\\\", \\n  \\\"Visa\\\": \\\"https://files.readme.io/9018c4f-Visa.png\\\"\\n};\\n\\n/* Defining bsObj: object that stores Hosted Payment Fields \\nevent handlers, styling, placeholder text, etc. */\\nvar bsObj = {\\n  onFieldEventHandler: {\\n    onFocus: function(tagId) {\\n      // Handle focus\\n      changeImpactedElement(tagId, \\\"hosted-field-valid hosted-field-invalid\\\", \\\"hosted-field-focus\\\"); \\n    },\\n    onBlur: function(tagId) {\\n      // Handle blur\\n      changeImpactedElement(tagId, \\\"hosted-field-focus\\\"); \\n    },\\n    onError: function(tagId, errorCode) {\\n      // Handle a change in validation\\n      changeImpactedElement(tagId, \\\"hosted-field-valid hosted-field-focus\\\", \\\"hosted-field-invalid\\\");     \\n      $(\\\"#\\\" + tagId + \\\"-help\\\").text(getErrorText(errorCode)); \\n\\t},\\n    onType: function(tagId, cardType) {\\n      // get card type from cardType and display card image\\n      $(\\\"#card-logo > img\\\").attr(\\\"src\\\", cardUrl[cardType]);\\n    },\\n    onValid: function(tagId) {\\n      // Handle a change in validation\\n      changeImpactedElement(tagId, \\\"hosted-field-focus hosted-field-invalid\\\", \\\"hosted-field-valid\\\"); \\n      $(\\\"#\\\" + tagId + \\\"-help\\\").text(\\\"\\\"); \\n    }\\n  },\\n  //styling is optional\\n  style: {\\n    // Styling all inputs\\n    \\\"input\\\": {\\n      \\\"font-size\\\": \\\"14px\\\",\\n      \\\"font-family\\\": \\\"Helvetica Neue,Helvetica,Arial,sans-serif\\\",\\n      \\\"line-height\\\": \\\"1.42857143\\\",\\n      \\\"color\\\": \\\"#555\\\"\\n    },\\n\\n    // Styling a specific field\\n    /*\\\"#ccn\\\": {\\n                        \\n                    },*/\\n\\n    // Styling Hosted Payment Field input state\\n    \\\":focus\\\": {\\n      \\\"color\\\": \\\"#555\\\"\\n    }\\n  },\\n  ccnPlaceHolder: \\\"4111222233334444\\\",\\n  cvvPlaceHolder: \\\"123\\\",\\n  expPlaceHolder: \\\"MM/YY\\\",\\n  expDropDownSelector: false//set to true for exp. date dropdown\\n}; \\n\\n            // Use jQuery ready() Method to run bluesnap.hostedPaymentFieldsCreation command after DOM is fully loaded\\n            $( document ).ready(function() {\\n                bluesnap.hostedPaymentFieldsCreation (pfToken, bsObj); //insert your Hosted Payment Fields token\\n              console.log(\\\"Hosted Payment Fields are activated\\\"); \\n            });\\n  // Add an event listener on Step 2 button, that triggers hosted payment fields creation with the most updated token & customizes code template on step 3 \\n    $('#card-step').on('click', function(){\\n      bluesnap.hostedPaymentFieldsCreation(pfToken || \\\"054cd20135bf01b07eed5cc692ea68030032b256686c92e003894a6b2f1e7ffa_\\\", bsObj); \\n      if (pfToken) {\\n        $('#pf-token-value-1').html(\\\"<code>\\\"+pfToken+\\\"</code>\\\");\\n        $('#pf-token-value-2').html(pfToken); \\n      }\\n      console.log(\\\"HPF re-activated\\\"); \\n    }); \\n  \\n\\t \\t$( document ).ready(function() {\\n      \\t$('#submit-button').click(function() {\\n          do_when_clicking_submit_button();}); \\n    }); \\n  \\n        // Submits the credit card, expiration date and CVV data to BlueSnap, where it will be associated with the Hosted Payment Fields token. On success, a card data object containing the card type and last four digits will be be passed to the function (cardData). You should add a function to do the final submit of the form after the card type and last four digits are received.\\n        \\n\\n            \\n            function do_when_clicking_submit_button(){                         \\n                bluesnap.submitCredentials( function(cardData){\\n                  console.log(\\\"success\\\"); \\n                  // pop up a message that says the submit was successful ask user \\n                    var myBool = confirm(\\\"The card data was successfully submitted to BlueSnap! The card type is \\\" + cardData.ccType + \\\", the last 4 digits are \\\" + cardData.last4Digits + \\\", and the exp is \\\" + cardData.exp + \\\". \\\\n \\\\n Continue on to Step 3!\\\"); \\n                  if (myBool) {\\n                    // window.location.hash = \\\"#\\\"; \\n                    window.location.hash = \\\"#section-try-it-now\\\"; \\n                    $('#step-3').trigger('click'); \\n                }\\n                return false; // don't submit the form\\n            });         \\n            }; \\n</script> \"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<!-- Try it -->\\n<!-- <div class=\\\"container\\\">\\n    <div class=\\\"panel panel-success\\\">\\n      <div class=\\\"panel-heading\\\"><strong>Try it!</strong></div>\\n      <div class=\\\"panel-body\\\">\\nEnter the following card details into the checkout form: <br />\\n            <strong>Card Number</strong>: 4263982640269299 <br />\\n            <strong>Exp. Date</strong>: 02/2018 <br />\\n            <strong>CVV</strong>: 837 <br />\\n      <br />\\n      Click the Pay Now button\\n\\n          </div>\\n    </div>\\n</div> -->\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"</div>\\n<div class=\\\"tab-pane\\\" id=\\\"tab3\\\">\"\n}\n[/block]\n<br />\n###3. Charge & Vault\nTo charge the card, you'll send the request including the token within `pfToken`. BlueSnap will automatically vault the shopper's information associated with the token, and return a `vaultedShopperId`. The value is a  unique ID used to identify the shopper within BlueSnap.\n\nThe following code shows a sample [Auth Capture](/v2.1/docs/auth-capture) request and response. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"curl -v -X POST https://sandbox.bluesnap.com/services/2/transactions \\\\\\n-H 'Content-Type: application/json' \\\\\\n-H 'Accept: application/json' \\\\ \\n-H 'Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=' \\\\\\n-d '\\n{\\n  \\\"pfToken\\\": \\\"812f6ee706e463d3276e3abeb21fa94072e40695ed423ddac244409b3b652eff_\\\",\\n  \\\"amount\\\": 11,\\n  \\\"currency\\\": \\\"USD\\\",\\n  \\\"recurringTransaction\\\": \\\"ECOMMERCE\\\",\\n  \\\"cardTransactionType\\\": \\\"AUTH_CAPTURE\\\",\\n  \\\"cardHolderInfo\\\": {\\n      \\\"firstName\\\": \\\"Jane\\\",\\n      \\\"lastName\\\": \\\"Shopper\\\", \\n      \\\"zip\\\": \\\"02451\\\"\\n  }\\n}'\",\n      \"language\": \"curl\",\n      \"name\": \"Auth Capture: Request\"\n    },\n    {\n      \"code\": \"{\\n  \\\"cardTransactionType\\\": \\\"AUTH_CAPTURE\\\",\\n  \\\"transactionId\\\": \\\"1014271871\\\",\\n  \\\"recurringTransaction\\\": \\\"ECOMMERCE\\\",\\n  \\\"softDescriptor\\\": \\\"Test Descriptor\\\",\\n  \\\"amount\\\": 11,\\n  \\\"currency\\\": \\\"USD\\\",\\n  \\\"cardHolderInfo\\\": {\\n      \\\"firstName\\\": \\\"Jane\\\",\\n      \\\"lastName\\\": \\\"Shopper\\\",\\n      \\\"zip\\\": \\\"02451\\\"\\n  },\\n  \\\"vaultedShopperId\\\": 21828023,\\n  \\\"creditCard\\\": {\\n      \\\"cardLastFourDigits\\\": \\\"9299\\\",\\n      \\\"cardType\\\": \\\"VISA\\\",\\n      \\\"cardSubType\\\": \\\"CREDIT\\\",\\n      \\\"cardCategory\\\": \\\"GOLD\\\"\\n  },\\n  \\\"processingInfo\\\": {\\n      \\\"processingStatus\\\": \\\"success\\\",\\n      \\\"cvvResponseCode\\\": \\\"MA\\\",\\n      \\\"avsResponseCodeZip\\\": \\\"U\\\",\\n      \\\"avsResponseCodeAddress\\\": \\\"U\\\",\\n      \\\"avsResponseCodeName\\\": \\\"U\\\"\\n  }\\n}\",\n      \"language\": \"json\",\n      \"name\": \"Response\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<!-- Try it -->\\n<div class=\\\"container\\\">\\n    <div class=\\\"panel panel-success\\\">\\n      <div class=\\\"panel-heading\\\"><strong>Try it!</strong></div>\\n      <div class=\\\"panel-body\\\"> \\n        <pre><code>{\\n  \\\"pfToken\\\": \\\"<span id='pf-token-value-2'></span>\\\",\\n  \\\"amount\\\": 11,\\n  \\\"currency\\\": \\\"USD\\\",\\n  \\\"recurringTransaction\\\": \\\"ECOMMERCE\\\",\\n  \\\"cardTransactionType\\\": \\\"AUTH_CAPTURE\\\",\\n  \\\"cardHolderInfo\\\": {\\n      \\\"firstName\\\": \\\"Jane\\\",\\n      \\\"lastName\\\": \\\"Shopper\\\", \\n      \\\"zip\\\": \\\"02451\\\"\\n  }\\n}\\n</code></pre>\\n        Copy and run the above JSON object in the API Explorer (This'll only work if you entered a valid token in Step 1). Copy the value of <code>vaultedShopperId</code> from the response, and return here to paste it.<br />\\n        <br /> \\n                <div style=\\\"float:left;\\\">\\n          <a class=\\\"btn btn-success\\\" href=\\\"/v2.1/docs/auth-capture#api-explorer\\\" target=\\\"_blank\\\" role=\\\"button\\\">Try it in the API Explorer</a>\\n        </div>\\n        \\n          <div class=\\\"col-xs-4\\\" style=\\\"float:left;\\\">\\n    <input class=\\\"form-control\\\" id=\\\"vaulted-shopper-id\\\" type=\\\"text\\\" placeholder=\\\"Paste ID here\\\">\\n  </div>\\n        <span id=\\\"go-to-step-4\\\"></span>\\n</div>\\n  </div>\\n</div>\\n\\n<script>\\n  // add script to prompt user to move on to step 4 after pasting vaulted shopper id\\n  var inputVaultedShopper = document.querySelector('#vaulted-shopper-id'); \\n  var vaultedShopperId; \\n  inputVaultedShopper.addEventListener('keyup', function() {\\n    vaultedShopperId = this.value; \\n    console.log(vaultedShopperId); \\n    // add button that tells user to move on to step 4\\n    if (vaultedShopperId.length > 0) {\\n      $('#go-to-step-4').html(\\\"<button id='next-3' type='button' class='btn btn-primary btn-sm' style='margin-top:3px;'>Success! Move on to Step 4.</button>\\\"); \\n      $('#next-3').on('click', function() { \\n        window.location.hash = '#try-it-now-1';\\n        $('#step-4').trigger('click'); \\n    }); \\n    }\\n\\n    $('#success-message').html('Shopper <code>' + vaultedShopperId + \\\"</code> has successfully been charged and their payment details are safely stored. For all future transactions, you'll use this ID in the request to charge their card again. There is no need for the shopper to re-enter their information. Checkout will be a breeze!\\\"); \\n    \\n  }); \\n</script>\\n    \\n\\n\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"</div>\\n<div class=\\\"tab-pane\\\" id=\\\"tab4\\\">\"\n}\n[/block]\n<br />\n###4. Success! \n[block:html]\n{\n  \"html\": \"<span id=\\\"success-message\\\">Congrats! The shopper has successfully been charged and their payment details are safely stored. For all future transactions, you'll use the vaulted shopper ID in the request to charge their card again. There is no need for the shopper to re-enter their information. Checkout will be a breeze!</span>\"\n}\n[/block]\n<br />\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"Visit our API Reference\",\n  \"body\": \"For a complete list of API endpoints, request and response parameters, and code samples, visit our [Payment API Reference](/v2.1/docs).\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"</div>\\n\\n</div>\\n</div>\\n</form>\\n</div>\\n\\n</div>\\n<!-- end widget content -->\\n\\n</div>\\n<!-- end widget div -->\\n\\n</div>\\n<!-- end widget -->\\n\\n</article>\\n</div>\\n</div>\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<style>\\n.bootstrapWizard {\\n    display: block;\\n    list-style: none;\\n    padding: 0;\\n    position: relative;\\n    width: 100%\\n}\\n\\n.bootstrapWizard a:hover,.bootstrapWizard a:active,.bootstrapWizard a:focus {\\n    text-decoration: none\\n}\\n\\n.bootstrapWizard li {\\n    display: block;\\n    float: left;\\n    width: 25%;\\n    text-align: center;\\n    padding-left: 0\\n}\\n\\n.bootstrapWizard li:before {\\n    border-top: 3px solid #55606E;\\n    content: \\\"\\\";\\n    display: block;\\n    font-size: 0;\\n    overflow: hidden;\\n    position: relative;\\n    top: 11px;\\n    right: 1px;\\n    width: 100%;\\n    z-index: 1\\n}\\n\\n.bootstrapWizard li:first-child:before {\\n    left: 50%;\\n    max-width: 50%\\n}\\n\\n.bootstrapWizard li:last-child:before {\\n    max-width: 50%;\\n    width: 50%\\n}\\n\\n.bootstrapWizard li.complete .step {\\n    background: #0aa66e;\\n    padding: 1px 6px;\\n    border: 3px solid #55606E\\n}\\n\\n.bootstrapWizard li .step i {\\n    font-size: 10px;\\n    font-weight: 400;\\n    position: relative;\\n    top: -1.5px\\n}\\n\\n.bootstrapWizard li .step {\\n    background: #B2B5B9;\\n    color: #fff;\\n    display: inline;\\n    font-size: 15px;\\n    font-weight: 700;\\n    line-height: 12px;\\n    padding: 7px 13px;\\n    border: 3px solid transparent;\\n    border-radius: 50%;\\n    line-height: normal;\\n    position: relative;\\n    text-align: center;\\n    z-index: 2;\\n    transition: all .1s linear 0s\\n}\\n\\n.bootstrapWizard li.active .step,.bootstrapWizard li.active.complete .step {\\n    background: #0091d9;\\n    color: #fff;\\n    font-weight: 700;\\n    padding: 7px 13px;\\n    font-size: 15px;\\n    border-radius: 50%;\\n    border: 3px solid #55606E\\n}\\n\\n.bootstrapWizard li.complete .title,.bootstrapWizard li.active .title {\\n    color: #2B3D53\\n}\\n\\n.bootstrapWizard li .title {\\n    color: #bfbfbf;\\n    display: block;\\n    font-size: 13px;\\n    line-height: 15px;\\n    max-width: 100%;\\n    position: relative;\\n    table-layout: fixed;\\n    text-align: center;\\n    top: 20px;\\n    word-wrap: break-word;\\n    z-index: 104\\n}\\n\\n.wizard-actions {\\n    display: block;\\n    list-style: none;\\n    padding: 0;\\n    position: relative;\\n    width: 100%\\n}\\n\\n.wizard-actions li {\\n    display: inline\\n}\\n\\n.tab-content.transparent {\\n    background-color: transparent\\n}\\n</style>\"\n}\n[/block]\n<hr>\n###Tip: Try out the API right in the docs\nIn the API reference docs, look for the **Try it here!** sections. You can try out different parameters and test credit card numbers to see exactly how your test scenario would work.\n\n###Looking for a hosted solution?\nYou can use our BuyNow Hosted Checkout pages for a simple way to offer your global customers a seamless buying experience on any device. No development needed. <a href=\"https://support.readme.io/docs/intro-hosted-checkout\" target=\"_blank\">Learn more</a>.","excerpt":"","slug":"welcome","type":"basic","title":"Welcome"}

Welcome to the BlueSnap Developer Hub. Our Payment API is RESTful and uses standard HTTP features. Design your own checkout form and use our API to take credit & debit cards, digital wallets, ACH, SEPA Direct Debit & Paypal.

Start coding

    Step 1: Build a checkout form

  Start now

    Step 2: Make a payment

  Start now

Try it now

Try our Payment API here! Create a token, charge a card, and vault the shopper by following these steps:


1. Token

The first step is to create a Hosted Payment Fields token by sending a server-to-server POST request to BlueSnap. A successful response will provide the token in the location header, as follows:
location: BLUESNAPDOMAINPATH/services/2/payment-fields-tokens/HOSTEDFIELDTOKENID

The following code shows a sample request and response.

curl -v -X POST https://sandbox.bluesnap.com/services/2/payment-fields-tokens \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \ 
-H 'Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=' \
-d '
HTTP/ 1.1 201 Created
location: https://sandbox.bluesnap.com/services/2/payment-fields-tokens/f977b920a0c6a55b2156635f368ed94cd37c26b62ac2b1e521e17ace6495f874_
Try it!

Click the button below to go to our API Explorer. Click the Try it! button on the page, and copy the token from the response’s location header. Return here and paste your token.


2. Card

BlueSnap captures the shopper's sensitive card data via our Hosted Payment Fields, and binds it to the token. Your PCI compliance is reduced to SAQ-A because sensitive data never hits your sever.

Here's an example of a Hosted Payment Fields integration configured with your token from Step 1.
To see the code, check out our CodePen.

Try it!
Enter this test card:

Card Number: 4263982640269299

Exp. Date: 02/18

CVV: 837

Click the Pay Now button

Enter your card details


3. Charge & Vault

To charge the card, you'll send the request including the token within pfToken. BlueSnap will automatically vault the shopper's information associated with the token, and return a vaultedShopperId. The value is a unique ID used to identify the shopper within BlueSnap.

The following code shows a sample Auth Capture request and response.

curl -v -X POST https://sandbox.bluesnap.com/services/2/transactions \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \ 
-H 'Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=' \
-d '
{
  "pfToken": "812f6ee706e463d3276e3abeb21fa94072e40695ed423ddac244409b3b652eff_",
  "amount": 11,
  "currency": "USD",
  "recurringTransaction": "ECOMMERCE",
  "cardTransactionType": "AUTH_CAPTURE",
  "cardHolderInfo": {
      "firstName": "Jane",
      "lastName": "Shopper", 
      "zip": "02451"
  }
}'
{
  "cardTransactionType": "AUTH_CAPTURE",
  "transactionId": "1014271871",
  "recurringTransaction": "ECOMMERCE",
  "softDescriptor": "Test Descriptor",
  "amount": 11,
  "currency": "USD",
  "cardHolderInfo": {
      "firstName": "Jane",
      "lastName": "Shopper",
      "zip": "02451"
  },
  "vaultedShopperId": 21828023,
  "creditCard": {
      "cardLastFourDigits": "9299",
      "cardType": "VISA",
      "cardSubType": "CREDIT",
      "cardCategory": "GOLD"
  },
  "processingInfo": {
      "processingStatus": "success",
      "cvvResponseCode": "MA",
      "avsResponseCodeZip": "U",
      "avsResponseCodeAddress": "U",
      "avsResponseCodeName": "U"
  }
}
Try it!
{
  "pfToken": "",
  "amount": 11,
  "currency": "USD",
  "recurringTransaction": "ECOMMERCE",
  "cardTransactionType": "AUTH_CAPTURE",
  "cardHolderInfo": {
      "firstName": "Jane",
      "lastName": "Shopper", 
      "zip": "02451"
  }
}
Copy and run the above JSON object in the API Explorer (This'll only work if you entered a valid token in Step 1). Copy the value of vaultedShopperId from the response, and return here to paste it.


4. Success!

Congrats! The shopper has successfully been charged and their payment details are safely stored. For all future transactions, you'll use the vaulted shopper ID in the request to charge their card again. There is no need for the shopper to re-enter their information. Checkout will be a breeze!


Visit our API Reference

For a complete list of API endpoints, request and response parameters, and code samples, visit our Payment API Reference.


Tip: Try out the API right in the docs

In the API reference docs, look for the Try it here! sections. You can try out different parameters and test credit card numbers to see exactly how your test scenario would work.

Looking for a hosted solution?

You can use our BuyNow Hosted Checkout pages for a simple way to offer your global customers a seamless buying experience on any device. No development needed. Learn more.