{"_id":"5bc48b4f9919d4000df5ea79","project":"57336fd5a6a9c40e00e13a0b","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"},"category":{"_id":"5bc48b4f9919d4000df5ea3f","project":"57336fd5a6a9c40e00e13a0b","version":"5bc48b4f9919d4000df5ea7b","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2018-09-20T16:04:26.117Z","from_sync":false,"order":5,"slug":"embedded-checkout","title":"Embedded Checkout"},"user":"5b155c2c3fbcd30003e76908","__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2018-09-20T16:05:43.118Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"If you want the control and flexibility offered with BlueSnap's [Payment API](doc:intro-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, available in 25 different languages, and supporting all BlueSnap currencies.\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’ll 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 [25 languages](http://developers.bluesnap.com/v8976-Tools/docs/embedded-checkout#section-available-languages) and 100 currencies\n* Simplest level of PCI compliance: SAQ-A\n\n##Setup\nFor setup and usage instructions, see:\n\n:fa-arrow-circle-right: &nbsp;  [Implementing Embedded Checkout](#section-implementing-embedded-checkout)\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;  [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 will provide 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 will expire after 60 minutes.\\n* 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}\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/source/web-sdk/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, open the Embedded Payment Form by calling the following function: \n\n`bluesnap.openCheckout(jsonData, callbackFunction(eCheckoutResult))`\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Note:\",\n  \"body\": \"If the `bluesnap.openCheckout(jsonData, callbackFunction(eCheckoutResult))` function is activated during the page load and *not *by pressing a button, activating the function must be called *after *the Document Object Model (DOM) is fully loaded.\"\n}\n[/block]\nThe `openCheckout` function has two arguments (`jsonData` and `callbackFunction`):\n\n* `jsonData`: This JSON object is used to customize your form using the settings available in the grid below:\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    \"1-1\": \"Optional\",\n    \"2-1\": \"Optional\",\n    \"3-1\": \"Optional\",\n    \"4-1\": \"Optional\",\n    \"5-1\": \"Optional\",\n    \"6-1\": \"Optional\",\n    \"7-1\": \"Optional\",\n    \"8-1\": \"Optional\",\n    \"9-1\": \"Optional\",\n    \"10-1\": \"Optional\",\n    \"0-2\": \"Token created by the API service\",\n    \"1-2\": \"Title on the checkout form\",\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    \"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    \"5-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    \"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-2\": \"Text that displays in the dark blue button at the bottom of the form\\n\\n**Note:** The default is \\\"Pay.\\\"\",\n    \"8-2\": \"Determines whether the billing details will display (uses **true **or **false**):\\n\\n* 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    \"8-3\": \"**true **or **false**\\n\",\n    \"9-2\": \"Determines whether the email address will display (uses **true **or **false**):\\n\\n* If **true**, the form will include the email address\\n* If **false**, the form will not include the email address\\n\\n**Note:** The default is **false**.\",\n    \"9-3\": \"**true **or **false**\",\n    \"10-2\": \"Represents the shopper's information and will automatically fill 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  },\n  \"cols\": 3,\n  \"rows\": 11\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* `callbackFunction`: This argument is a callback function, which is called immediately after the shopper clicks the last button (\"BUY\"). \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\\t“status”: // Success or Error\\n\\t“code”: // code=1 – success, code=10 – invalid jsonData, all other codes are errors\\n\\t“data”: // if present, this property contains the error description\\n}\\n\",\n      \"language\": \"json\"\n    }\n  ]\n}\n[/block]\n##4. Close the BlueSnap Embedded Payment Form\n\nThe Embedded Payment Form will not close until `bluesnap.closeCheckout();` is executed. We recommend calling this function once the transaction finishes (see example below).\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var jsonData = {\\n\\ttoken: \\\"HOSTEDFIELDTOKENID\\\"\\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\\nelse { // 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        }\",\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[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 `pfToken` property in the [Auth Only](https://developers.bluesnap.com/v8976-JSON/docs/auth-only) or [Auth Capture](https://developers.bluesnap.com/v8976-JSON/docs/auth-capture) API request.\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\\\"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 the 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#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 the image you use on the form should be no greater than 50px by 50px to properly display inside the square. If your image is larger, we will automatically resize it to fit properly.\\n\\nIf 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).","slug":"embedded-checkout","type":"basic","title":"Embedded Checkout"}

Embedded Checkout

Learn how to implement Embedded Checkout to capture credit card payments. If you still have questions after reading, check out the [FAQs](https://support.bluesnap.com/docs/merchant-faqs).

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, available in 25 different languages, and supporting all BlueSnap currencies.

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’ll 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 25 languages and 100 currencies
  • Simplest level of PCI compliance: SAQ-A

Setup

For setup and usage instructions, see:

  Implementing Embedded Checkout

  Available languages

  Using the Embedded Checkout token to process payments

  Uploading an image

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 will provide the token in the location header. For example:

BLUESNAPDOMAINPATH/services/2/payment-fields-tokens/HOSTEDFIELDTOKENID

Notes:

  • The Embedded Checkout token will expire after 60 minutes.
  • 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.

2. Add the BlueSnap JavaScript file to your checkout form

In your checkout form, call the BlueSnap Embedded Checkout JavaScript file by adding the following script:

<script type="text/javascript" src="BLUESNAPDOMAINPATH/source/web-sdk/bluesnap.js"></script>

3. Open the Embedded Checkout Form

After the script finishes loading, open the Embedded Payment Form by calling the following function:

bluesnap.openCheckout(jsonData, callbackFunction(eCheckoutResult))

Note:

If the bluesnap.openCheckout(jsonData, callbackFunction(eCheckoutResult)) function is activated during the page load and not by pressing a button, activating the function must be called after the Document Object Model (DOM) is fully loaded.

The openCheckout function has two arguments (jsonData and callbackFunction):

  • jsonData: This JSON object is used to customize your form using the settings available in the grid below:
Parameter Name
Required/Optional
Description

token

Required

Token created by the API service

title

Optional

Title on the checkout form

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.

amount

Optional

Amount that displays in the dark blue button at the bottom of the form

Note: This value must be a number.

language

Optional

Embedded Payment Form's locale

Note: See Available languages for more information. The default language is English ("EN").

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").

buttonLabel

Optional

Text that displays in the dark blue button at the bottom of the form

Note: The default is "Pay."

billingDetails

Optional

Determines whether the billing details will display (uses true or false):

  • If true, the form will include the inputted billing details: Country, State, City, Address
  • If false, the form will not include the inputted billing details

Note: The default is false.

includeEmail

Optional

Determines whether the email address will display (uses true or false):

  • If true, the form will include the email address
  • If false, the form will not include the email address

Note: The default is false.

shopperData

Optional

Represents the shopper's information and will automatically fill in the following Embedded Checkout Form's fields:

  • email
  • firstname
  • lastname
  • zip
  • country
  • state
  • city
  • address

Note:

You cannot change the font in the Embedded Payment Form.

  • callbackFunction: This argument is a callback function, which is called immediately after the shopper clicks the last button ("BUY").

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”: // Success or Error
	“code”: // code=1 – success, code=10 – invalid jsonData, all other codes are errors
	“data”: // if present, this property contains the error description
}

4. Close the BlueSnap Embedded Payment Form

The Embedded Payment Form will not close until bluesnap.closeCheckout(); is executed. We recommend calling this function once the transaction finishes (see example below).

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.openCheckout(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 
    eCheckoutResult.data will contain the error description)
     }
   bluesnap.closeCheckout();
        }



Back to Top

Available languages

The following languages are available for display in the Embedded Payment Form.

Code
Language

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"
         }
}



Back to Top

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.

Note:

The Embedded Checkout token can only be used once to process a transaction.

In the Payment API

To use the Embedded Checkout token to process a payment, send the pfToken property in the Auth Only or Auth Capture API request.

Example request:

curl -v -X POST https://sandbox.bluesnap.com/services/2/transactions \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-H 'Authorization: Basic Auth' \
-d '
{
	"cardTransactionType": "AUTH_CAPTURE",
	"softDescriptor": "Mobile SDK test",
	"amount": 25.00,
	"currency": "USD",
	"pfToken": "TOKEN_STRING"
}



Back to Top

Uploading an image

  1. In the BlueSnap Merchant Console, go to Settings > General Settings.
  2. Under Account Settings, click My Images.
  3. Click Choose File, select the image you want to upload, then click Upload.
  4. As mentioned above, after the file uploads you should provide the relative path of the file; for example:

Note:

We recommend the image you use on the form should be no greater than 50px by 50px to properly display inside the square. If your image is larger, we will automatically resize it to fit properly.

If you need further assistance, please contact Merchant Support.