{"_id":"59bc55d72b480b0010010ca2","category":{"_id":"59bc55d72b480b0010010c95","version":"59bc55d72b480b0010010c92","project":"57336fd5a6a9c40e00e13a0b","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-08-10T18:38:10.362Z","from_sync":false,"order":2,"slug":"mobile-sdk","title":"Mobile"},"project":"57336fd5a6a9c40e00e13a0b","parentDoc":null,"user":"560d5913af97231900938124","version":{"_id":"59bc55d72b480b0010010c92","project":"57336fd5a6a9c40e00e13a0b","__v":2,"createdAt":"2017-09-15T22:36:07.078Z","releaseDate":"2017-09-15T22:36:07.078Z","categories":["59bc55d72b480b0010010c93","59bc55d72b480b0010010c94","59bc55d72b480b0010010c95","59bc55d72b480b0010010c96","59bc55d72b480b0010010c97","59bc55d72b480b0010010c98","59bc55d72b480b0010010c99","59cd3e7c210d1900326834b1"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"3.22.2 Release","version_clean":"8976.0.0-Basics","version":"8976-Basics"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-02-23T16:15:52.396Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"Understanding how your checkout design performs across devices is essential to maximizing conversions. A  checkout process designed for a desktop might not be compatible with a mobile device - and vice versa.   To combat this issue, BlueSnap offers responsive checkout options to work seamlessly with our API's and BuyNow Hosted Pages. Learn how to leverage our tools to design the ideal, responsive checkout.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"API checkout design\"\n}\n[/block]\nOur [Hosted Payment Fields](/v4.0/docs/hosted-payment-fields) are built on our API's to give you a simple, secure strategy for capturing sensitive payment data, while keeping the shopper's experience local to your site. A localized UX minimizes checkout friction, especially on small mobile screens, because shoppers are never redirected to an external site or finding themselves navigating between browser tabs. Hosted Payment Fields are easy to embed and give you great flexibility in developing the look and feel of your checkout form, while limiting your PCI burden to SAQ A. \n\n:fa-arrow-circle-right: Check out the video below for a detailed overview.\n:fa-arrow-circle-right: To get started building, click [here](doc:build-a-form).\n<br />\n[block:embed]\n{\n  \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fg6gOcTvXvBo%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dg6gOcTvXvBo&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fg6gOcTvXvBo%2Fhqdefault.jpg&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=youtube\\\" width=\\\"854\\\" height=\\\"480\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n  \"url\": \"https://www.youtube.com/watch?v=g6gOcTvXvBo\",\n  \"title\": \"Using Hosted Payment Fields with BlueSnap's API\",\n  \"favicon\": \"https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico\",\n  \"image\": \"https://i.ytimg.com/vi/g6gOcTvXvBo/hqdefault.jpg\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"BuyNow Hosted Pages checkout design\"\n}\n[/block]\nOur BuyNow Hosted Pages allow you to tweak your checkout approach through both mobile and desktop skin customization options, as well as the option to embed the checkout form in an iFrame for a localized shopping experience. Since your checkout form is hosted on BlueSnap, we take care of detecting the shopper's device type and location to display the appropriate form and payment methods, while you sit back and enjoy the lowest PCI compliance of SAQ A.\n\n:fa-arrow-circle-right: To learn more about BuyNow Hosted Pages, click [here](https://support.bluesnap.com/docs/which-bluesnap-solution-do-i-need#section-mobile-capabilities). \n:fa-arrow-circle-right: To learn how to customize checkout page skins, click [here](https://support.bluesnap.com/docs/creating-checkout-page#section-2-customize-your-checkout-page-skins). \n<br />\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/36f71dd-BN_Skins.PNG\",\n        \"BN Skins.PNG\",\n        637,\n        292,\n        \"#f0f0ef\"\n      ],\n      \"caption\": \"In the Merchant Console, you can apply your customized skins to desktop and mobile devices.\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Prevent fraud across devices\"\n}\n[/block]\nDesign your checkout to fight fraud on any device. [Device Data Collector](/docs/fraud-prevention#section-device-data-checks) is a JavaScript element embedded into the checkout form that collects shopper device data, such as browser settings, cache IDs, and operating system details, to track activity from these devices. These data elements allow BlueSnap to provide you with out-of-the-box fraud protection and reporting insights.\n\n###How to embed Device Data Collector \n→ If you're using one of our API's, simply embed the [JavaScript element](/docs/fraud-prevention#section-device-data-checks) in your checkout form. \n\n→ If you're using one of our BuyNow Hosted Pages, Device Data Collector is already built in for you. \n\n###Reporting & Insights \nWe've bundled key information from the data collected into our [Cleanse Reports](https://support.bluesnap.com/docs/reporting#section-cleanse-reports), so you can answer some key questions, such as: \n\n* What patterns and trends stem from purchases on mobile devices?\n* How many of the purchases on mobile devices resulted in refunds? \n* How does shopper geolocation relate to transaction history?\n\nMobile Clean Rate by Device Country is one of the four Cleanse Reports which allows you to identify how purchase behavior from mobile devices relates to transaction history.","excerpt":"","slug":"checkout-design","type":"basic","title":"Mobile Checkout Design"}

Mobile Checkout Design


Understanding how your checkout design performs across devices is essential to maximizing conversions. A checkout process designed for a desktop might not be compatible with a mobile device - and vice versa. To combat this issue, BlueSnap offers responsive checkout options to work seamlessly with our API's and BuyNow Hosted Pages. Learn how to leverage our tools to design the ideal, responsive checkout.

API checkout design

Our Hosted Payment Fields are built on our API's to give you a simple, secure strategy for capturing sensitive payment data, while keeping the shopper's experience local to your site. A localized UX minimizes checkout friction, especially on small mobile screens, because shoppers are never redirected to an external site or finding themselves navigating between browser tabs. Hosted Payment Fields are easy to embed and give you great flexibility in developing the look and feel of your checkout form, while limiting your PCI burden to SAQ A.

Check out the video below for a detailed overview.
To get started building, click here.

BuyNow Hosted Pages checkout design

Our BuyNow Hosted Pages allow you to tweak your checkout approach through both mobile and desktop skin customization options, as well as the option to embed the checkout form in an iFrame for a localized shopping experience. Since your checkout form is hosted on BlueSnap, we take care of detecting the shopper's device type and location to display the appropriate form and payment methods, while you sit back and enjoy the lowest PCI compliance of SAQ A.

To learn more about BuyNow Hosted Pages, click here.
To learn how to customize checkout page skins, click here.

In the Merchant Console, you can apply your customized skins to desktop and mobile devices.

Prevent fraud across devices

Design your checkout to fight fraud on any device. Device Data Collector is a JavaScript element embedded into the checkout form that collects shopper device data, such as browser settings, cache IDs, and operating system details, to track activity from these devices. These data elements allow BlueSnap to provide you with out-of-the-box fraud protection and reporting insights.

How to embed Device Data Collector

→ If you're using one of our API's, simply embed the JavaScript element in your checkout form.

→ If you're using one of our BuyNow Hosted Pages, Device Data Collector is already built in for you.

Reporting & Insights

We've bundled key information from the data collected into our Cleanse Reports, so you can answer some key questions, such as:

  • What patterns and trends stem from purchases on mobile devices?
  • How many of the purchases on mobile devices resulted in refunds?
  • How does shopper geolocation relate to transaction history?

Mobile Clean Rate by Device Country is one of the four Cleanse Reports which allows you to identify how purchase behavior from mobile devices relates to transaction history.