{"_id":"5b197473be7bb50003d5dbb4","category":{"_id":"5b197473be7bb50003d5db9e","version":"5b197473be7bb50003d5dbd6","project":"57336fd5a6a9c40e00e13a0b","__v":0,"sync":{"url":"","isSync":false},"reference":true,"createdAt":"2016-05-19T19:19:37.628Z","from_sync":false,"order":6,"slug":"hosted-payment-fields","title":"Hosted Payment Fields"},"project":"57336fd5a6a9c40e00e13a0b","user":"560d5913af97231900938124","parentDoc":null,"version":{"_id":"5b197473be7bb50003d5dbd6","project":"57336fd5a6a9c40e00e13a0b","__v":2,"forked_from":"5addf90f94fe9d0003cd9d29","createdAt":"2018-04-23T15:17:35.680Z","releaseDate":"2018-04-23T15:17:35.680Z","categories":["5b197473be7bb50003d5db9c","5b197473be7bb50003d5db9d","5b197473be7bb50003d5db9e","5b197473be7bb50003d5db9f","5b197473be7bb50003d5dba0","5b197473be7bb50003d5dba1","5b197473be7bb50003d5dba2","5b197473be7bb50003d5dba3","5b197473be7bb50003d5dba4","5b197473be7bb50003d5dba5","5b197473be7bb50003d5dba6","5b27bded4799c70003f36389","5b34c737e0dca2000311de6a"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":false,"codename":"3.26 Release","version_clean":"8976.0.0-Tools","version":"8976-Tools"},"githubsync":"","__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-05-19T19:20:17.218Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":true,"order":0,"body":"If you would like to build your custom checkout flow using the API, but keep your PCI compliance requirements limited to the minimal SAQ-A level, BlueSnap’s Hosted Payment Fields are the ideal solution.\n\nHosted Payment Fields are iframes that replace sensitive credit card input fields in your checkout page. When the shopper submits the checkout form, BlueSnap binds this payment data to a token. You can then easily process payments or save shopper details by including the token in your BlueSnap API requests.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"This setup guide supports the latest version 2.0 of Hosted Payment Fields. If you're currently using version 1.0, visit our [Help & Support](https://support.bluesnap.com/docs/merchant-faqs#section--how-can-i-upgrade-from-v1-0-to-v2-0-of-the-hosted-payment-fields-) to learn how to upgrade.\"\n}\n[/block]\nFor setup and usage instructions, see:\n\n:fa-arrow-circle-right: &nbsp;  [Implementing Hosted Payment Fields in your checkout form](#section-implementing-hosted-payment-fields-in-your-checkout-form)\n\n:fa-arrow-circle-right: &nbsp;  [Styling the Hosted Payment Fields](#section-styling-the-hosted-payment-fields)\n\n:fa-arrow-circle-right: &nbsp;  [Example Forms](#section-example-forms)\n\n:fa-arrow-circle-right: &nbsp;  [Using the Hosted Payment Fields token to process payments and save shopper info](#section-using-the-hosted-payment-fields-token-to-process-payments-and-save-shopper-info)\n\n\n###Benefits\n * Control the look and feel of your checkout flow, including the Hosted Payment Fields\n * Simplest level of PCI compliance: SAQ-A\n * Securely capture payment information without your shoppers ever leaving your site\n * Use the Hosted Payment Fields token to complete a sale, as well as create or update a Vaulted Shopper\n\n###How it works\n1. You create a Hosted Payment Fields token for the specific checkout session, using a server-to-server API call.\n2. On the checkout form, you call BlueSnap’s Hosted Fields JavaScript file with this Hosted Payment Fields token.\n3. After the shopper completes the form and clicks “Submit”, the sensitive payment data from the Hosted Payment Fields is saved in BlueSnap’s database and bound to the Hosted Payment Fields token you provided. This includes the following fields:\n\n  * Credit Card Number\n  * Expiration Month/Year\n  * CVV\n4. Once the form has been submitted, you can use the Hosted Payment Fields token to process the purchase, create a shopper, or update a shopper with the new card details provided on the checkout page. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/UqjDlXPRFanwnNFctZID_Hosted_fields_flow.png\",\n        \"Hosted_fields_flow.png\",\n        \"750\",\n        \"275\",\n        \"#ec8c3c\",\n        \"\"\n      ],\n      \"sizing\": \"80\"\n    }\n  ]\n}\n[/block]\n<br>\n<a class=\"btn btn-primary\" href=\"#\" role=\"button\">Back to Top</a>\n\n#Implementing Hosted Payment Fields in your checkout form\nFollow the steps below in order to implement Hosted Payment Fields in your checkout form.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Insert the domain for either Sandbox or Production\",\n  \"body\": \"In all steps below, replace the BLUESNAPDOMAINPATH with the relevant domain for either the BlueSnap Sandbox or Production environment, as follows:\\n* Sandbox: `https://sandbox.bluesnap.com`\\n* Production: `https://ws.bluesnap.com`\\n\\nFor example, the Hosted Fields token request (step 1) should be sent to `https://sandbox.bluesnap.com/services/2/payment-fields-tokens` on Sandbox and `https://ws.bluesnap.com/services/2/payment-fields-tokens` on Production.\"\n}\n[/block]\n##1. Obtain the Hosted Payment Field token for the session\nObtain the Hosted Payment Field token by sending a server-to-server POST request to:\n\n`BLUESNAPDOMAINPATH/services/2/payment-fields-tokens`\n\nThe response will provide the token in the location header. For example: \n`BLUESNAPDOMAINPATH/services/2/payment-fields-tokens/HOSTEDFIELDTOKENID`\n\n**Note:** You will need a BlueSnap account in order to generate a Hosted Payment Field token. If you don't have an account yet, you can [sign up for one here](http://home.bluesnap.com/get-started/).\n\nThe Hosted Payment Fields Token will expire after 60 minutes.\n\n##2. Add the BlueSnap JavaScript file to your checkout form\nIn your checkout page, call the BlueSnap Hosted Payment Fields JavaScript file by adding the following script:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\" src=\\\"BLUESNAPDOMAINPATH/services/hosted-payment-fields/v2.0/bluesnap.hpf.min.js\\\"></script>\",\n      \"language\": \"javascript\",\n      \"name\": \"Adding Hosted Payment Fields JavaScript file\"\n    }\n  ]\n}\n[/block]\n##3. Add the Hosted Payment Fields to your checkout form\nReplace the credit card number, expiration date, and CVV input fields in your checkout form with the following `<div>` elements. \n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Important!\",\n  \"body\": \"The values for the `data-bluesnap` attributes must be typed exactly as they appear in the below code in order for your implementation to work.\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div data-bluesnap=\\\"ccn\\\"></div>\\n\\t\\t\\t\\n<div data-bluesnap=\\\"exp\\\"></div>\\n\\t\\t\\t\\n<div data-bluesnap=\\\"cvv\\\"></div>\",\n      \"language\": \"html\",\n      \"name\": \"Hosted Payment Fields <div> elements\"\n    }\n  ]\n}\n[/block]\n##4. Add a script to initiate the Hosted Payment Fields with your Hosted Fields token\nIn order to call the Hosted Payment Fields script, add the following script to your checkout page below the `<div>` elements.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n         var bsObj = {\\n                 onFieldEventHandler: {\\n                         // tagId returns: \\\"ccn\\\", \\\"cvv\\\", \\\"exp\\\" \\n                         onFocus: function(tagId) {}, // Handle focus\\n                         onBlur: function(tagId) {}, // Handle blur \\n                         onError: function(tagId, errorCode /*, errorDescription*/) {}, // Handle a change in validation\\n                         /*errorCode returns:\\n                                 \\\"001\\\" --> \\\"Please enter a valid credit card number\\\";\\n                                 \\\"002\\\" --> \\\"Please enter the CVV/CVC of your card\\\";\\n                                 \\\"003\\\" --> \\\"Please enter your credit card's expiration date\\\";\\n                                 \\\"22013\\\" --> \\\"CC type is not supported by the merchant\\\"; \\n                                 \\\"400\\\" --> \\\"Session expired please refresh page to continue\\\";\\n                                 \\\"403\\\", \\\"404\\\", \\\"500\\\" --> \\\"Internal server error please try again later\\\"; \\n                         */\\n                         /* errorDescription is optional. Returns BlueSnap's standard error description */ \\n                                                \\n                         onType: function(tagId, cardType) {}, /* cardType will give card type, and only applies to ccn: CarteBleue, Visa, MasterCard, AmericanExpress, Discover, DinersClub, JCB, Solo, MaestroUK, ChinaUnionPay */\\n                         onValid: function(tagId) {}, // Handle a change in validation\\n                 }, \\n                 /* example:\\n                         style: {\\n                         Style elements \\n                         (Selectors: \\\"#ccn\\\", \\\"#cvv\\\", \\\"#exp\\\", \\\"input\\\", \\\":focus\\\", \\\".valid\\\", \\\".invalid\\\")\\n                         (Properties: \\\"color\\\", \\\"font\\\", \\\"font-family\\\", \\\"font-size\\\", \\\"font-style\\\", \\\"font-weight\\\", \\\"line-height\\\", \\\"opacity\\\", \\\"outline\\\", \\\"text-shadow\\\", \\\"transition\\\")\\n                         \\\"Selector\\\": {\\n                         \\\"Property\\\": \\\"Value\\\",\\n                         \\\"Property2\\\": \\\"Value2\\\"\\n                         },                                                                                                                                                             \\n                         \\\"Selector2\\\": {\\n                         \\\"Property\\\": \\\"Value\\\"\\n                         } \\n                 }, */\\n                 style: {\\n                         \\\":focus\\\": {\\n                                  //style for all input elements on focus event\\n                                  \\\"color\\\": \\\"orange\\\"\\n                         },\\n                         \\\"input\\\": {\\n                                  //style for all input elements \\n                                 \\\"color\\\": \\\"blue\\\"\\n                         },\\n                         \\\".invalid\\\": {\\n                                  //style for all input elements when invalid\\n                                  \\\"color\\\": \\\"red\\\"\\n                         }\\n                 },\\n     ccnPlaceHolder: \\\"1234 5678 9012 3456\\\", //for example\\n     cvvPlaceHolder: \\\"123\\\", //for example\\n     expPlaceHolder: \\\"MM/YY\\\", //for example\\n     expDropDownSelector: false //set to true for exp. date dropdown\\n         };\\n                \\n         //Run the following command after Document Object Model (DOM) is fully loaded \\n         bluesnap.hostedPaymentFieldsCreation(\\\"HOSTEDFIELDTOKENID\\\", bsObj);\\n</script>\",\n      \"language\": \"html\",\n      \"name\": \"Initiating Hosted Payment Fields with token\"\n    }\n  ]\n}\n[/block]\nReplace `HOSTEDFIELDTOKENID` with the token you obtained in step 1.\n\nUse `onFieldEventHandler` to handle focus, blur, validation events, and to get the card type. For example, you can use this to identify when the user has entered a Visa card and then show the relevant icon for Visa.\n\n**Note:** If you want to use BlueSnap icons per card type, they are available here:\n  * **AmericanExpress**: BLUESNAPDOMAINPATH/services/hosted-payment-fields/cc-types/amex.png\n  * **DinersClub**: BLUESNAPDOMAINPATH/services/hosted-payment-fields/cc-types/diners.png\n  * **Discover**: BLUESNAPDOMAINPATH/services/hosted-payment-fields/cc-types/discover.png\n  * **JCB**: BLUESNAPDOMAINPATH/services/hosted-payment-fields/cc-types/jcb.png\n  * **MaestroUK**: BLUESNAPDOMAINPATH/services/hosted-payment-fields/cc-types/maestro.png\n  * **MasterCard**: BLUESNAPDOMAINPATH/services/hosted-payment-fields/cc-types/mastercard.png\n  * **Visa**: BLUESNAPDOMAINPATH/services/hosted-payment-fields/cc-types/visa.png\n  * **Solo**: BLUESNAPDOMAINPATH/services/hosted-payment-fields/cc-types/solo.png\n  * **CarteBleue**: BLUESNAPDOMAINPATH/services/hosted-payment-fields/cc-types/cb.png\n  * **ChinaUnionPay**: BLUESNAPDOMAINPATH/services/hosted-payment-fields/cc-types/cup.png \n\nStyling is optional. For more details on the `style` capabilities, see [Styling the Hosted Payment Fields](#section-styling-the-hosted-payment-fields).\n\nOptionally, use these to define what placeholder will appear in each Hosted Payment Field input:\n  * ccnPlaceHolder\n  * cvvPlaceHolder\n  * expPlaceHolder\n\nIf you prefer to use a dropdown selector for the expiration date element, add the property `expDropDownSelector` to `bsObj` and set its value to **true**.\n\n##5. Add a script to submit credit card, expiration date, and CVV data\nAdd the script below into your checkout form:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n\\tfunction do_when_clicking_submit_button(){                                             \\n\\t\\tbluesnap.submitCredentials( function(cardData){\\n\\t\\t\\tconsole.log('the card type is ' + cardData.ccType + ', last 4 digits are ' + cardData.last4Digits + ', exp is ' + cardData.exp + ' and issuing Country is ' + cardData.issuingCountry + ', after that I can call final submit');               \\n\\t\\t\\t// submit the form               \\n\\t\\t});\\n\\t}                                                                \\n</script>\",\n      \"language\": \"html\",\n      \"name\": \"Submit payment data to BlueSnap\"\n    }\n  ]\n}\n[/block]\nThis function should be activated when the shopper clicks the **Submit **button. This will submit the credit card number, expiration date, and CVV data to BlueSnap, where it will be associated with the Hosted Payment Fields token.\n\nIf the data submission to BlueSnap is successful, a card data object containing the card type, last four digits, and expiration date will be passed to the `function(cardData)`. You should add a function to do the final submit of the form after receiving this information.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"The card will be validated when you send it in a transaction or you save it to a shopper.\",\n  \"title\": \"Card validation\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"Add 3D Secure for increased checkout security\",\n  \"body\": \"Visit the [3D Secure guide](/docs/3d-secure) to learn how to add 3D Secure to your configuration.\"\n}\n[/block]\n<a class=\"btn btn-primary\" href=\"#\" role=\"button\">Back to Top</a>\n\n#Styling the Hosted Payment Fields\nMuch of the styling of the Hosted Payment Fields (i.e. width, height, and outer styling) can be performed as usual via CSS.\n\nThe Hosted Payment Fields are iframes within the `<div>` containers, and they are nearly invisible in terms of styling. The iframes themselves do not have a border and their width and height are 100%. Input inside the iframes has no border margin or padding, has a width and height of 100%, and has a transparent background. Placeholders for inputs are provided automatically. \n\nTo apply styling inside of the Hosted Payment Fields, use the `style` JavaScript shown in [step 4](#section-4-add-a-script-to-initiate-the-hosted-payment-fields-with-your-hosted-fields-token).\n\n##Supported CSS properties\nWe support the following CSS properties inside of the Hosted Payment Fields:\n\n\"color\", \"font\", \"font-family\", \"font-size\", \"font-style\", \"font-weight\", \"line-height\", \"opacity\", \"outline\", \"text-shadow\",  \"transition\"\n\n**Note:** Usage of any unsupported CSS properties will result in failure of the Hosted Payment Fields.\n\n##Selectors\nYou can use the following selectors to define when the style will be applied:\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Selector\",\n    \"h-1\": \"Description\",\n    \"0-0\": \"**#ccn, #cvv, #month, #year**\",\n    \"1-0\": \"**input**\",\n    \"4-0\": \"**:focus**\",\n    \"6-0\": \"**.valid**\",\n    \"7-0\": \"**.invalid**\",\n    \"0-1\": \"Style will be applied to the selected element.\\nNote that **#month** and **#year** refer to the month and year portions of the expiration date element.\",\n    \"1-1\": \"Style will be applied to all inputs.\",\n    \"4-1\": \"Style will be applied to all elements on focus event.\",\n    \"6-1\": \"Style will be applied to all inputs (or selected input) on valid event. For example, `.valid` or `#cvv.valid`.\",\n    \"7-1\": \"Style will be applied to all inputs (or selected input) on invalid event. For example: `.invalid` or `#cvv.invalid`.\",\n    \"h-2\": \"Example\",\n    \"0-2\": \"\",\n    \"3-0\": \"**span**\",\n    \"3-1\": \"Applicable if `expDropDownSelector` is **false**.\\nStyle will be applied to the slash (\\\"/\\\") separating the month and year of expiration date input.\",\n    \"2-0\": \"**select**\",\n    \"2-1\": \"Applicable if `expDropDownSelector` is **true**. \\nStyle will be applied to expiration date dropdown.\",\n    \"5-0\": \"**::placeholder**\",\n    \"5-1\": \"Style will be applied to placeholder text.\\n\\n**Note:** For certain browsers, the following selectors may be needed when **::placeholder** does not provide the desired outcome.\\n\\n* **::-webkit-input-placeholder** (for Chrome, Opera, and Safari)\\n* **::-moz-placeholder** (for Firefox 19+)\\n* **:-ms-input-placeholder** (for IE and Edge)\\n* **:-moz-placeholder** (for Firefox 18-)\"\n  },\n  \"cols\": 2,\n  \"rows\": 8\n}\n[/block]\n##Examples\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var bsObj = {\\n  //...\\n  style: {\\n    \\\"input\\\": {\\n      //style for all input elements\\n      \\\"font\\\": \\\"bold 14px Arial\\\",\\n      \\\"color\\\": \\\"#4A5157\\n    },\\n    \\\":focus\\\": {\\n      //style for all elements on focus event\\n      \\\"color\\\": \\\"orange\\\"\\n    },\\n    \\\"#ccn\\\": {\\n      //style only ccn element\\n      \\\"color\\\": \\\"blue\\\"\\n    },\\n    \\\"#cvv.invalid\\\": {\\n      //style cvv input when invalid\\n      \\\"color\\\": \\\"red\\\"\\n    }\\n  }\\n};\",\n      \"language\": \"javascript\",\n      \"name\": \"Example styling inside of the Hosted Payment Fields\"\n    }\n  ]\n}\n[/block]\n#Example forms\nBelow are two examples of checkout forms that use BlueSnap's Hosted Payment Fields (click the HTML/CSS/JS tabs to view the code):\n\n##Example 1: with Bootstrap styling\n[block:html]\n{\n  \"html\": \"<iframe height='537' scrolling='no' src='//codepen.io/JaneBenson/embed/LxqPMx/?height=537&theme-id=0&default-tab=js,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>\\n</iframe>\"\n}\n[/block]\n##Example 2: with Material styling\n[block:html]\n{\n  \"html\": \"<iframe height='537' scrolling='no' src='//codepen.io/JaneBenson/embed/OWdywe/?height=537&theme-id=0&default-tab=js,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>\\n</iframe>\"\n}\n[/block]\n<br>\n<a class=\"btn btn-primary\" href=\"#\" role=\"button\">Back to Top</a>\n\n#Using the Hosted Payment Fields token to process payments and save shopper info\nOnce you have implemented Hosted Payment Fields in your checkout form, you can then process payments, as well as save shopper information, by including the Hosted Payment Fields token in your API requests. See below for more information on how to do this in either the Payment API or the Extended Payment API.\n\n**Note:** The Hosted Payment Fields token can be used only once to either process a transaction or save shopper payment info. \n\n##In the Payment API\nTo use the Hosted Payment Fields token to process a payment, send the token within the `pfToken` property in your [Auth Capture](/v8976-JSON/docs/auth-capture), [Auth Only](/v8976-JSON/docs/auth-only), or [Create Subscription](/v8976-JSON/docs/create-subscription).\n\nTo save the card information from the Hosted Payment Fields in a new or existing vaulted shopper, send the token within the `pfToken` property in your [Create Vaulted Shopper](/v8976-JSON/docs/create-vaulted-shopper) or [Update Vaulted Shopper](/v8976-JSON/docs/update-vaulted-shopper) request.\n\nExample requests:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n    \\\"amount\\\": 11,\\n    \\\"softDescriptor\\\": \\\"DescTest\\\",\\n    \\\"cardHolderInfo\\\": {\\n        \\\"firstName\\\": \\\"test first name\\\",\\n        \\\"lastName\\\": \\\"test last name\\\", \\n        \\\"zip\\\": \\\"123456\\\"\\n    },\\n    \\\"currency\\\": \\\"USD\\\",\\n    \\\"cardTransactionType\\\": \\\"AUTH_CAPTURE\\\",\\n    \\\"pfToken\\\": \\\"abcde12345**********\\\"\\n}\",\n      \"language\": \"json\",\n      \"name\": \"Card transaction with hosted payment field token\"\n    },\n    {\n      \"code\": \"{\\n    \\\"paymentSources\\\": {\\\"creditCardInfo\\\": [{\\\"pfToken\\\": \\\"9688f4f6945f615b1ab6954ceb5dbf67f63d6b41fa27dbff6ac342cff9bf50fc_\\\"}]},\\n    \\\"firstName\\\": \\\"FirstName\\\",\\n    \\\"lastName\\\": \\\"LastName\\\"\\n}\",\n      \"language\": \"json\",\n      \"name\": \"Create vaulted shopper with hosted payment field token\"\n    },\n    {\n      \"code\": \"{\\n    \\\"firstName\\\": \\\"FirstName\\\",\\n    \\\"lastName\\\": \\\"LastName\\\",\\n    \\\"paymentSources\\\": {\\\"creditCardInfo\\\": [{\\n         \\\"pfToken\\\": \\\"9688f4f6945f615b1ab6954ceb5dbf67f63d6b41fa27dbff6ac342cff9bf50fc_\\\"\\n    }]}\\n}\",\n      \"language\": \"json\",\n      \"name\": \"Update vaulted shopper with hosted payment field token\"\n    }\n  ]\n}\n[/block]\n##In the Extended Payment API\n\n###New shopper\nTo use the Hosted Payment Fields token to process a payment for a **new shopper**, you can  send the token within the `pf-token` property in your [Create Order and New Shopper](/v8976-Extended/docs/create-shopper-and-order) or [Create Shopping Context](/v8976-Extended/docs/create-shopping-context) request.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<batch-order xmlns=\\\"http://ws.plimus.com\\\">\\n  <shopper>\\n    <web-info>\\n      <ip>62.219.121.253</ip>\\n    </web-info>\\n    <shopper-info>\\n      <shopper-currency>USD</shopper-currency>\\n      <store-id>4677</store-id>\\n      <locale>en</locale>\\n      <shopper-contact-info>\\n        <title>Mr.</title>\\n        <first-name>John</first-name>\\n        <last-name>Doe</last-name>\\n        <email>jdoe:::at:::johndoeandsons.com</email>\\n        <company-name>JohnDoeAndSons</company-name>\\n        <address1>138 Market st</address1>\\n        <city>San Francisco</city>\\n        <zip>756543</zip>\\n        <state>CA</state>\\n        <country>US</country>\\n        <phone>1413555666</phone>\\n        <fax>1413555666789</fax>\\n      </shopper-contact-info>\\n      <payment-info>\\n        <credit-cards-info>\\n          <credit-card-info>\\n            <billing-contact-info>\\n              <first-name>John</first-name>\\n              <last-name>Doe</last-name>\\n              <address1>138 Market st</address1>\\n              <city>San Francisco</city>\\n              <zip>756543</zip>\\n              <state>CA</state>\\n              <country>US</country>\\n            </billing-contact-info>\\n            <pf-token>c7c69ff853ab784ef35a0c78ffec08e78cf1d1b5b4bb9e2644c2bcc73f3f818f_1</pf-token>\\n          </credit-card-info>\\n        </credit-cards-info>\\n      </payment-info>\\n    </shopper-info>\\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>2152762</sku-id>\\n        </sku>\\n        <quantity>1</quantity>\\n      </cart-item>\\n    </cart>\\n    <expected-total-price>\\n      <amount>15.00</amount>\\n      <currency>USD</currency>\\n    </expected-total-price>\\n  </order>\\n</batch-order>\",\n      \"language\": \"xml\",\n      \"name\": \"Create Order and New Shopper Request: Hosted Payment Fields for new shopper\"\n    },\n    {\n      \"code\": \"<shopping-context xmlns=\\\"http://ws.plimus.com\\\">\\n  <web-info>\\n    <ip>62.219.121.253</ip>\\n    <remote-host>\\n    bzq-219-121-253.static.bezeqint.net.reinventhosting.com</remote-host>\\n    <user-agent>Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;\\n    SV1; GTB6.3; .NET CLR 2.0.50727)</user-agent>\\n    <accept-language>en-us</accept-language>\\n  </web-info>\\n  <shopper-details>\\n    <shopper>\\n      <shopper-info>\\n        <shopper-contact-info>\\n          <title>Mr</title>\\n          <first-name>shopper first name</first-name>\\n          <last-name>shopper last name</last-name>\\n          <email>john.smith@gmail.com</email>\\n          <company-name>JS Company</company-name>\\n          <address1>123 Oxford</address1>\\n          <address2 />\\n          <city>London</city>\\n          <state>ny</state>\\n          <zip>54321</zip>\\n          <country>us</country>\\n          <phone>1800808080</phone>\\n          <fax>1800808080</fax>\\n        </shopper-contact-info>\\n        <shipping-contact-info>\\n          <first-name>Shipping first name</first-name>\\n          <last-name>Shipping last name</last-name>\\n          <address1>123 Oxford</address1>\\n          <address2 />\\n          <city>London</city>\\n          <state>ny</state>\\n          <zip>54321</zip>\\n          <country>us</country>\\n        </shipping-contact-info>\\n        <invoice-contacts-info>\\n          <invoice-contact-info>\\n            <default>true</default>\\n            <company-name>BlueSnap UK</company-name>\\n            <vat-code></vat-code>\\n            <title>Mrs.</title>\\n            <first-name>John</first-name>\\n            <last-name>Black</last-name>\\n            <address1>5 star drive</address1>\\n            <address2>3rd entrance</address2>\\n            <city>Purchase</city>\\n            <state>NY</state>\\n            <zip>34645</zip>\\n            <country>us</country>\\n            <phone>1800400500</phone>\\n            <fax>1800400500</fax>\\n            <email>johndoe@BlueSnap.com</email>\\n          </invoice-contact-info>\\n        </invoice-contacts-info>\\n        <payment-info>\\n          <credit-cards-info>\\n            <credit-card-info>\\n              <billing-contact-info>\\n                <first-name>John</first-name>\\n                <last-name>Doe</last-name>\\n                <address1>138 Market st</address1>\\n                <city>San Francisco</city>\\n                <zip>756543</zip>\\n                <state>CA</state>\\n                <country>US</country>\\n              </billing-contact-info>\\n              <pf-token>c7c69ff853ab784ef35a0c78ffec08e78cf1d1b5b4bb9e2644c2bcc73f3f818f_1</pf-token>\\n            </credit-card-info>\\n          </credit-cards-info>\\n        </payment-info>\\n        <store-id>12700</store-id>\\n        <vat-code></vat-code>\\n        <shopper-currency>USD</shopper-currency>\\n        <locale>en</locale>\\n      </shopper-info>\\n    </shopper>\\n  </shopper-details>\\n  <order-details>\\n    <order>\\n      <cart>\\n        <cart-item>\\n          <sku>\\n            <sku-id>2178316</sku-id>\\n            <sku-charge-price>\\n              <charge-type>initial</charge-type>\\n              <amount>50.00</amount>\\n              <currency>USD</currency>\\n            </sku-charge-price>\\n          </sku>\\n          <quantity>1</quantity>\\n        </cart-item>\\n      </cart>\\n      <expected-total-price>\\n        <amount>50.00</amount>\\n        <currency>USD</currency>\\n      </expected-total-price>\\n    </order>\\n  </order-details>\\n</shopping-context>\",\n      \"language\": \"xml\",\n      \"name\": \"Create Shopping Context Request: Hosted Payment Fields for new shopper\"\n    }\n  ]\n}\n[/block]\n###Existing shopper\nTo use the Hosted Payment Fields token to process a payment for an **existing shopper**, first update the existing shopper with the information from the Hosted Payment Fields by sending the token within the `pf-token` property in your [Update Shopper](/v8976-Extended/docs/update-shopper) request.\n\nYou can then process the payment as usual, by including the relevant shopper ID in the [Create Order with Existing Shopper](/v8976-Extended/docs/create-order) or [Create Shopping Context](/v8976-Extended/docs/create-shopping-context) request.\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>4677</store-id>\\n    <payment-info>\\n      <credit-cards-info>\\n        <credit-card-info>\\n          <billing-contact-info>\\n            <first-name>John</first-name>\\n            <last-name>Doe</last-name>\\n            <address1>138 Market st</address1>\\n            <city>San Francisco</city>\\n            <zip>756543</zip>\\n            <state>CA</state>\\n            <country>US</country>\\n          </billing-contact-info>\\n          <pf-token>c7c69ff853ab784ef35a0c78ffec08e78cf1d1b5b4bb9e2644c2bcc73f3f818f_1</pf-token>\\n        </credit-card-info>\\n      </credit-cards-info>\\n    </payment-info>\\n  </shopper-info>\\n</shopper>\",\n      \"language\": \"xml\",\n      \"name\": \"Update Shopper Request: adding Hosted Payment Fields token\"\n    }\n  ]\n}\n[/block]\n<a class=\"btn btn-primary\" href=\"#\" role=\"button\">Back to Top</a>","excerpt":"Learn how to implement Hosted Payment Fields for PCI compliance of SAQ-A & maximum flexibility. \nIf you still have questions after reading, check out the [FAQs](https://support.bluesnap.com/docs/merchant-faqs#hosted-payment-fields).","slug":"hosted-payment-fields","type":"basic","title":"Hosted Payment Fields"}

Hosted Payment Fields

Learn how to implement Hosted Payment Fields for PCI compliance of SAQ-A & maximum flexibility. If you still have questions after reading, check out the [FAQs](https://support.bluesnap.com/docs/merchant-faqs#hosted-payment-fields).

If you would like to build your custom checkout flow using the API, but keep your PCI compliance requirements limited to the minimal SAQ-A level, BlueSnap’s Hosted Payment Fields are the ideal solution.

Hosted Payment Fields are iframes that replace sensitive credit card input fields in your checkout page. When the shopper submits the checkout form, BlueSnap binds this payment data to a token. You can then easily process payments or save shopper details by including the token in your BlueSnap API requests.

This setup guide supports the latest version 2.0 of Hosted Payment Fields. If you're currently using version 1.0, visit our Help & Support to learn how to upgrade.

For setup and usage instructions, see:

  Implementing Hosted Payment Fields in your checkout form

  Styling the Hosted Payment Fields

  Example Forms

  Using the Hosted Payment Fields token to process payments and save shopper info

Benefits

  • Control the look and feel of your checkout flow, including the Hosted Payment Fields
  • Simplest level of PCI compliance: SAQ-A
  • Securely capture payment information without your shoppers ever leaving your site
  • Use the Hosted Payment Fields token to complete a sale, as well as create or update a Vaulted Shopper

How it works

  1. You create a Hosted Payment Fields token for the specific checkout session, using a server-to-server API call.
  2. On the checkout form, you call BlueSnap’s Hosted Fields JavaScript file with this Hosted Payment Fields token.
  3. After the shopper completes the form and clicks “Submit”, the sensitive payment data from the Hosted Payment Fields is saved in BlueSnap’s database and bound to the Hosted Payment Fields token you provided. This includes the following fields:

    • Credit Card Number
    • Expiration Month/Year
    • CVV
  4. Once the form has been submitted, you can use the Hosted Payment Fields token to process the purchase, create a shopper, or update a shopper with the new card details provided on the checkout page.



Back to Top

Implementing Hosted Payment Fields in your checkout form

Follow the steps below in order to implement Hosted Payment Fields in your checkout form.

Insert the domain for either Sandbox or Production

In all steps below, replace the BLUESNAPDOMAINPATH with the relevant domain for either the BlueSnap Sandbox or Production environment, as follows:

  • Sandbox: https://sandbox.bluesnap.com
  • Production: https://ws.bluesnap.com

For example, the Hosted Fields token request (step 1) should be sent to https://sandbox.bluesnap.com/services/2/payment-fields-tokens on Sandbox and https://ws.bluesnap.com/services/2/payment-fields-tokens on Production.

1. Obtain the Hosted Payment Field token for the session

Obtain the Hosted Payment Field token by sending a server-to-server POST request to:

BLUESNAPDOMAINPATH/services/2/payment-fields-tokens

The response will provide the token in the location header. For example:
BLUESNAPDOMAINPATH/services/2/payment-fields-tokens/HOSTEDFIELDTOKENID

Note: You will need a BlueSnap account in order to generate a Hosted Payment Field token. If you don't have an account yet, you can sign up for one here.

The Hosted Payment Fields Token will expire after 60 minutes.

2. Add the BlueSnap JavaScript file to your checkout form

In your checkout page, call the BlueSnap Hosted Payment Fields JavaScript file by adding the following script:

<script type="text/javascript" src="BLUESNAPDOMAINPATH/services/hosted-payment-fields/v2.0/bluesnap.hpf.min.js"></script>

3. Add the Hosted Payment Fields to your checkout form

Replace the credit card number, expiration date, and CVV input fields in your checkout form with the following <div> elements.

Important!

The values for the data-bluesnap attributes must be typed exactly as they appear in the below code in order for your implementation to work.

<div data-bluesnap="ccn"></div>
			
<div data-bluesnap="exp"></div>
			
<div data-bluesnap="cvv"></div>

4. Add a script to initiate the Hosted Payment Fields with your Hosted Fields token

In order to call the Hosted Payment Fields script, add the following script to your checkout page below the <div> elements.

<script>
         var bsObj = {
                 onFieldEventHandler: {
                         // tagId returns: "ccn", "cvv", "exp" 
                         onFocus: function(tagId) {}, // Handle focus
                         onBlur: function(tagId) {}, // Handle blur 
                         onError: function(tagId, errorCode /*, errorDescription*/) {}, // Handle a change in validation
                         /*errorCode returns:
                                 "001" --> "Please enter a valid credit card number";
                                 "002" --> "Please enter the CVV/CVC of your card";
                                 "003" --> "Please enter your credit card's expiration date";
                                 "22013" --> "CC type is not supported by the merchant"; 
                                 "400" --> "Session expired please refresh page to continue";
                                 "403", "404", "500" --> "Internal server error please try again later"; 
                         */
                         /* errorDescription is optional. Returns BlueSnap's standard error description */ 
                                                
                         onType: function(tagId, cardType) {}, /* cardType will give card type, and only applies to ccn: CarteBleue, Visa, MasterCard, AmericanExpress, Discover, DinersClub, JCB, Solo, MaestroUK, ChinaUnionPay */
                         onValid: function(tagId) {}, // Handle a change in validation
                 }, 
                 /* example:
                         style: {
                         Style elements 
                         (Selectors: "#ccn", "#cvv", "#exp", "input", ":focus", ".valid", ".invalid")
                         (Properties: "color", "font", "font-family", "font-size", "font-style", "font-weight", "line-height", "opacity", "outline", "text-shadow", "transition")
                         "Selector": {
                         "Property": "Value",
                         "Property2": "Value2"
                         },                                                                                                                                                             
                         "Selector2": {
                         "Property": "Value"
                         } 
                 }, */
                 style: {
                         ":focus": {
                                  //style for all input elements on focus event
                                  "color": "orange"
                         },
                         "input": {
                                  //style for all input elements 
                                 "color": "blue"
                         },
                         ".invalid": {
                                  //style for all input elements when invalid
                                  "color": "red"
                         }
                 },
     ccnPlaceHolder: "1234 5678 9012 3456", //for example
     cvvPlaceHolder: "123", //for example
     expPlaceHolder: "MM/YY", //for example
     expDropDownSelector: false //set to true for exp. date dropdown
         };
                
         //Run the following command after Document Object Model (DOM) is fully loaded 
         bluesnap.hostedPaymentFieldsCreation("HOSTEDFIELDTOKENID", bsObj);
</script>

Replace HOSTEDFIELDTOKENID with the token you obtained in step 1.

Use onFieldEventHandler to handle focus, blur, validation events, and to get the card type. For example, you can use this to identify when the user has entered a Visa card and then show the relevant icon for Visa.

Note: If you want to use BlueSnap icons per card type, they are available here:

  • AmericanExpress: BLUESNAPDOMAINPATH/services/hosted-payment-fields/cc-types/amex.png
  • DinersClub: BLUESNAPDOMAINPATH/services/hosted-payment-fields/cc-types/diners.png
  • Discover: BLUESNAPDOMAINPATH/services/hosted-payment-fields/cc-types/discover.png
  • JCB: BLUESNAPDOMAINPATH/services/hosted-payment-fields/cc-types/jcb.png
  • MaestroUK: BLUESNAPDOMAINPATH/services/hosted-payment-fields/cc-types/maestro.png
  • MasterCard: BLUESNAPDOMAINPATH/services/hosted-payment-fields/cc-types/mastercard.png
  • Visa: BLUESNAPDOMAINPATH/services/hosted-payment-fields/cc-types/visa.png
  • Solo: BLUESNAPDOMAINPATH/services/hosted-payment-fields/cc-types/solo.png
  • CarteBleue: BLUESNAPDOMAINPATH/services/hosted-payment-fields/cc-types/cb.png
  • ChinaUnionPay: BLUESNAPDOMAINPATH/services/hosted-payment-fields/cc-types/cup.png

Styling is optional. For more details on the style capabilities, see Styling the Hosted Payment Fields.

Optionally, use these to define what placeholder will appear in each Hosted Payment Field input:

  • ccnPlaceHolder
  • cvvPlaceHolder
  • expPlaceHolder

If you prefer to use a dropdown selector for the expiration date element, add the property expDropDownSelector to bsObj and set its value to true.

5. Add a script to submit credit card, expiration date, and CVV data

Add the script below into your checkout form:

<script>
	function do_when_clicking_submit_button(){                                             
		bluesnap.submitCredentials( function(cardData){
			console.log('the card type is ' + cardData.ccType + ', last 4 digits are ' + cardData.last4Digits + ', exp is ' + cardData.exp + ' and issuing Country is ' + cardData.issuingCountry + ', after that I can call final submit');               
			// submit the form               
		});
	}                                                                
</script>

This function should be activated when the shopper clicks the Submit button. This will submit the credit card number, expiration date, and CVV data to BlueSnap, where it will be associated with the Hosted Payment Fields token.

If the data submission to BlueSnap is successful, a card data object containing the card type, last four digits, and expiration date will be passed to the function(cardData). You should add a function to do the final submit of the form after receiving this information.

Card validation

The card will be validated when you send it in a transaction or you save it to a shopper.

Add 3D Secure for increased checkout security

Visit the 3D Secure guide to learn how to add 3D Secure to your configuration.

Back to Top

Styling the Hosted Payment Fields

Much of the styling of the Hosted Payment Fields (i.e. width, height, and outer styling) can be performed as usual via CSS.

The Hosted Payment Fields are iframes within the <div> containers, and they are nearly invisible in terms of styling. The iframes themselves do not have a border and their width and height are 100%. Input inside the iframes has no border margin or padding, has a width and height of 100%, and has a transparent background. Placeholders for inputs are provided automatically.

To apply styling inside of the Hosted Payment Fields, use the style JavaScript shown in step 4.

Supported CSS properties

We support the following CSS properties inside of the Hosted Payment Fields:

"color", "font", "font-family", "font-size", "font-style", "font-weight", "line-height", "opacity", "outline", "text-shadow", "transition"

Note: Usage of any unsupported CSS properties will result in failure of the Hosted Payment Fields.

Selectors

You can use the following selectors to define when the style will be applied:

Selector
Description

#ccn, #cvv, #month, #year

Style will be applied to the selected element.
Note that #month and #year refer to the month and year portions of the expiration date element.

input

Style will be applied to all inputs.

select

Applicable if expDropDownSelector is true.
Style will be applied to expiration date dropdown.

span

Applicable if expDropDownSelector is false.
Style will be applied to the slash ("/") separating the month and year of expiration date input.

:focus

Style will be applied to all elements on focus event.

::placeholder

Style will be applied to placeholder text.

Note: For certain browsers, the following selectors may be needed when ::placeholder does not provide the desired outcome.

  • ::-webkit-input-placeholder (for Chrome, Opera, and Safari)
  • ::-moz-placeholder (for Firefox 19+)
  • :-ms-input-placeholder (for IE and Edge)
  • :-moz-placeholder (for Firefox 18-)

.valid

Style will be applied to all inputs (or selected input) on valid event. For example, .valid or #cvv.valid.

.invalid

Style will be applied to all inputs (or selected input) on invalid event. For example: .invalid or #cvv.invalid.

Examples

var bsObj = {
  //...
  style: {
    "input": {
      //style for all input elements
      "font": "bold 14px Arial",
      "color": "#4A5157
    },
    ":focus": {
      //style for all elements on focus event
      "color": "orange"
    },
    "#ccn": {
      //style only ccn element
      "color": "blue"
    },
    "#cvv.invalid": {
      //style cvv input when invalid
      "color": "red"
    }
  }
};

Example forms

Below are two examples of checkout forms that use BlueSnap's Hosted Payment Fields (click the HTML/CSS/JS tabs to view the code):

Example 1: with Bootstrap styling

Example 2: with Material styling



Back to Top

Using the Hosted Payment Fields token to process payments and save shopper info

Once you have implemented Hosted Payment Fields in your checkout form, you can then process payments, as well as save shopper information, by including the Hosted Payment Fields token in your API requests. See below for more information on how to do this in either the Payment API or the Extended Payment API.

Note: The Hosted Payment Fields token can be used only once to either process a transaction or save shopper payment info.

In the Payment API

To use the Hosted Payment Fields token to process a payment, send the token within the pfToken property in your Auth Capture, Auth Only, or Create Subscription.

To save the card information from the Hosted Payment Fields in a new or existing vaulted shopper, send the token within the pfToken property in your Create Vaulted Shopper or Update Vaulted Shopper request.

Example requests:

{
    "amount": 11,
    "softDescriptor": "DescTest",
    "cardHolderInfo": {
        "firstName": "test first name",
        "lastName": "test last name", 
        "zip": "123456"
    },
    "currency": "USD",
    "cardTransactionType": "AUTH_CAPTURE",
    "pfToken": "abcde12345**********"
}
{
    "paymentSources": {"creditCardInfo": [{"pfToken": "9688f4f6945f615b1ab6954ceb5dbf67f63d6b41fa27dbff6ac342cff9bf50fc_"}]},
    "firstName": "FirstName",
    "lastName": "LastName"
}
{
    "firstName": "FirstName",
    "lastName": "LastName",
    "paymentSources": {"creditCardInfo": [{
         "pfToken": "9688f4f6945f615b1ab6954ceb5dbf67f63d6b41fa27dbff6ac342cff9bf50fc_"
    }]}
}

In the Extended Payment API

New shopper

To use the Hosted Payment Fields token to process a payment for a new shopper, you can send the token within the pf-token property in your Create Order and New Shopper or Create Shopping Context request.

<batch-order xmlns="http://ws.plimus.com">
  <shopper>
    <web-info>
      <ip>62.219.121.253</ip>
    </web-info>
    <shopper-info>
      <shopper-currency>USD</shopper-currency>
      <store-id>4677</store-id>
      <locale>en</locale>
      <shopper-contact-info>
        <title>Mr.</title>
        <first-name>John</first-name>
        <last-name>Doe</last-name>
        <email>jdoe@johndoeandsons.com</email>
        <company-name>JohnDoeAndSons</company-name>
        <address1>138 Market st</address1>
        <city>San Francisco</city>
        <zip>756543</zip>
        <state>CA</state>
        <country>US</country>
        <phone>1413555666</phone>
        <fax>1413555666789</fax>
      </shopper-contact-info>
      <payment-info>
        <credit-cards-info>
          <credit-card-info>
            <billing-contact-info>
              <first-name>John</first-name>
              <last-name>Doe</last-name>
              <address1>138 Market st</address1>
              <city>San Francisco</city>
              <zip>756543</zip>
              <state>CA</state>
              <country>US</country>
            </billing-contact-info>
            <pf-token>c7c69ff853ab784ef35a0c78ffec08e78cf1d1b5b4bb9e2644c2bcc73f3f818f_1</pf-token>
          </credit-card-info>
        </credit-cards-info>
      </payment-info>
    </shopper-info>
  </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>2152762</sku-id>
        </sku>
        <quantity>1</quantity>
      </cart-item>
    </cart>
    <expected-total-price>
      <amount>15.00</amount>
      <currency>USD</currency>
    </expected-total-price>
  </order>
</batch-order>
<shopping-context xmlns="http://ws.plimus.com">
  <web-info>
    <ip>62.219.121.253</ip>
    <remote-host>
    bzq-219-121-253.static.bezeqint.net.reinventhosting.com</remote-host>
    <user-agent>Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;
    SV1; GTB6.3; .NET CLR 2.0.50727)</user-agent>
    <accept-language>en-us</accept-language>
  </web-info>
  <shopper-details>
    <shopper>
      <shopper-info>
        <shopper-contact-info>
          <title>Mr</title>
          <first-name>shopper first name</first-name>
          <last-name>shopper last name</last-name>
          <email>john.smith@gmail.com</email>
          <company-name>JS Company</company-name>
          <address1>123 Oxford</address1>
          <address2 />
          <city>London</city>
          <state>ny</state>
          <zip>54321</zip>
          <country>us</country>
          <phone>1800808080</phone>
          <fax>1800808080</fax>
        </shopper-contact-info>
        <shipping-contact-info>
          <first-name>Shipping first name</first-name>
          <last-name>Shipping last name</last-name>
          <address1>123 Oxford</address1>
          <address2 />
          <city>London</city>
          <state>ny</state>
          <zip>54321</zip>
          <country>us</country>
        </shipping-contact-info>
        <invoice-contacts-info>
          <invoice-contact-info>
            <default>true</default>
            <company-name>BlueSnap UK</company-name>
            <vat-code></vat-code>
            <title>Mrs.</title>
            <first-name>John</first-name>
            <last-name>Black</last-name>
            <address1>5 star drive</address1>
            <address2>3rd entrance</address2>
            <city>Purchase</city>
            <state>NY</state>
            <zip>34645</zip>
            <country>us</country>
            <phone>1800400500</phone>
            <fax>1800400500</fax>
            <email>johndoe@BlueSnap.com</email>
          </invoice-contact-info>
        </invoice-contacts-info>
        <payment-info>
          <credit-cards-info>
            <credit-card-info>
              <billing-contact-info>
                <first-name>John</first-name>
                <last-name>Doe</last-name>
                <address1>138 Market st</address1>
                <city>San Francisco</city>
                <zip>756543</zip>
                <state>CA</state>
                <country>US</country>
              </billing-contact-info>
              <pf-token>c7c69ff853ab784ef35a0c78ffec08e78cf1d1b5b4bb9e2644c2bcc73f3f818f_1</pf-token>
            </credit-card-info>
          </credit-cards-info>
        </payment-info>
        <store-id>12700</store-id>
        <vat-code></vat-code>
        <shopper-currency>USD</shopper-currency>
        <locale>en</locale>
      </shopper-info>
    </shopper>
  </shopper-details>
  <order-details>
    <order>
      <cart>
        <cart-item>
          <sku>
            <sku-id>2178316</sku-id>
            <sku-charge-price>
              <charge-type>initial</charge-type>
              <amount>50.00</amount>
              <currency>USD</currency>
            </sku-charge-price>
          </sku>
          <quantity>1</quantity>
        </cart-item>
      </cart>
      <expected-total-price>
        <amount>50.00</amount>
        <currency>USD</currency>
      </expected-total-price>
    </order>
  </order-details>
</shopping-context>

Existing shopper

To use the Hosted Payment Fields token to process a payment for an existing shopper, first update the existing shopper with the information from the Hosted Payment Fields by sending the token within the pf-token property in your Update Shopper request.

You can then process the payment as usual, by including the relevant shopper ID in the Create Order with Existing Shopper or Create Shopping Context request.

<shopper xmlns="http://ws.plimus.com">
  <web-info>
    <ip>62.219.121.253</ip>
  </web-info>
  <shopper-info>
    <store-id>4677</store-id>
    <payment-info>
      <credit-cards-info>
        <credit-card-info>
          <billing-contact-info>
            <first-name>John</first-name>
            <last-name>Doe</last-name>
            <address1>138 Market st</address1>
            <city>San Francisco</city>
            <zip>756543</zip>
            <state>CA</state>
            <country>US</country>
          </billing-contact-info>
          <pf-token>c7c69ff853ab784ef35a0c78ffec08e78cf1d1b5b4bb9e2644c2bcc73f3f818f_1</pf-token>
        </credit-card-info>
      </credit-cards-info>
    </payment-info>
  </shopper-info>
</shopper>