{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","settings":"","results":{"codes":[]},"params":[]},"next":{"description":"","pages":[]},"title":"Embedded Checkout","type":"basic","slug":"embedded-checkout","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/v5.0/docs/faqs-embedded-checkout).","body":"If you want the control and flexibility offered with BlueSnap's [Payment API](https://developers.bluesnap.com/v8976-JSON/docs) and easily add an optimized checkout flow, Embedded Checkout is your ideal solution. Using Embedded Checkout provides your shoppers with a simple checkout flow using BlueSnap-supported currencies and in multiple languages.\n \nThis solution uses a secure form called the \"Embedded Payment Form,\" to capture and tokenize your shopper's payment data, so sensitive data never touches your environment. When your shopper completes their purchase, you include the token in the API request to complete the transaction.\n[block:image]\n{\n \"images\": [\n {\n \"image\": [\n \"https://files.readme.io/044eda9-Embedded_Payment_Form.png\",\n \"Embedded_Payment_Form.png\",\n 337,\n 427,\n \"#f0f1f1\"\n ]\n }\n ]\n}\n[/block]\n##Benefits\n* Easy to implement\n* Securely capture payment information without your shoppers ever leaving your site\n* Shoppers can checkout on any device \n* Supports returning shoppers with auto-fill fields\n* Merchants can configure the number of data fields, colors, logo, and description to display on the form\n* Supports all BlueSnap-supported currencies\n* Supports [multiple languages](#section-available-languages)\n* Simplest level of PCI compliance: SAQ-A\n\n##Setup\nFor setup and usage instructions, see:\n\n:fa-arrow-circle-right: [Implementing Embedded Checkout](#section-implementing-embedded-checkout)\n\n:fa-arrow-circle-right: [Available languages](#section-available-languages)\n\n:fa-arrow-circle-right: [Using the Embedded Checkout token to process payments](#section-using-the-embedded-checkout-token-to-process-payments)\n\n:fa-arrow-circle-right: [Uploading an image](#section-uploading-an-image)\n\n#Implementing Embedded Checkout\nFollow the steps below to implement Embedded Checkout.\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 provides the token in the location header. For example: \n\n`BLUESNAPDOMAINPATH/services/2/payment-fields-tokens/HOSTEDFIELDTOKENID`\n[block:callout]\n{\n \"type\": \"info\",\n \"title\": \"Notes:\",\n \"body\": \"* The Embedded Checkout token expires after 60 minutes.\\n* You 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}\n[/block]\n##2. Add the BlueSnap JavaScript file to your checkout form\nIn your checkout form, 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/web-sdk/4/bluesnap.js\\\"></script> \",\n \"language\": \"javascript\",\n \"name\": \"Adding Embedded Checkout Javascript file\"\n }\n ]\n}\n[/block]\n##3. Open the Embedded Checkout Form\nAfter the script finishes loading, you can open the Embedded Payment Form. This is done in two steps:\n 1. Set up the checkout form by calling: \n`bluesnap.embeddedCheckoutSetup(jsonData, callbackFunction)`\n 2. Open the checkout form by calling: \n`bluesnap.embeddedCheckoutOpen()`\n\nUsing two separate functions lets you set up the form and it's required resources *before* opening the form so the shopper does not have to wait for the form to open.\n[block:callout]\n{\n \"type\": \"warning\",\n \"title\": \"Notes\",\n \"body\": \"* If the `bluesnap.embeddedCheckoutOpen` function is called before the `bluesnap.embeddedCheckoutSetup` function, an error is displayed.\\n* If the `bluesnap.embeddedCheckoutOpen` function is called before the `bluesnap.embeddedCheckoutSetup` function has completed, the shopper sees a loading indicator.\"\n}\n[/block]\n<p id=\"bp\" />\n[block:callout]\n{\n \"type\": \"info\",\n \"title\": \"Best Practice\",\n \"body\": \"Call the `bluesnap.embeddedCheckoutSetup` function when creating the token at the start of the page.\\nThen call the `bluesnap.embeddedCheckoutOpen` function ***only*** when the shopper clicks **BUY**.\"\n}\n[/block]\nThe `bluesnap.embeddedCheckoutSetup` function has two arguments (`jsonData` and `callbackFunction`):\n\n* `callbackFunction`: This argument is a callback function that is called immediately after the shopper clicks the last button (\"BUY\"). \n\n* `jsonData`: This JSON object lets you customize your form. It uses the following settings:\n[block:parameters]\n{\n \"data\": {\n \"h-0\": \"Parameter\",\n \"h-1\": \"Required/Optional\",\n \"h-2\": \"Description\",\n \"h-3\": \"Type/Possible Values\",\n \"0-0\": \"`token`\",\n \"3-0\": \"`billingDetails`\",\n \"9-0\": \"`language`\",\n \"10-0\": \"`shopperData`\",\n \"0-1\": \"Required\",\n \"3-1\": \"Optional\",\n \"9-1\": \"Optional\",\n \"10-1\": \"Optional\",\n \"0-2\": \"Token created by the API service\",\n \"3-2\": \"Determines whether the billing details display (uses **true **or **false**):\\n\\n* If **true**, the form includes the inputted billing details: Country, State, City, Address\\n* If **false**, the form does not include the inputted billing details\\n\\n**Note:** The default is **false**.\",\n \"9-2\": \"Embedded Payment Form's locale\\n\\n**Note:** See [Available languages](#section-available-languages) for more information. The default language is English (\\\"EN\\\").\",\n \"10-2\": \"Represents the shopper's information and automatically fills in the following Embedded Checkout Form's fields:\\n\\n* email\\n* firstname\\n* lastname\\n* zip\\n* country\\n* state\\n* city\\n* address\",\n \"1-0\": \"`3DS`\",\n \"1-1\": \"Optional\",\n \"1-2\": \"Determines whether to apply 3DS integration. \\n\\n**Note:** The default is **false**.\",\n \"2-0\": \"`amount`\",\n \"2-1\": \"Optional\",\n \"2-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-0\": \"`buttonLabel`\",\n \"4-1\": \"Optional\",\n \"4-2\": \"Text that displays in the dark blue button at the bottom of the form\\n\\n**Note:** The default is \\\"Pay.\\\"\",\n \"5-0\": \"`currency`\",\n \"5-1\": \"Optional\",\n \"5-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 \"6-0\": \"`description`\",\n \"6-1\": \"Optional\",\n \"6-2\": \"Description that displays below the title\",\n \"8-0\": \"`includeEmail`\",\n \"8-1\": \"Optional\",\n \"8-2\": \"Determines whether the email address displays (uses **true **or **false**):\\n\\n* If **true**, the form includes the email address\\n* If **false**, the form does not include the email address\\n\\n**Note:** The default is **false**.\",\n \"7-0\": \"`img`\",\n \"7-1\": \"Optional\",\n \"7-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 \"11-0\": \"`title`\",\n \"11-1\": \"Optional\",\n \"11-2\": \"Title on the checkout form\"\n },\n \"cols\": 3,\n \"rows\": 12\n}\n[/block]\n\n[block:callout]\n{\n \"type\": \"info\",\n \"title\": \"Note:\",\n \"body\": \"You cannot change the font in the Embedded Payment Form.\"\n}\n[/block]\n\nAt this stage, you should use the `HOSTEDFIELDTOKENID` to complete the transaction via an API call from your server transaction API. The callback function’s argument contains the result of the checkout form in the following format:\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"{\\n \\\"status\\\": \\\"STATUS\\\",\\n \\\"code\\\": \\\"CODE\\\",\\n \\\"info\\\": { // if an error or warning occurred\\n \\\"errors\\\": [\\\"some_error\\\"],\\n \\\"warnings\\\": [\\\"some_warning\\\"]\\n },\\n \\\"cardData\\\": {\\n \\\"binCategory\\\": \\\"CONSUMER\\\",\\n \\\"ccBin\\\": \\\"400000\\\",\\n \\\"cardSubType\\\": \\\"CREDIT\\\",\\n \\\"ccType\\\": \\\"VISA\\\",\\n \\\"isRegulatedCard\\\": \\\"N\\\",\\n \\\"issuingCountry\\\": \\\"us\\\",\\n \\\"last4Digits\\\": \\\"1000\\\"\\n },\\n \\\"threeDSecure\\\": { // if 3DS parameter was true\\n \\\"authResult\\\": \\\"AUTH_STATUS\\\", // example: \\\"AUTHENTICATION_SUCCEEDED\\\" \\n \\\"threeDSecureReferenceId\\\": \\\"REFERENCE_ID\\\"\\n }\\n}\",\n \"language\": \"json\"\n }\n ]\n}\n[/block]\nThe parameters are:\n[block:parameters]\n{\n \"data\": {\n \"h-0\": \"Parameter\",\n \"h-1\": \"Description\",\n \"h-2\": \"\",\n \"0-0\": \"`status`\",\n \"0-2\": \"\",\n \"0-1\": \"Result of the call. Possible values:\\n* `Success`\\n* `Invalid Data` — There is a problem with the jsonData provided from the merchant.\\n* `Inner Error` — There is a problem with the `eCheckout`.\\n* `Server Error` — The BlueSnap server encountered a problem.\",\n \"1-0\": \"`code`\",\n \"1-1\": \"Result code. Possible values:\\n* `1` — For `Success`\\n* `10` — For `Invalid Data` that prevents the \\n eCheckout form from opening. For example: Invalid currency.\\n* `15` — For `Invalid Data` that does not prevent the eCheckout form from opening. For example: If the provided language is invalid, the form opens in English.\\n* `20` – For `Inner Error`\\n* Other codes are the standard HTTP codes.\",\n \"2-0\": \"`info`\",\n \"2-1\": \"Provides the following information:\\n* `errors`\\n* `warnings`\\n\\n**Note**: The `info` is not included if there are no errors or warnings.\",\n \"3-0\": \"`cardData`\",\n \"3-1\": \"Provides the following information:\\n* `ccBin`\\n* `binCategory`\\n* `cardSubType`\\n* `ccType`\\n* `isRegulatedCard`\\n* `issuingCountry`\",\n \"4-0\": \"`threeDSecure`\",\n \"4-1\": \"Provides the following information:\\n* `authResult`\\n* `threeDSecureReferenceId`\"\n },\n \"cols\": 2,\n \"rows\": 5\n}\n[/block]\n##4. Close the BlueSnap Embedded Payment Form\n\nThe Embedded Payment Form does not close until `bluesnap.embeddedCheckoutClose();` is executed. We recommend calling this function only once the transaction finishes. Refer to the example below.\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"var jsonData = {\\n token: \\\"HOSTEDFIELDTOKENID\\\"\\n title: \\\"BlueSnap Example\\\"\\n description: \\\"This is description for example...\\\"\\n img: \\\"/developers/571747/download.jpg\\\"\\n amount: \\\"150\\\"\\n currency: \\\"EUR\\\"\\n buttonLabel: \\\"Click to buy\\\"\\n billingDetails: true\\n includeEmail: true\\n language: \\\"EN\\\"\\n shopperData: {\\n firstname: \\\"Someone\\\",\\n lastname: \\\"JustExample\\\"\\n }\\n}\\n\\nbluesnap.embeddedCheckoutSetup(jsonData, function (eCheckoutResult) {\\n if (eCheckoutResult.code == 1) { // On Success\\n // Your code here...\\n // 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 if(eCheckoutResult.info){\\n var errors = eCheckoutResult.info.errors; // will be undefined if no errors have occurred\\n var warnings = eCheckoutResult.info.warnings; // will be undefined if no warnings have occurred\\n }\\n } \\n bluesnap.embeddedCheckoutClose();\\n}\\n\",\n \"language\": \"json\",\n \"name\": \"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 Payment Form.\n[block:parameters]\n{\n \"data\": {\n \"h-0\": \"Code\",\n \"h-1\": \"Language\",\n \"0-0\": \"BG\",\n \"1-0\": \"CZ\",\n \"2-0\": \"DA\",\n \"0-1\": \"Bulgarian\",\n \"1-1\": \"Czech\",\n \"2-1\": \"Danish\",\n \"3-0\": \"DE\",\n \"5-0\": \"ES\",\n \"6-0\": \"FI\",\n \"3-1\": \"German\",\n \"5-1\": \"Spanish\",\n \"6-1\": \"Finnish\",\n \"7-0\": \"FR\",\n \"8-0\": \"HU\",\n \"9-0\": \"IT\",\n \"8-1\": \"Hungarian\",\n \"7-1\": \"French\",\n \"9-1\": \"Italian\",\n \"10-0\": \"JA\",\n \"11-0\": \"KR\",\n \"12-0\": \"LT\",\n \"10-1\": \"Japanese\",\n \"11-1\": \"Korean\",\n \"12-1\": \"Lithuanian\",\n \"13-0\": \"NL\",\n \"14-0\": \"NO\",\n \"15-0\": \"PL\",\n \"13-1\": \"Dutch\",\n \"14-1\": \"Norwegian\",\n \"15-1\": \"Polish\",\n \"16-0\": \"PT\",\n \"17-0\": \"RU\",\n \"18-0\": \"SK\",\n \"16-1\": \"Portuguese\",\n \"17-1\": \"Russian\",\n \"18-1\": \"Slovak\",\n \"19-0\": \"SL\",\n \"20-0\": \"SQ\",\n \"21-0\": \"SR\",\n \"19-1\": \"Slovanian\",\n \"20-1\": \"Albanian\",\n \"21-1\": \"Serbian\",\n \"22-0\": \"SV\",\n \"23-0\": \"TR\",\n \"24-0\": \"ZH\",\n \"22-1\": \"Swedish\",\n \"23-1\": \"Turkish\",\n \"24-1\": \"Chinese\",\n \"4-0\": \"EN\",\n \"4-1\": \"English (default language)\"\n },\n \"cols\": 2,\n \"rows\": 25\n}\n[/block]\nYou can set the language using the `language` parameter; for example, `language: \"EN\"` sets the language as English in the following JSON example.\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"var jsonData = {\\n token: \\\"HOSTEDFIELDTOKENID\\\"\\n title: \\\"BlueSnap Example\\\"\\n description: \\\"This is description for example...\\\"\\n img: \\\"/developers/571747/download.jpg\\\"\\n amount: \\\"150\\\"\\n currency: \\\"EUR\\\"\\n buttonLabel: \\\"Click to buy\\\"\\n billingDetails: true\\n includeEmail: true\\n language: \\\"EN\\\"\\n shopperData: {\\n firstname: \\\"Someone\\\",\\n lastname: \\\"JustExample\\\"\\n }\\n}\",\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#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](https://developers.bluesnap.com/docs/api-credentials).\n\nFor more information, refer to [Completing Tokenized Payments](https://developers.bluesnap.com/v8976-Basics/docs/completing-tokenized-payments).\n\n<br />\n<a class=\"btn btn-primary\" href=\"#\" role=\"button\">Back to Top</a>\n\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\": \"We recommend an image of no larger than 50px by 50px to properly display inside the square. If your image is larger, we automatically resize it to fit.\\n\\nIf you need further assistance, 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>","updates":[],"order":2,"isReference":false,"hidden":true,"sync_unique":"","link_url":"","link_external":false,"_id":"6197defc41c8040154bcbaad","project":"57336fd5a6a9c40e00e13a0b","version":{"version":"8976-Tools","version_clean":"8976.0.0-Tools","codename":"3.40 Release","is_stable":false,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["6197defc41c8040154bcba61","6197defc41c8040154bcba62","6197defc41c8040154bcba63","6197defc41c8040154bcba64","6197defc41c8040154bcba65","6197defc41c8040154bcba66","6197defc41c8040154bcba67","6197defc41c8040154bcba68","6197defc41c8040154bcba69","6197defc41c8040154bcba6a","6197defc41c8040154bcba6b","6197defc41c8040154bcba6c","5b34c737e0dca2000311de6a","60957f4cce403c0045a031ef","6197defc41c8040154bcba6d","6197defc41c8040154bcba6e","6197defc41c8040154bcba6f","6197defc41c8040154bcba70","6197defc41c8040154bcba71","6197defc41c8040154bcba72"],"_id":"6197defc41c8040154bcbaea","project":"57336fd5a6a9c40e00e13a0b","__v":0,"forked_from":"60957f4cce403c0045a03255","createdAt":"2018-04-23T15:17:35.680Z","releaseDate":"2018-04-23T15:17:35.680Z"},"category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"Convert Currency","slug":"convert-currency","order":6,"from_sync":false,"reference":true,"_id":"6197defc41c8040154bcba6a","version":"6197defc41c8040154bcbaea","project":"57336fd5a6a9c40e00e13a0b","createdAt":"2016-05-17T12:18:56.501Z","__v":0},"user":"5beb1b96bc2003003ecd645e","createdAt":"2019-07-10T14:01:04.808Z","__v":0,"parentDoc":null}
Embedded Checkout
If you want the control and flexibility offered with BlueSnap's Payment API and easily add an optimized checkout flow, Embedded Checkout is your ideal solution. Using Embedded Checkout provides your shoppers with a simple checkout flow using BlueSnap-supported currencies and in multiple languages.
This solution uses a secure form called the "Embedded Payment Form," to capture and tokenize your shopper's payment data, so sensitive data never touches your environment. When your shopper completes their purchase, you include the token in the API request to complete the transaction.
Benefits
- Easy to implement
- Securely capture payment information without your shoppers ever leaving your site
- Shoppers can checkout on any device
- Supports returning shoppers with auto-fill fields
- Merchants can configure the number of data fields, colors, logo, and description to display on the form
- Supports all BlueSnap-supported currencies
- Supports multiple languages
- Simplest level of PCI compliance: SAQ-A
Setup
For setup and usage instructions, see:
Implementing Embedded Checkout
Using the Embedded Checkout token to process payments
Implementing Embedded Checkout
Follow the steps below to implement Embedded Checkout.
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 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.
1. Obtain the Embedded Checkout token for the session
Obtain the Embedded Checkout token by sending a server-to-server POST request to:
BLUESNAPDOMAINPATH/services/2/payment-fields-tokens
The response provides the token in the location header. For example:
BLUESNAPDOMAINPATH/services/2/payment-fields-tokens/HOSTEDFIELDTOKENID
Notes:
- The Embedded Checkout token expires after 60 minutes.
- You 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.
<script type="text/javascript" src="BLUESNAPDOMAINPATH/web-sdk/4/bluesnap.js"></script>
3. Open the Embedded Checkout Form
After the script finishes loading, you can open the Embedded Payment Form. This is done in two steps:
- Set up the checkout form by calling:
bluesnap.embeddedCheckoutSetup(jsonData, callbackFunction)
- Open the checkout form by calling:
bluesnap.embeddedCheckoutOpen()
Using two separate functions lets you set up the form and it's required resources before opening the form so the shopper does not have to wait for the form to open.
Notes
- If the
bluesnap.embeddedCheckoutOpen
function is called before thebluesnap.embeddedCheckoutSetup
function, an error is displayed. - If the
bluesnap.embeddedCheckoutOpen
function is called before thebluesnap.embeddedCheckoutSetup
function has completed, the shopper sees a loading indicator.
Best Practice
Call the bluesnap.embeddedCheckoutSetup
function when creating the token at the start of the page.
Then call the bluesnap.embeddedCheckoutOpen
function only when the shopper clicks BUY.
The bluesnap.embeddedCheckoutSetup
function has two arguments (jsonData
and callbackFunction
):
callbackFunction
: This argument is a callback function that is called immediately after the shopper clicks the last button ("BUY").jsonData
: This JSON object lets you customize your form. It uses the following settings:
token
Required
Token created by the API service
3DS
Optional
Determines whether to apply 3DS integration.
Note: The default is false.
amount
Optional
Amount that displays in the dark blue button at the bottom of the form
Note: This value must be a number.
billingDetails
Optional
Determines whether the billing details display (uses true or false):
- If true, the form includes the inputted billing details: Country, State, City, Address
- If false, the form does not include the inputted billing details
Note: The default is false.
buttonLabel
Optional
Text that displays in the dark blue button at the bottom of the form
Note: The default is "Pay."
currency
Optional
Currency symbol that displays in the dark blue button at the bottom of the form
Note: The default currency is U.S. dollars ("USD").
description
Optional
Description that displays below the title
img
Optional
Relative URL path to the image uploaded to BlueSnap
Note: See Uploading an image for more information.
includeEmail
Optional
Determines whether the email address displays (uses true or false):
- If true, the form includes the email address
- If false, the form does not include the email address
Note: The default is false.
language
Optional
Embedded Payment Form's locale
Note: See Available languages for more information. The default language is English ("EN").
shopperData
Optional
Represents the shopper's information and automatically fills in the following Embedded Checkout Form's fields:
- firstname
- lastname
- zip
- country
- state
- city
- address
title
Optional
Title on the checkout form
Note:
You cannot change the font in the Embedded Payment Form.
At this stage, you should use the HOSTEDFIELDTOKENID
to complete the transaction via an API call from your server transaction API. The callback function’s argument contains the result of the checkout form in the following format:
{
"status": "STATUS",
"code": "CODE",
"info": { // if an error or warning occurred
"errors": ["some_error"],
"warnings": ["some_warning"]
},
"cardData": {
"binCategory": "CONSUMER",
"ccBin": "400000",
"cardSubType": "CREDIT",
"ccType": "VISA",
"isRegulatedCard": "N",
"issuingCountry": "us",
"last4Digits": "1000"
},
"threeDSecure": { // if 3DS parameter was true
"authResult": "AUTH_STATUS", // example: "AUTHENTICATION_SUCCEEDED"
"threeDSecureReferenceId": "REFERENCE_ID"
}
}
The parameters are:
status
Result of the call. Possible values:
Success
Invalid Data
— There is a problem with the jsonData provided from the merchant.Inner Error
— There is a problem with theeCheckout
.Server Error
— The BlueSnap server encountered a problem.
code
Result code. Possible values:
1
— ForSuccess
10
— ForInvalid Data
that prevents the
eCheckout form from opening. For example: Invalid currency.15
— ForInvalid Data
that does not prevent the eCheckout form from opening. For example: If the provided language is invalid, the form opens in English.20
– ForInner Error
- Other codes are the standard HTTP codes.
info
Provides the following information:
errors
warnings
Note: The info
is not included if there are no errors or warnings.
cardData
Provides the following information:
ccBin
binCategory
cardSubType
ccType
isRegulatedCard
issuingCountry
threeDSecure
Provides the following information:
authResult
threeDSecureReferenceId
var jsonData = {
token: "HOSTEDFIELDTOKENID"
title: "BlueSnap Example"
description: "This is description for example..."
img: "/developers/571747/download.jpg"
amount: "150"
currency: "EUR"
buttonLabel: "Click to buy"
billingDetails: true
includeEmail: true
language: "EN"
shopperData: {
firstname: "Someone",
lastname: "JustExample"
}
}
bluesnap.embeddedCheckoutSetup(jsonData, function (eCheckoutResult) {
if (eCheckoutResult.code == 1) { // On Success
// Your code here...
// This where you need to process the payment via an API request from your server
}
else { // On Error (code=10 - invalid jsonData, any other codes are errors, on error
if(eCheckoutResult.info){
var errors = eCheckoutResult.info.errors; // will be undefined if no errors have occurred
var warnings = eCheckoutResult.info.warnings; // will be undefined if no warnings have occurred
}
}
bluesnap.embeddedCheckoutClose();
}
BG
Bulgarian
CZ
Czech
DA
Danish
DE
German
EN
English (default language)
ES
Spanish
FI
Finnish
FR
French
HU
Hungarian
IT
Italian
JA
Japanese
KR
Korean
LT
Lithuanian
NL
Dutch
NO
Norwegian
PL
Polish
PT
Portuguese
RU
Russian
SK
Slovak
SL
Slovanian
SQ
Albanian
SR
Serbian
SV
Swedish
TR
Turkish
ZH
Chinese
You can set the language using the language
parameter; for example, language: "EN"
sets the language as English in the following JSON example.
var jsonData = {
token: "HOSTEDFIELDTOKENID"
title: "BlueSnap Example"
description: "This is description for example..."
img: "/developers/571747/download.jpg"
amount: "150"
currency: "EUR"
buttonLabel: "Click to buy"
billingDetails: true
includeEmail: true
language: "EN"
shopperData: {
firstname: "Someone",
lastname: "JustExample"
}
}
Using the Embedded Checkout token to process payments
Once 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.
For more information, refer to Completing Tokenized Payments.
Uploading an image
- In the BlueSnap Merchant Console, go to Settings > General Settings.
- Under Account Settings, click My Images.
- Click Choose File, select the image you want to upload, then click Upload.
- As mentioned above, after the file uploads you should provide the relative path of the file; for example:
- File URL:
https://sandbox.bluesnap.com/developers/571747/download.jpg
- Relative Path:
/developers/571747/download.jpg
- File URL:
Note:
We recommend an image of no larger than 50px by 50px to properly display inside the square. If your image is larger, we automatically resize it to fit.
If you need further assistance, contact Merchant Support.