{"_id":"5c6c238ff7d548003953559a","project":"57336fd5a6a9c40e00e13a0b","version":{"_id":"5c6c238ff7d54800395355a0","project":"57336fd5a6a9c40e00e13a0b","__v":1,"forked_from":"5beb278ac442ab0213f009cf","createdAt":"2018-04-23T14:36:48.535Z","releaseDate":"2018-04-23T14:36:48.535Z","categories":["5c6c238ff7d548003953555d","5c6c238ff7d548003953555e","5c6c238ff7d548003953555f","5c6c238ff7d5480039535560","5c6c238ff7d5480039535561","5c6c238ff7d5480039535562","5beb278ac442ab0213f00990","5c6c238ff7d5480039535563","5c3f542c12c4ac004bc51718","5c928dba4aa821001ae4f050"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"Main","version_clean":"8976.0.0-Basics","version":"8976-Basics"},"category":{"_id":"5c6c238ff7d5480039535563","version":"5c6c238ff7d54800395355a0","project":"57336fd5a6a9c40e00e13a0b","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-11-03T20:45:01.593Z","from_sync":false,"order":7,"slug":"topics","title":"Guides"},"user":"5b155c2c3fbcd30003e76908","__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2018-09-04T18:06:28.198Z","link_external":false,"link_url":"/v8976-Tools/docs/embedded-checkout","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":9,"body":"The Embedded Checkout payment flow is a secure and streamlined solution to capture credit card payments with minimum development time, suitable for both desktop and mobile web environments. You can embed this hosted checkout page on your site and then let your shopper enter their payment information and complete the payment.\n\nThis solution uses iframes that allow you to create a hosted pop-up (called the \"Embedded Payment Form,\" see the example below) 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:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/c64943b-Embedded_Payment_Form.png\",\n        \"Embedded_Payment_Form.png\",\n        337,\n        427,\n        \"#f0f1f1\"\n      ]\n    }\n  ]\n}\n[/block]\nFor setup and usage instructions, see:\n\n:fa-arrow-circle-right: &nbsp;  [Implementing Embedded Checkout in your Embedded Payment Form](#section-implementing-embedded-checkout-in-your-embedded-payment-form)\n\n:fa-arrow-circle-right: &nbsp;  [Available languages](#section-available-languages)\n\n:fa-arrow-circle-right: &nbsp;  [Using the Embedded Checkout token to process payments](#section-using-the-embedded-checkout-token-to-process-payments)\n\n:fa-arrow-circle-right: &nbsp;  [Setting the language](#section-setting-the-language)\n\n:fa-arrow-circle-right: &nbsp;  [Uploading an image](#section-uploading-an-image)\n\n###Benefits\n * Control the look and feel of your checkout flow\n * Simplest level of PCI compliance: SAQ-A\n * Perform cross-platform checkout (Mobile, tablet, and desktop) with no redirection to complete the transaction\n * Easy to implement\n * Instant pay\n * Securely capture payment information without your shoppers ever leaving your site\n * Use the Embedded Checkout token to complete a sale\n * Supports [24 languages](#section-available-languages) (not including English)\n\n###How it works\n1. You create an Embedded Checkout token for the specific checkout session, using a server-to-server API call.\n2. On the checkout form, you call BlueSnap’s JavaScript file with this Embedded Checkout token.\n3. After the shopper completes the form and clicks “Submit”, the sensitive payment data from the Embedded Payment Form is saved in BlueSnap’s database and bound to the Embedded Checkout token you provided. This includes the following fields:\n\n  * Credit Card Number\n  * Expiration Month/Year\n  * CVV\n\n4. Once the form has been submitted, you can use the Embedded Checkout token to process the purchase, create a shopper, or update a shopper with the new card details provided on the checkout page.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Notes:\",\n  \"body\": \"* There are no size limitations on the Embedded Payment Form, but we recommend using  sizing that relates to the image displayed above since it will be displayed in a square.\\n* You cannot change the font in the Embedded Payment Form.\"\n}\n[/block]\n<br>\n<a class=\"btn btn-primary\" href=\"#\" role=\"button\">Back to Top</a>\n\n#Implementing Embedded Checkout in your Embedded Payment Form\nFollow the steps below to implement Embedded Checkout in your Embedded Payment 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 Embedded Checkout 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 Embedded Checkout token for the session\nObtain the Embedded Checkout 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 an Embedded Checkout token. If you don't have an account yet, you can [sign up for one here](http://home.bluesnap.com/get-started/).\n\nThe Embedded Checkout 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 Embedded Checkout 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 Embedded Checkout JavaScript file\"\n    }\n  ]\n}\n[/block]\n##3. Open Embedded Checkout Form\nAfter the script finishes loading, you can now open the Embedded Payment Form by calling the following function: \n\n`bluesnap.openCheckout(JsonData, callbackFunction())`\n\nThe `openCheckout` function has two arguments:\n\n* `JsonData`: This JSON object contains all the settings for the checkout form and should be sent using the following format:\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Parameter Name\",\n    \"h-1\": \"Required/Optional\",\n    \"h-2\": \"Description\",\n    \"h-3\": \"Type/Possible Values\",\n    \"0-0\": \"`token`\",\n    \"1-0\": \"`title`\",\n    \"2-0\": \"`description`\",\n    \"3-0\": \"`img`\",\n    \"4-0\": \"`amount`\",\n    \"5-0\": \"`language`\",\n    \"6-0\": \"`currency`\",\n    \"7-0\": \"`buttonLabel`\",\n    \"8-0\": \"`billingDetails`\",\n    \"9-0\": \"`includeEmail`\",\n    \"10-0\": \"`shopperData`\",\n    \"0-1\": \"Required\",\n    \"0-2\": \"Token created by the API service\",\n    \"1-2\": \"Title on the checkout form\",\n    \"1-1\": \"Optional\",\n    \"2-1\": \"Optional\",\n    \"2-2\": \"Description that displays below the title\",\n    \"3-2\": \"Relative URL path to the image uploaded to BlueSnap\\n\\n**Note:** See [Uploading an image](#section-uploading-an-image) for more information.\",\n    \"3-1\": \"Optional\",\n    \"4-2\": \"Amount that displays in the dark blue button at the bottom of the form\\n\\n**Note:** This value must be a number.\",\n    \"4-1\": \"Optional\",\n    \"5-1\": \"Optional\",\n    \"5-2\": \"Checkout form's locale\\n\\n**Note:** See [Available languages](#section-available-languages) for more information.\\n\\n\",\n    \"6-1\": \"Optional\",\n    \"6-2\": \"Currency symbol that displays in the dark blue button at the bottom of the form\\n\\n**Note:** The default currency is U.S. dollars (\\\"USD\\\").\",\n    \"7-1\": \"Optional\",\n    \"7-2\": \"Text that displays in the dark blue button at the bottom of the form\\n\\n**Note:** The default is \\\"Pay.\\\"\",\n    \"8-1\": \"Optional\",\n    \"8-3\": \"**true **or **false**\",\n    \"8-2\": \"* If **true**, the form will include the inputted billing details: Country, State, City, Address\\n* If **false**, the form will *not *include the inputted billing details\\n\\n**Note:** The default is **false**.\",\n    \"9-1\": \"Optional\",\n    \"10-1\": \"Optional\",\n    \"9-3\": \"**true **or **false**\",\n    \"9-2\": \"* If **true**, the form will include the email input\\n* If **false**, the form will *not *include the email input\\n\\n**Note:** The default is **false**.\",\n    \"10-2\": \"Represents the shopper's information and will automatically fill in the form's fields:\\n\\n* email\\n* firstname\\n* lastname\\n* zip\\n* country\\n* state\\n* city\\n* address\"\n  },\n  \"cols\": 4,\n  \"rows\": 11\n}\n[/block]\n* `callbackFunction`: This argument is a callback function, which is called immediately after the shopper clicks the last button (\"BUY\"). \n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Note:\",\n  \"body\": \"In this stage you should use the token to complete the transaction via an API call from your server transaction API from your server-side. The callback function’s argument contains the result of the checkout form in the following format:\"\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/6ade7d1-Embedded_Checkout_callbackfunction.png\",\n        \"Embedded_Checkout_callbackfunction.png\",\n        718,\n        127,\n        \"#1b1b1b\"\n      ]\n    }\n  ]\n}\n[/block]\n##4. Close BlueSnap Embedded Payment Form\n\nYou must close the Embedded Payment Form to keep it from continuously displaying.\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Important!\",\n  \"body\": \"The Embedded Payment Form will NOT close until the next function is called: `bluesnap.closeCheckout();`.\\n\\nWe recommend calling this function *after *the transaction was successfully completed (see example below).\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var jsonData = {\\n\\ttoken: \\\"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\\\"\\n\\ttitle: \\\"BlueSnap Example\\\"\\n\\tdescription: \\\"This is description for example...\\\"\\n\\timg: \\\"/developers/571747/download.jpg\\\"\\n\\tamount: \\\"150\\\"\\n\\tcurrency: \\\"EUR\\\"\\n\\tbuttonLabel: \\\"Click to buy\\\"\\n\\tbillingDetails: true\\n\\tincludeEmail: true\\n\\tlanguage: \\\"EN\\\"\\n\\tshopperData: {\\n\\t\\tfirstname: \\\"Someone\\\",\\n\\t\\tlastname: \\\"JustExample\\\"\\n\\t}\\n}\\n\\nbluesnap.openCheckout(jsonData, function (eCheckoutResult) {\\n\\tif (eCheckoutResult.code == 1) { // On Success\\n\\t\\t// Your code here...\\n\\t\\t// This where you need to process the payment via an API request from your server\\n\\n} else { // On Error (code=10 - invalid JsonData, any other codes are errors, on error \\n    eCheckoutResult.data will contain the error description)\\n\\n   bluesnap.closeCheckout();\\n\\t}\",\n      \"language\": \"json\"\n    }\n  ]\n}\n[/block]\n<br />\n<a class=\"btn btn-primary\" href=\"#\" role=\"button\">Back to Top</a>\n\n#Available languages\n\nThe following languages are available for display in the Embedded Checkout Form.\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Code\",\n    \"h-1\": \"Language\",\n    \"0-0\": \"BG\",\n    \"0-1\": \"Bulgarian\",\n    \"1-0\": \"CZ\",\n    \"1-1\": \"Czech\",\n    \"2-0\": \"DA\",\n    \"3-0\": \"DE\",\n    \"2-1\": \"Danish\",\n    \"3-1\": \"German\",\n    \"4-0\": \"ES\",\n    \"5-0\": \"FI\",\n    \"4-1\": \"Spanish\",\n    \"5-1\": \"Finnish\",\n    \"6-0\": \"FR\",\n    \"7-0\": \"HU\",\n    \"6-1\": \"French\",\n    \"7-1\": \"Hungarian\",\n    \"8-0\": \"IT\",\n    \"9-0\": \"JA\",\n    \"8-1\": \"Italian\",\n    \"9-1\": \"Japanese\",\n    \"10-0\": \"KR\",\n    \"11-0\": \"LT\",\n    \"10-1\": \"Korean\",\n    \"11-1\": \"Lithuanian\",\n    \"12-0\": \"NL\",\n    \"13-0\": \"NO\",\n    \"12-1\": \"Dutch\",\n    \"13-1\": \"Norwegian\",\n    \"14-0\": \"PL\",\n    \"15-0\": \"PT\",\n    \"14-1\": \"Polish\",\n    \"15-1\": \"Portuguese\",\n    \"16-0\": \"RU\",\n    \"17-0\": \"SK\",\n    \"16-1\": \"Russian\",\n    \"17-1\": \"Slovak\",\n    \"18-0\": \"SL\",\n    \"19-0\": \"SQ\",\n    \"18-1\": \"Slovanian\",\n    \"19-1\": \"Albanian\",\n    \"20-0\": \"SR\",\n    \"21-0\": \"SV\",\n    \"20-1\": \"Serbian\",\n    \"21-1\": \"Swedish\",\n    \"22-0\": \"TR\",\n    \"23-0\": \"ZH\",\n    \"22-1\": \"Turkish\",\n    \"23-1\": \"Chinese\"\n  },\n  \"cols\": 2,\n  \"rows\": 24\n}\n[/block]\n<br />\n<a class=\"btn btn-primary\" href=\"#\" role=\"button\">Back to Top</a>\n\n#Using the Embedded Checkout token to process payments\nOnce the callback function triggers, you can then process payments by including the Embedded Checkout token in your API requests. This must be done from your server and requires using your [API Credentials](doc:api-credentials).\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Note:\",\n  \"body\": \"The Embedded Checkout token can only be used once to process a transaction.\"\n}\n[/block]\n##In the Payment API\nTo use the Embedded Checkout token to process a payment, send the token within the `pfToken` property in the create-transaction API request (either for [Auth-Only](https://developers.bluesnap.com/v8976-JSON/docs/auth-only) or [Auth-Capture](https://developers.bluesnap.com/v8976-JSON/docs/auth-capture) transactions).\n\nExample request:\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 Auth' \\\\\\n-d '\\n{\\n\\t\\\"cardTransactionType\\\": \\\"AUTH_CAPTURE\\\",\\n\\t\\\"recurringTransaction\\\": \\\"ECOMMERCE\\\",\\n\\t\\\"softDescriptor\\\": \\\"Mobile SDK test\\\",\\n\\t\\\"amount\\\": 25.00,\\n\\t\\\"currency\\\": \\\"USD\\\",\\n\\t\\\"pfToken\\\": \\\"TOKEN_STRING\\\"\\n}'\",\n      \"language\": \"json\",\n      \"name\": \"Card transaction with Embedded Checkout token\"\n    }\n  ]\n}\n[/block]\n<br />\n<a class=\"btn btn-primary\" href=\"#\" role=\"button\">Back to Top</a>\n\n#Setting the language\nYou can set the language using the `language` parameter; for example, `language: \"EN\"` sets the language as English.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Note:\",\n  \"body\": \"See [Available Languages](#section-available-languages) for more information.\"\n}\n[/block]\n#Uploading an image\n\n1. In the BlueSnap Merchant Console, go to **Settings > General Settings**.\n2. Under Account Settings, click **My Images**.\n3. Click **Choose File**, select the image you want to upload, then click **Upload**.\n4. As mentioned above, after the file uploads you should provide the relative path of the file; for example:\n  * File URL: https://sandbox.bluesnap.com/developers/571747/download.jpg \n  * Relative Path: /developers/571747/download.jpg\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Note:\",\n  \"body\": \"If you need further assistance, please contact [Merchant Support](https://bluesnap.zendesk.com/hc/en-us/requests/new?ticket_form_id=360000127087).\"\n}\n[/block]\n<a class=\"btn btn-primary\" href=\"#\" role=\"button\">Back to Top</a>","excerpt":"Learn how to implement Embedded Checkout to capture credit card payments.\nIf you still have questions after reading, check out the [FAQs](https://support.bluesnap.com/docs/merchant-faqs#hosted-payment-fields).","slug":"embedded-checkout","type":"link","title":"Embedded Checkout"}