{"_id":"5bc48b4f9919d4000df5ea4d","category":{"_id":"5bc48b4f9919d4000df5ea35","version":"5bc48b4f9919d4000df5ea7b","project":"57336fd5a6a9c40e00e13a0b","__v":0,"sync":{"url":"","isSync":false},"reference":true,"createdAt":"2016-05-19T19:19:37.628Z","from_sync":false,"order":7,"slug":"hosted-payment-fields","title":"Hosted Payment Fields"},"project":"57336fd5a6a9c40e00e13a0b","user":"560d5913af97231900938124","parentDoc":null,"version":{"_id":"5bc48b4f9919d4000df5ea7b","project":"57336fd5a6a9c40e00e13a0b","__v":0,"forked_from":"5b8ec64c7ef0f4000350182a","createdAt":"2018-04-23T15:17:35.680Z","releaseDate":"2018-04-23T15:17:35.680Z","categories":["5bc48b4f9919d4000df5ea33","5bc48b4f9919d4000df5ea34","5bc48b4f9919d4000df5ea35","5bc48b4f9919d4000df5ea36","5bc48b4f9919d4000df5ea37","5bc48b4f9919d4000df5ea38","5bc48b4f9919d4000df5ea39","5bc48b4f9919d4000df5ea3a","5bc48b4f9919d4000df5ea3b","5bc48b4f9919d4000df5ea3c","5bc48b4f9919d4000df5ea3d","5bc48b4f9919d4000df5ea3e","5b34c737e0dca2000311de6a","5bc48b4f9919d4000df5ea3f"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":false,"codename":"3.27.1 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 **3.0** (Web SDK) of Hosted Payment Fields. If you're currently using version 2.0, visit our Help & Support's Merchant FAQs page to learn how to [upgrade from v2.0 to v3.0](https://support.bluesnap.com/docs/merchant-faqs#section--how-can-i-upgrade-from-v2-0-to-v3-0-of-the-hosted-payment-fields-).\"\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;  [Updating the BlueSnap token](#section-updating-the-bluesnap-token)\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[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"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  \"title\": \"Note:\"\n}\n[/block]\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/source/web-sdk/bluesnap.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                \\\"14040\\\" --> \\\" Token is expired\\\";\\n                \\\"14041\\\" --> \\\" Could not find token\\\";\\n                \\\"14042\\\" --> \\\" Token is not associated with a payment method, please verify your client integration or contact BlueSnap support\\\";\\n                \\\"400\\\" --> \\\"Session expired please refresh page to continue\\\";\\n                \\\"403\\\", \\\"404\\\", \\\"500\\\" --> \\\"Internal server error please try again later\\\"; \\n            */\\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\\\", \\\"#year\\\", \\\"#month\\\", \\\"input\\\", \\\"::placeholder\\\", \\\":focus\\\", \\\".valid\\\", \\\".invalid\\\", \\\"span\\\", \\\"select\\\", \\\"option\\\")\\n(Properties: \\\"color\\\", \\\"font\\\", \\\"font-family\\\", \\\"font-size\\\", \\\"font-style\\\", \\\"font-weight\\\", \\\"line-height\\\", \\\"opacity\\\", \\\"outline\\\", \\\"text-shadow\\\", \\\"transition\\\",\\n\\\"left\\\", \\\"margin-right\\\", \\\"width\\\", \\\"height\\\", \\\"background-color)\\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/source/web-sdk/hosted-payment-fields/cc-types/amex.png\n  * **DinersClub**: BLUESNAPDOMAINPATH/source/web-sdk/hosted-payment-fields/cc-types/diners.png\n  * **Discover**: BLUESNAPDOMAINPATH/source/web-sdk/hosted-payment-fields/cc-types/discover.png\n  * **JCB**: BLUESNAPDOMAINPATH/source/web-sdk/hosted-payment-fields/cc-types/jcb.png\n  * **MaestroUK**: BLUESNAPDOMAINPATH/source/web-sdk/hosted-payment-fields/cc-types/maestro.png\n  * **MasterCard**: BLUESNAPDOMAINPATH/source/web-sdk/hosted-payment-fields/cc-types/mastercard.png\n  * **Visa**: BLUESNAPDOMAINPATH/source/web-sdk/hosted-payment-fields/cc-types/visa.png\n  * **Solo**: BLUESNAPDOMAINPATH/source/web-sdk/hosted-payment-fields/cc-types/solo.png\n  * **CarteBleue**: BLUESNAPDOMAINPATH/source/web-sdk/hosted-payment-fields/cc-types/cb.png\n  * **ChinaUnionPay**: BLUESNAPDOMAINPATH/source/web-sdk/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    function do_when_clicking_submit_button(){                                             \\n\\t\\t    bluesnap.submitCredentials( function(callback){\\n            if (null != callBack.cardData) {\\n                console.log('the card type is ' + callBack.cardData.ccType +                                      \\n                ', last 4 digits are ' + callBack.cardData.last4Digits +\\n                ', exp is ' + callBack.cardData.exp + ' and issuing Country is '\\n                + callBack.cardData.issuingCountry + ', after that I can call\\n                final submit');               \\n\\t\\t\\t\\t        // submit the form  \\n            } else {  \\n                var errorArray = callBack.error;\\n            \\t  for (i in errorArray) {\\n                    console.log(\\\"Received error: tagId= \\\" + \\n                    errorArray[i].tagId + \\\", errorCode= \\\" + \\n                    errorArray[i].errorCode + \\\", errorDescription= \\\" + \\n                    errorArray[i].errorDescription);\\n            \\t\\t}\\n            }             \\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(callback) { // callback.cardData}`, else if there is an error in submission `callback.error` will receive an array and each item will contain `errorArray[i].tagId, errorArray[i].errorCode, errorArray[i].errorDescription`, if it is either a client error or server error.\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#Updating the BlueSnap Token\nIf the token expires (expiration occurs after 60 minutes, see [error code event 14040](https://developers.bluesnap.com/v8976-Tools/docs/hosted-payment-field-errors)), you can update it by creating a new token (see [Obtain the Hosted Payment Field token for the session](https://developers.bluesnap.com/v8976-Tools/docs/hosted-payment-fields#section-1-obtain-the-hosted-payment-field-token-for-the-session)) and update the solution accordingly:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"bluesnap.updateBSToken(new token string);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\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\", \"left\", \"margin-right\", \"width\", \"height\", \"background-color\"\n\n**Note:** Using 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    \"8-0\": \"**.option**\",\n    \"8-1\": \"Style will be applied to all drop-down options.\"\n  },\n  \"cols\": 2,\n  \"rows\": 9\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<a class=\"btn btn-primary\" href=\"#\" role=\"button\">Back to Top</a>\n\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[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"The Hosted Payment Fields token can be used only once to either process a transaction or save shopper payment info.\",\n  \"title\": \"Note:\"\n}\n[/block]\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"}