This is the full developer documentation for SumUp Developer # Getting started Welcome to the SumUp Developer Portal. Here you’ll find everything you need to integrate SumUp’s payment solutions into your product. The documentation is divided into several sections: * **[Quick start](/docs/quickstart/)** – set up a test account and run through a first payment in minutes. * **[Online Payments](/docs/online-payments/)** – accept card payments on the web or in mobile apps. * **[Terminal Payments](/docs/terminal-payments/)** – use SumUp card readers to take in-person payments. * **[Tools](/docs/tools/)** – explore our APIs, SDKs, and other utilities. Create a [test account](https://me.sumup.com) to experiment safely and then dive into the section that best fits your use case. # Online Payments > Get started with accepting online payments. This guide walks you through creating a test profile and processing your first transaction in minutes. Online payments form an integral part of the SumUp product portfolio. SumUp supports online payments through multiple approaches to address every merchant use case. Use one of the out-of-the-box integrations or build a complete custom payments flow with the APIs. Your app communicates with SumUp via HTTP requests defined in the [API Reference](/api).​ ![Image showing integrations in SumUp](/img/guides/integrations.png) To get started, review the options SumUp offers for managing online payments. ## Getting a Test Account [Section titled “Getting a Test Account”](#getting-a-test-account) To test SumUp APIs and tools without involving real money, use a test account. Create one from your Dashboard account as follows. 1. Log in to your SumUp account. 2. Open the drop-down menu between **Support** and your user panel. 3. Select **Test Account**. Your merchant account is now in test mode. ![A screenshot of the account selection dropdown in the SumUp dashboard with the test account highlighted with red circle](/img/guides/test_acc.png) A screenshot of the account selection dropdown in the SumUp dashboard with the test account highlighted with red circle With your test account, begin making API calls with real data. Test accounts **do not** process transactions with real funds. The test account has a different ID and displays a clear warning. Requests with a value of 11 (in any currency) always fail by design, to test failed transaction scenarios. ![A screenshot of the dashboard with test account selected](/img/guides/test-account-warning.png) A screenshot of the dashboard with test account selected When finished experimenting with the test account, switch back to a regular account for business purposes. ## Authorization [Section titled “Authorization”](#authorization) All online payment products use SumUp APIs, which require authorization via an API key or access token. See the [Authorization Guide](/tools/authorization/authorization/) for details on available options.​ ## Checkout Products [Section titled “Checkout Products”](#checkout-products) SumUp provides a range of checkout products for seamless integration with your website. ### SumUp Card Widget [Section titled “SumUp Card Widget”](#sumup-card-widget) For a quick and seamless integration, we’ve developed a sleek payment widget. Incorporating the [SumUp Card Widget](/online-payments/checkouts/card-widget/) only requires adding a single script to your payment page! #### Alternative Payment Methods [Section titled “Alternative Payment Methods”](#alternative-payment-methods) The Card Widget supports [Alternative Payment Methods](/online-payments/apm) (APMs) to accept payments beyond traditional card schemes (Visa or Mastercard). Access APMs through the [SumUp Card Widget](/online-payments/checkouts/card-widget/) by contacting us via the [contact form](/contact). Available APMs include: * Apple Pay * Bancontact * Blik * Boleto * EPS * Google Pay * iDeal * MyBank * PIX * Przelewy24 * Satispay Tip The APMs you can offer depend on the location your business is registered and operates in. ### SumUp Swift Checkout SDK [Section titled “SumUp Swift Checkout SDK”](#sumup-swift-checkout-sdk) The Swift Checkout SDK provides a complete and fast checkout experience to your end users, collecting payment, address, and contact information with a click of a button. See the [Swift Checkout Documentation](/online-payments/checkouts/swift-checkout/) for details. ## Plugins [Section titled “Plugins”](#plugins) For Prestashop, Wix, or WooCommerce, use SumUp plugins for seamless payments. See the [Plugins section](/online-payments/plugins/) for details on each.​ ## Custom Integrations [Section titled “Custom Integrations”](#custom-integrations) ### SumUp APIs [Section titled “SumUp APIs”](#sumup-apis) SumUp provides REST APIs for services such as creating and executing payments, storing cards, and issuing refunds. SumUp APIs use API keys or [OAuth 2.0](http://tools.ietf.org/html/rfc6749) for authentication. They also support Cross-Origin Resource Sharing (CORS) for secure browser access from different domains. The API handles requests and responses primarily in JSON format, except when requests contain form-encoded data. Typically, requests consist of name/value pairs sent to SumUp API URI: `api.sumup.com`. ### Receiving Payments [Section titled “Receiving Payments”](#receiving-payments) To receive payments, [create a checkout](/online-payments/guides/single-payment/#1-create-a-checkout). Use merchant-direct payments or initiate on a merchant’s behalf based on your [authorization type](/tools/authorization/authorization/). Checkouts are created via server-to-server communication to keep access tokens and credentials secret and prevent changes to sensitive details like transaction amount or recipient. [Completing checkouts](/online-payments/guides/single-payment/#2-complete-a-checkout) via web browser or mobile app to avoid handling sensitive data like card details on your servers, eliminating PCI DSS compliance needs. Tip A checkout can be completed in a browser only from a domain that is present as an authorized JavaScript origin when [creating your client credentials](/tools/authorization/register-app/#3-create-oauth-client-credentials). SumUp offers the following checkout completion options: * You could build a [custom card form](/online-payments/guides/single-payment/#2-complete-a-checkout) that you must submit to the SumUp servers for processing * You could use the [SumUp Card Widget](/online-payments/checkouts/card-widget/) * You could process payments with [Alternative Payment Methods](/online-payments/apm), like Boleto, Bancontact & iDeal * You could process [recurring payments](/online-payments/guides/tokenization-with-payment-sdk) Successful checkout completion processes payment to the merchant’s SumUp account.​ ## Contact SumUp [Section titled “Contact SumUp”](#contact-sumup) Note Do you have specific questions? Check out our [help page](/help) for the most frequently asked questions or [contact us here](/contact). # 3-D Secure flow > Learn about 3DS flow, SCA requirements, and how to handle 3DS when processing payments. Caution Affects all electronic payments accepted by merchants operating within the European Union. SumUp supports 3-D Secure payments for added security in online transactions. EMVCo developed 3D Secure 2, a payment card authentication protocol that meets Strong Customer Authentication (SCA) requirements. It reduces fraud through additional layers such as biometrics. Note The final deadline for implementing the SCA requirements was 31 December 2020. [SCA (Strong Customer Authentication)](https://en.wikipedia.org/wiki/Strong_customer_authentication#cite_note-2) is an obligatory security measure, requiring two-factor authentication to verify consumer identity in payment transactions, using at least two independent, consumer-based factors: * Something the customer knows (e.g. Password, PIN) * Something the customer has (e.g. Phone, Token generator) * Something the customer is (e.g. Fingerprint, Face ID) Each of these elements must be independent, to ensure the security of others is not compromised in the event of a security breach. ## How It Works [Section titled “How It Works”](#how-it-works) Both the merchant profile and card issuer must support 3-D Secure. The flow adds a checkout step, dependent on the card scheme and issuing bank.​ ![Challenge screen](/img/guides/challenge_screen.png) ## Integration for Single Payments [Section titled “Integration for Single Payments”](#integration-for-single-payments) 1. Add the `redirect_url` parameter to your [checkout creation request](/api/checkouts/create). This URL receives the user after payment completion. 2. [Process the checkout](/api/checkouts/process) to get a `next_step` object with details for the required next action, allowing you to redirect the user to a required challenge screen. 3. Use the `next_step` content to redirect an end user to a challenge screen. The `next_step` object contains: | Parameter | Value | | -------------- | ----------------------------------------------------------------------------- | | `method` | `POST` | | `url` | `https://issuing-bank.com/acs?reqid=B69D8F090C031E959A3BB2C4D7DFE7F8F7C09B28` | | `redirect_url` | `https://mysite.com/completed_purchase` | | `mechanism` | `iframe` or `browser` | | `payload` | `object` | Caution The **payload** object can contain zero or more key-value pairs, defining the payload request to be made. All provided parameters must be passed when redirecting the user. Example `payload`: ```js 1 { 2 "arbitrary_param_name_1": "arbitrary_param_value_1", 3 "arbitrary_param_name_2": "arbitrary_param_value_2", 4 "arbitrary_param_name_3": "arbitrary_param_value_3", 5 "arbitrary_param_name_4": "arbitrary_param_value_4" 6 } ``` Example redirect via auto-submitting form: ```html 1
6 11 16 21 26
27 ``` The user reaches the issuer’s authentication screen for additional verification (e.g. a challenge token, SMS, or other data). After submitting, SumUp completes the payment and the user is redirected to the `redirect_url` appointed at the checkout creation, through a `GET` request with the corresponding `checkout_id` query parameter. To confirm a checkout’s status, make a `GET` request to the [retrieve a checkout](/api/checkouts/get) endpoint. # Alternative Payment Methods > Learn about supported alternative payment methods, activation steps, and integration options. Alternative Payment Methods (APMs) provide alternatives to standard card payment schemes. They offer familiar and frictionless payment experiences to your customers, while making you stand out from your competitors offering only traditional payment experiences. APMs have completely transformed how we pay online. For example, in the Netherlands more than half of the consumers use iDeal to pay online merchandise. Some types of APMs are prepaid cards, mobile payments, e-wallets, and “buy now, pay later” installment-based schemes. ## Supported Alternative Payment Methods [Section titled “Supported Alternative Payment Methods”](#supported-alternative-payment-methods) The APMs you can offer depend on the country your business is registered and operating in. Here’s a list of the currently available APMs at SumUp: | APM | Country | | | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - | | Apple Pay | Austria, Belgium, Brazil, Bulgaria, Chile, Croatia, Cyprus, Czech Republic, Denmark, Estonia, Finland, France, Germany, Greece, Hungary, Ireland, Italy, Latvia, Lithuania, Luxembourg, Malta, Netherlands, Norway, Poland, Portugal, Romania, Slovenia, Slovakia, Spain, Sweden, Switzerland, United Kingdom | | | Bancontact | Belgium | | | Blik | Poland | | | Boleto | Brazil | | | EPS | Austria | | | Google Pay | Austria, Belgium, Brazil, Bulgaria, Chile, Croatia, Cyprus, Czechia, Denmark, Estonia, Finland, France, Germany, Greece, Hungary, Ireland, Italy, Latvia, Lithuania, Luxembourg, Malta, Netherlands, Norway, Poland, Portugal, Romania, Slovenia, Slovakia, Spain, Sweden, Switzerland, United Kingdom | | | iDeal | Netherlands | | | MyBank | Greece, Italy, Spain | | | PIX | Brazil | | | Przelewy24 | Poland | | | Satispay | Italy | | ## Enabling Alternative Payment Methods [Section titled “Enabling Alternative Payment Methods”](#enabling-alternative-payment-methods) As a **sole trader** APMs are automatically enabled in your profile after completing the regular registration steps and performing a test transaction with one of our remote payment products, such as [Payment Links](https://sumup.co.uk/payment-links/), [Invoices](https://sumup.co.uk/invoices) and [Online Store](https://sumup.co.uk/online-store/). As with any other legal type, you must request the activation from our support team or via our [contact form here](/contact), providing us with your merchant ID (MXXXXX). Our team will onboard your profile and grant you access to the APMs applicable to your business location. Once your request is processed, APMs will instantly become available to you within [Payment Links](https://sumup.co.uk/payment-links/), [Invoices](https://sumup.co.uk/invoices) and [Online Store](https://sumup.co.uk/online-store/). Note At this time APMs are not available in our SumUp plugins. ## Integration [Section titled “Integration”](#integration) You can offer APMs through a number of approaches: * Through the [SumUp Payment Widget](/online-payments/checkouts/card-widget). To make APM payments successful, you must always set a `redirect_url` upon [checkout creation](/api/checkouts/create). Beyond that step, the SumUp Payment Widget will handle the rest. Note Please note that Google Pay [Terms of Service](https://payments.developers.google.com/terms/sellertos) are applied to all Google Pay transactions via SumUp Payment Widget * [API Integrations](/online-payments/apm/integration-guide/) * Through the [Swift Checkout SDK](/online-payments/checkouts/swift-checkout/) * Direct Integration: * [Apple Pay](/online-payments/apm/apple-pay) * [Google Pay](/online-payments/apm/google-pay) Caution [Apple Pay](/online-payments/apm/apple-pay) and [Google Pay](/online-payments/apm/google-pay) direct integrations require domain verification in order to be implemented successfully. # Apple Pay > Learn how to integrate Apple Pay, including prerequisites, domain validation, and API calls. In this guide, you will learn how to directly integrate Apple Pay with SumUp, so that you can retain your own UI/UX flow. Please note that you can also offer Apple Pay through our Payment Widget (see [Payment Widget documentation](/online-payments/checkouts/card-widget#alternative-payment-methods)). ## Prerequisites [Section titled “Prerequisites”](#prerequisites) * You have a merchant profile with [SumUp](https://me.sumup.com/login) and have already filled in your [profile details](https://me.sumup.com/account). * Get familiar with [Apple Pay on the Web guide](https://developer.apple.com/documentation/apple_pay_on_the_web). * Offering Apple Pay requires registering with Apple on all web domains that will expose an Apple Pay button (includes TLD and subdomains). This is a requirement for production AND test environments. * If you want to test payments without involving real funds, [create a test profile](/online-payments/#getting-a-test-account). * Complete the domain onboarding setup steps described in your Dashboard under **Settings** > **For developers** > **Payment wallets**. ![Screenshot of the dashboard Developer Settings, showing Payment wallets section that includes Apple Pay and Google Pay](/img/guides/find_payment_wallets.png) Screenshot of the dashboard Developer Settings, showing Payment wallets section that includes Apple Pay and Google Pay ## Accepting Apple Pay Payments with SumUp [Section titled “Accepting Apple Pay Payments with SumUp”](#accepting-apple-pay-payments-with-sumup) To begin your implementation, follow these steps: 1. [Create a checkout](https://developer.sumup.com/api/checkouts/create#create-a-checkout) 2. Create an [Apple Payment request](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest) ```js 1 const applePaymentRequest = { 2 currencyCode: "EUR", 3 countryCode: "DE", 4 merchantCapabilities: ["supports3DS"], 5 supportedNetworks: ["masterCard", "visa"], 6 total: { 7 label: "Demo", 8 amount: "0.00", 9 type: "final", 10 }, 11 }; ``` 3. Initiate an [Apple Pay session](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaysession/2320659-applepaysession) and call the [begin method](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaysession/1778001-begin) 4. Listen for the `onvalidatemerchant` callback and collect the `validateUrl` property. Create the following payload ```json 1 { 2 "target": "https://apple-pay-gateway-cert.apple.com/paymentservices/startSession", 3 "context": "your_domain_name" 4 } ``` and initiate a merchant session by calling ```http 1 PUT https://api.sumup.com/v0.1/checkouts/${checkoutId}/apple-pay-session ``` 5. The response from the previous step is needed to complete the merchant validation with the [`completeMerchantValidation`](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaysession/1778015-completemerchantvalidation/) method 6. Submitting the payment dialogue triggers the `onpaymentauthorized` callback, this is when you need to [process the checkout](https://developer.sumup.com/api/checkouts/process#process-a-checkout). The process checkout request body needs to include a `payment_type` of `apple_pay` and an `apple_pay` object, containing the response from step 7 ```json 1 { 2 "payment_type": "apple_pay", 3 "id": "9be2da07-a7bd-4877-bc0a-e16cd909a876", 4 "amount": 12, 5 "currency": "EUR", 6 "apple_pay": { 7 "token": { 8 "paymentData": { 9 "data": "si2xuT2ArQo689SfE-long-token", 10 "signature": "MIAGCSqGSIb3DQEHA-long-signature", 11 "header": { 12 "publicKeyHash": "PWfjDi3TSwgZ20TY/A7f3V6J/1rhHyRDCspbeljM0io=", 13 "ephemeralPublicKey": "MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEaBtz7UN2MNV0qInJVEEhXy10PU0KfO6KxFjXm93oKWL6lCsxZZGDl/EKioUHVSlKgpsKGin0xvgldfxeJVgy0g==", 14 "transactionId": "62e0568bc9258e9d0e059d745650fc8211d05ef7a7a1589a6411bf9b12cdfd04" 15 }, 16 "version": "EC_v1" 17 }, 18 "paymentMethod": { 19 "displayName": "MasterCard 8837", 20 "network": "MasterCard", 21 "type": "debit" 22 }, 23 "transactionIdentifier": "62E0568BC9258E9D0E059D745650FC8211D05EF7A7A1589A6411BF9B12CDFD04" 24 } 25 } 26 } ``` Tip Handling the responses from the API calls should be according to our public [API contract & guidelines](https://developer.sumup.com/api) # Google Pay > Learn how to integrate Google Pay, including domain registration, payment requests, and processing. In this guide, you will learn how to directly integrate Google Pay with SumUp. Please note that you can also offer Google Pay through our Payment Widget (see [Payment Widget documentation](/online-payments/checkouts/card-widget#alternative-payment-methods)). ## Prerequisites [Section titled “Prerequisites”](#prerequisites) * You have a merchant profile with [SumUp](https://me.sumup.com/login) and have already filled in your [profile details](https://me.sumup.com/account). * If you want to test payments without involving real funds, [create a test profile](/online-payments/#getting-a-test-account). * Review [Google Pay API terms of service](https://payments.developers.google.com/terms/sellertos). * Complete the domain onboarding setup steps described in your Dashboard under **Settings** > **For developers** > **Payment wallets**. You can read Google’s tutorial [Google Pay for Payments](https://developers.google.com/pay/api/web/guides/tutorial), which covers the requirements you’re expected to follow in order to successfully offer this payment method. ![Screenshot of the dashboard Developer Settings, showing Payment wallets section that includes Apple Pay and Google Pay](/img/guides/find_payment_wallets.png) Screenshot of the dashboard Developer Settings, showing Payment wallets section that includes Apple Pay and Google Pay ## Accepting Google Pay Payments with SumUp [Section titled “Accepting Google Pay Payments with SumUp”](#accepting-google-pay-payments-with-sumup) Considering you’ve adhered to the prerequisites, the following steps will enable you to begin accepting Google Pay payments through SumUp: 1. Create a base payment request object, containing: * `tokenizationSpecification` object with the following parameters: * `gateway`- always equal to “sumup” * `gatewayMerchantId`- your SumUp merchant code * [`merchantInfo` object](https://developers.google.com/pay/api/web/reference/request-objects#MerchantInfo) with the following keys: * `merchantId`- unique identifier provided to you by Google once you register your domain with them * `merchantName`- your merchant name ```js 1 const baseRequest = { 2 apiVersion: 2, 3 apiVersionMinor: 0, 4 merchantInfo: { 5 merchantId: '123456789123456789' 6 merchantName: 'Example Merchant', 7 }, 8 allowedPaymentMethods: [ 9 { 10 type: 'CARD', 11 parameters: { 12 allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'], 13 allowedCardNetworks: ['MASTERCARD', 'VISA'], 14 }, 15 tokenizationSpecification: { 16 type: 'PAYMENT_GATEWAY', 17 parameters: { 18 gateway: 'sumup', 19 gatewayMerchantId: 'exampleGatewayMerchantId', 20 }, 21 }, 22 }, 23 ], 24 }; ``` 2. Load the [Google Pay API JavaScript library](https://developers.google.com/pay/api/web/guides/tutorial#js-load) on the web page you will offer this payment method 3. Initialize a `PaymentsClient` object for the environment you are implementing. Two values are possible here: `TEST` for testing the integration and `PRODUCTION` for live payments. ```js 1 const paymentsClient = new google.payments.api.PaymentsClient({ 2 environment: 'PRODUCTION', 3 }); ``` 4. [Check readiness to pay](https://developers.google.com/pay/api/web/guides/tutorial#isreadytopay) with Google Pay API 5. [Launch the Google Pay button](https://developers.google.com/pay/api/web/guides/tutorial#add-button) 6. [Create a PaymentDataRequest](https://developers.google.com/pay/api/web/guides/tutorial#paymentdatarequest) using the `baseRequest` object and append the `transactionInfo` and `merchantInfo` objects. Your `PaymentDataRequest` should look like this: ```js 1 const paymentDataRequest = { 2 apiVersion: 2, 3 apiVersionMinor: 0, 4 merchantInfo: { 5 merchantName: 'Example Merchant', 6 }, 7 allowedPaymentMethods: [ 8 { 9 type: 'CARD', 10 parameters: { 11 allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'], 12 allowedCardNetworks: ['MASTERCARD', 'VISA'], 13 }, 14 tokenizationSpecification: { 15 type: 'PAYMENT_GATEWAY', 16 parameters: { 17 gateway: 'sumup', 18 gatewayMerchantId: 'exampleGatewayMerchantId', 19 }, 20 }, 21 merchantInfo: { 22 merchantId: 'your_merchant_id', 23 merchantName: 'your_merchant_name', 24 }, 25 transactionInfo: { 26 totalPriceStatus: 'FINAL', 27 totalPriceLabel: 'Total', 28 totalPrice: `${checkoutInfo.amount}`, 29 currencyCode: checkoutInfo.currency || 'EUR', 30 countryCode: 'DE', 31 }, 32 }, 33 ], 34 }; ``` 7. [Create a checkout](/api/checkouts/create) with SumUp 8. [Call the `loadPaymentData`](https://developers.google.com/pay/api/web/reference/client#loadPaymentData) method and pass it the `PaymentDataRequest` as an argument. This method will respond in a Promise, where if resolved you will receive a `PaymentData` object 9. [Process the checkout](/api/checkouts/process). The process checkout request body needs to include a `payment_type` of `google_pay` and a `google_pay` object, containing the response from the previous step ```json 1 { 2 "payment_type": "google_pay", 3 "id": "6te2da07-a7bd-4877-bc0a-e16cd909a876", 4 "amount": 12, 5 "currency": "EUR", 6 "google_pay": { 7 "apiVersionMinor": 0, 8 "apiVersion": 2, 9 "paymentMethodData": { 10 "description": "Visa •••• 1111", 11 "tokenizationData": { 12 "type": "PAYMENT_GATEWAY", 13 "token": "token-data" 14 }, 15 "type": "CARD", 16 "info": { 17 "cardNetwork": "VISA", 18 "cardDetails": "1111" 19 } 20 } 21 } 22 } ``` Note Handling the responses from the API calls should be according to our public [API contract & guidelines](/api) ## Troubleshooting [Section titled “Troubleshooting”](#troubleshooting) ### Screenshots for Google [Section titled “Screenshots for Google”](#screenshots-for-google) Google demands screenshots for the onboarding process, but you don’t have the integration ready yet? Simply add `#sumup-widget:google-pay-demo-mode` to your URL to render the Google Pay button for onboarding purposes. ### Testing Google Pay Integration Locally [Section titled “Testing Google Pay Integration Locally”](#testing-google-pay-integration-locally) This is not possible at the moment. You need to use a staging environment and validate the test domain in Google API console. ### Error Decrypting Google Pay Token [Section titled “Error Decrypting Google Pay Token”](#error-decrypting-google-pay-token) Internal Server Error with a message pointing to Google Pay token decryption error is most likely caused by the wrong `environment` value in the `paymentsClient` object. Make sure it’s set to `PRODUCTION` as below. ```js 1 const paymentsClient = new google.payments.api.PaymentsClient({ 2 environment: 'PRODUCTION', 3 }); ``` # Integration Guide > Learn about the request parameters and flows required to process alternative payment methods. ## Overview [Section titled “Overview”](#overview) Alternative Payment Methods (further referred to as APMs) are similar to normal checkouts. One key difference is that the customer needs to take an additional action in order to finalize the payment with most APMs. Before proceeding, read the [online payments guide](/online-payments/). ## Check Available APMs [Section titled “Check Available APMs”](#check-available-apms) Check which payment methods are available to your merchant profile. 1. [Create a checkout](/api/checkouts/create) and use the checkout `id` to fetch the list of available payment methods from the following endpoint `https://api.sumup.com/v0.1/checkouts/{checkout_id}/payment-methods`. Example response: ```json 1 { 2 "items": [ 3 { 4 "id": "card", 5 "name": "Credit Card" 6 }, 7 { 8 "id": "blik", 9 "name": "Blik" 10 }, 11 { 12 "id": "apple_pay", 13 "name": "Apple Pay" 14 } 15 ] 16 } ``` Note that this object might change between checkouts as APMs are not offered for all currencies and amounts, and we are continuously introducing new APMs for you to offer. We recommend handling the returned payment methods as an allowlist for this checkout, and then picking all the payment methods you want to offer. Do **not** simply display all methods returned if your integration doesn’t support them. The customer chooses one of the payment methods from the returned values, sent as part of the process checkout request under `payment_type`. The currently available payment method ids are: `card`, `ideal`, `bancontact`, `boleto`, `eps`, `mybank`, `satispay`, `blik`, `p24`, `pix`, `qr_code_pix`, `apple_pay`, `paypal`, `google_pay`. *name* is just for display purposes. APMs differ from the behavior of cards. There are two possible flows, which we call `artifacts` or `redirect instructions`, explained in more detail below. APMs also require different input parameters obtained from the customer, as listed below: | Payment method name | Parameters | Flow | | ------------------- | --------------------------------------------------- | -------- | | bancontact | First name, Last name, Country | Redirect | | blik | First name, Last name, Country, Email | Redirect | | boleto | First name, Last name, Country, Email, Address, CPF | Artifact | | eps | First name, Last name, Country, Email | Redirect | | ideal | First name, Last name, Country, Email | Redirect | | myBank | First name, Last name, Country, Email | Redirect | | p24 | First name, Last name, Country, Email | Redirect | | satispay | First name, Last name, Country, Email | Redirect | | pix | | Artifact | | qr\_code\_pix | | Artifact | Example payload: ```json 1 { 2 "payment_type": "#Payment method name", 3 "personal_details": { 4 "email": "#Email", 5 "first_name:": "#First Name", 6 "last_name": "#Last Name", 7 "tax_id": "#CPF", 8 "address": { 9 "country": "#Country", 10 "city": "#Address", 11 "line1": "#Address", 12 "postal_code": "#Address", 13 "state": "#Address" 14 } 15 } 16 } ``` ### Process Checkout Using Redirect Flow [Section titled “Process Checkout Using Redirect Flow”](#process-checkout-using-redirect-flow) In the Redirect Flow, when the checkout is processed, you receive the `"status": "pending"` parameter and the `next_step` parameter, which means an additional action is required to process the payment.Example response: ```json 1 { 2 ... 3 "status": "pending", 4 "next_step": { 5 "url": "https://apm-redirect-link", 6 "method": "POST", 7 "payload": { 8 "....": "..." 9 } 10 }, 11 ... 12 } ``` Most of the time, this is a simple redirect to a 3rd party page, like Blik, where the customer can pay. But, as shown above, POST requests are also possible. For all calls, ensure that the payload is included, and the appropriate method is used. Once the customer completes the necessary actions on the page, they are redirected to the `redirect_url` specified under the [create checkout request](/api/checkouts/create). Now you can retrieve the final status via a [GET checkout request](/api/checkouts/get/). ### Process Checkout Using Payment Method Artifacts Flow [Section titled “Process Checkout Using Payment Method Artifacts Flow”](#process-checkout-using-payment-method-artifacts-flow) Payment method artifacts are images, PDFs etc. which the customer gets in order to pay. Currently, we have 3 payment methods which have artifacts: `boleto`, `pix` and `qr_code_pix`. Example requests for each: **boleto:** ```json 1 { 2 "boleto": { 3 "barcode": "23790001246004987209031123456704579990000010000", 4 "url": "https://api.sumup.com/v0.1/checkouts/19c11c6c-be1d-4dd6-b718-2798878117cb/boletos/1044833949", 5 "valid_until": "2022-02-01T17:57:10.442+00:00", 6 "artefacts": [ 7 { 8 "name": "invoice", 9 "content_type": "application/pdf", 10 "location": "https://homolog.meiosdepagamentobradesco.com.br/apiboleto/Bradesco?token=bWJvYXpkc1hXRzdhRVkyUUFGZUV4T25NYjBVVEZrNG93Y3RKLzM4cTh5dWdDWEh5dDQyTXN6ZHl5NFdjaHBkZg..", 11 "created_at": "2022-01-21T17:57:10.443+00:00" 12 }, 13 { 14 "name": "code", 15 "content_type": "text/plain", 16 "location": "https://api.sumup.com/v0.1/artefacts/5266b29e-625b-43c0-a74a-8985ea3acd8a/content", 17 "content": "23790001246004987209031123456704579990000010000", 18 "created_at": "2022-01-21T17:57:10.445+00:00" 19 } 20 ] 21 } 22 } ``` **pix:** ```json 1 { 2 "pix": { 3 "artefacts": [ 4 { 5 "name": "barcode", 6 "content_type": "image/jpeg", 7 "location": "https://api.sumup.com/v0.1/artefacts/ee69508f-1b16-4ead-8416-8d2085933e6f/content", 8 "created_at": "2021-10-12T22:06:46.327+00:00" 9 }, 10 { 11 "name": "code", 12 "content_type": "text/plain", 13 "location": "https://api.sumup.com/v0.1/artefacts/1e1e5130-17d1-495a-8e36-2a50d40dacde/content", 14 "content": "00020126580014br.gov.bcb.pix0136a4fac492-d03b-45a8-bd43-c3f23d4bac68520400005303986540520.005802BR5916Priscila Manhaes6009Sao Paulo62290525SUMUP202110122206453822986304A61E", 15 "created_at": "2021-10-12T22:06:46.326+00:00" 16 } 17 ] 18 } 19 } ``` **qr\_code\_pix:** ```json 1 { 2 "qr_code_pix": { 3 "artefacts": [ 4 { 5 "name": "barcode", 6 "content_type": "image/jpeg", 7 "location": "https://api.sam-app.ro/v0.1/artefacts/ee69508f-1b16-4ead-8416-8d2085933e6f/content", 8 "created_at": "2021-10-12T22:06:46.327+00:00" 9 }, 10 { 11 "name": "code", 12 "content_type": "text/plain", 13 "location": "https://localhost:3000/v0.1/artefacts/1e1e5130-17d1-495a-8e36-2a50d40dacde/content", 14 "content": "00020126580014br.gov.bcb.pix0136a4fac492-d03b-45a8-bd43-c3f23d4bac68520400005303986540520.005802BR5916Priscila Manhaes6009Sao Paulo62290525SUMUP202110122206453822986304A61E", 15 "created_at": "2021-10-12T22:06:46.326+00:00" 16 } 17 ] 18 } 19 } ``` The major difference between `qr_code_pix` and `pix` is that `pix` is paid directly into the merchant’s SumUp bank account if they have one. `qr_code_pix` is paid out with the normal payout process and incurs a fee. For all artifact payments, you need to provide the customer with the artifact and wait for the checkout to eventually complete. Once the user has paid, you can retrieve the final status via the [GET checkout request](/api/checkouts/get/). # Online Payments SDKs > Overview of the available SumUp SDKs for online payments. SumUp provides the following Online Payment SDKs: * [Server-side SDKs](/tools/sdks/) - Node.js, Go, Python, PHP, and Rust clients for the SumUp API * [React Native SDK](/online-payments/checkouts/react-native-sdk) - provides a payment sheet that is displayed on top of your app * [Swift Checkout SDK](/online-payments/checkouts/swift-checkout) - fast online checkout experience for Apple Pay and Google Pay # Payment Widget > Explore the SumUp Payment Widget, including mounting and configuration for your site. The Payment Widget, available to all SumUp merchants, simplifies website checkouts, handling PCI and PSD2 compliance with customization options. It collects card and alternative payment method details. For card payments, it dynamically recognizes the brand and shows the respective brand icon. Using the widget is really easy! A secure HTTPS connection is used to submit the payment information. We recommend to use HTTPS for the payment page as well, to avoid browser warnings on content being served through non-secure web pages, and ensure uninterrupted experience. ## Prerequisites [Section titled “Prerequisites”](#prerequisites) Payment Widget requires only the ability to create online checkouts via [SumUp checkout API](/api/checkouts/create), authorized by API key or access token (see the [Authorization Guide](/tools/authorization/authorization/) for details).​ ## Compliance [Section titled “Compliance”](#compliance) ### Payment Card Industry [Section titled “Payment Card Industry”](#payment-card-industry) The Payment Widget ensures PCI compliance for your business. You do not need to worry about storing or sending sensitive information, such as card details, to SumUp servers. ### Payment Services Directive 2 [Section titled “Payment Services Directive 2”](#payment-services-directive-2) Strong Customer Authentication (SCA) under Payment Services Directive 2 (PSD2) requires two-factor authentication for European online payments. The widget supports 3D Secure, with bank fallback to 3D Secure 1 in case the customer’s bank doesn’t support 3DS 2, adding security layers like bank redirects, SMS codes, or app confirmation. Regardless of the 3DS version used, the customer is provided with a seamless checkout experience. ## Integration [Section titled “Integration”](#integration) 1. In order to integrate the Payment Widget on your website, include the `sdk.js` script on your payment page. ```js 1 ``` 2. Once the script is loaded, you have access to a global variable `SumUpCard`, with a `mount` method which renders the available payment methods. 3. [Create a checkout](/api/checkouts/create) and copy the returned `id`. 4. Pass the returned `id` from the checkout response to the widget component. ```html 1
2 6 ``` The Payment Widget makes a request to execute the checkout and after the request is completed, you get a response based on the callback function configured. As a result of successful integration, you can see the following component: You can experience the payment widget's functionality by using the interactive demo below (no real charges will occur) ## Configurations [Section titled “Configurations”](#configurations) The Payment Widget allows you to customize certain properties on the card display, as listed below. If you wish to override the default settings, add your own configuration property-value pairs to the `SumUpCard.mount` method. ```js 1 SumUpCard.mount({ 2 checkoutId: "...", 3 // 'config-name': 'config-value' 4 }); ``` | Property Name | Description | Value | Default Value | Required | | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | -------- | | checkoutId | The unique ID you receive once you [create a checkout](/online-payments/guides/single-payment/#1-create-a-checkout). | `string` | *no default value* | yes | | onResponse | The callback function that will be called when you receive a response from the payment form. The first parameter is one of the following:- `sent` - the form is sent to the server for processing. The second parameter contains information about the last four digits of the card’s number and the card’s scheme. - `invalid` - trying to submit the form but there are validation errors. - `auth-screen` - the user is prompt to authenticate the payment. - `error` - the server responded with error. The second parameter gives more information about the error. - `success` - successful result returned by the checkout endpoint **which does not always mean the transaction was successful**. We recommend verifying the [checkout status](/api/checkouts/get) on your server. The second parameter contains the response from the [endpoint](/api/checkouts/process). - `fail` - failed result returned by the checkout endpoint, can occur when the user cancels the payment form or the session has timed out. | `function` | `null` | no | | onLoad | The callback function that will be called when the card widget is loaded. | `function` | `null` | no | | onPaymentMethodsLoad | The callback is called when the payment methods are loaded for the given `checkoutId`. Usually used for when the host page needs to change depending on the payment methods available. Payment methods can be filtered in order to limit those shown by the widget. `return` the list of payment methods for the widget to render as an *Array of Strings*. E.g. to show only Boleto, when available: `() => ['boleto']`; | `function` | `null` | no | | onChangeInstallments\* | The callback function that will be called when the user changes the dropdown for installments. The first and only parameter will be the number of selected installments. (`showInstallments` must be enabled). | `function` | `null` | no | | showSubmitButton | Displays or hides the form’s submit button. | `boolean` | `true` | no | | showFooter | Displays or hides “Powered by SumUp” label. | `boolean` | `true` | no | | showInstallments\* | Displays or hides a dropdown for choosing installments. Once enabled this overrides any value of the configuration `installments` and will not display `amount` on the submit button. | `boolean` | `false` | no | | showZipCode\*\* | Displays or hides ZIP code input field. It is mandatory for merchant users from USA. | `boolean` | `false` | no | | showEmail | Displays or hides email input field. At some time in the future it’ll be a mandatory field for every integrator because of the [SCA](https://en.wikipedia.org/wiki/Strong_customer_authentication). | `boolean` | `false` | no | | email | Alternative way (to `showEmail`) to pass user’s email if for example you know it from a previous step in your application. This configuration doesn’t display additional input fields. If for some reason both `showEmail` and `email` are passed the `email` will have no effect over the displayed input field. | `string` | `null` | no | | installments\* | The number of installments with which the transaction should be processed. | `number` \[1 .. 12] | `null` | no | | maxInstallments\* | The maximum amount of installments in the selector displayed by the widget. | `number` \[1 .. 12] | `12` | no | | id | `id` of the element that you wish to render the card widget in. *Example:* `
` | `string` | `"sumup-card"` | no | | donateSubmitButton | Changes the text of the submit button to “Donate”. | `boolean` | `false` | no | | amount | The `amount` you want to be displayed on the submit button. *Requires* `currency` *and* `locale` *to take effect.* | `string` | `null` | no | | currency | The `currency` for the `amount` you want to be displayed on the submit button. | One of: `"EUR"`, `"BGN"`, `"BRL"`, `"CHF"`, `"CZK"`, `"DKK"`, `"GBP"`, `"HUF"`, `"NOK"`, `"PLN"`, `"SEK"`, `"USD"` | `null` | no | | locale | Translates all texts into the given locale. Also specifies the formatting of the `amount` and `currency`. | One of: `"bg-BG"`, `"cs-CZ"`, `"da-DK"`, `"de-AT"`, `"de-CH"`, `"de-DE"`, `"de-LU"`, `"el-CY"`, `"el-GR"`, `"en-GB"`, `"en-IE"`, `"en-MT"`, `"en-US"`, `"es-CL"`, `"es-ES"`, `"et-EE"`, `"fi-FI"`, `"fr-BE"`, `"fr-CH"`, `"fr-FR"`, `"fr-LU"`, `"hu-HU"`, `"it-CH"`, `"it-IT"`, `"lt-LT"`, `"lv-LV"`, `"nb-NO"`, `"nl-BE"`, `"nl-NL"`, `"pt-BR"`, `"pt-PT"`, `"pl-PL"`, `"sk-SK"`, `"sl-SI"`, `"sv-SE"` | `"en-GB"` | no | | country | Sets the country where the user account is from. | One of: `"AT"`, `"BE"`, `"BG"`, `"BR"`, `"CH"`, `"CL"`, `"CO"`, `"CY"`, `"CZ"`, `"DE"`, `"DK"`, `"EE"`, `"ES"`, `"FI"`, `"FR"`, `"GB"`, `"GR"`, `"HR"`, `"HU"`, `"IE"`, `"IT"`, `"LT"`, `"LU"`, `"LV"`, `"MT"`, `"NL"`, `"NO"`, `"PL"`, `"PT"`, `"RO"`, `"SE"`, `"SI"`, `"SK"`, `"US"` | `null` | no | | googlePay | Required for accepting payments with the widget via Google Pay: - **`merchantId`** is a value provided by Google [after registration](https://developers.google.com/pay/api/web/guides/setup#registration). (not to be confused with your SumUp `merchantCode`) - **`merchantName`** is visible to the customer on the Google Pay payment flow.For more details check [Google Pay **`merchantInfo`** documentation](https://developers.google.com/pay/api/web/reference/request-objects#MerchantInfo). | `{merchantId: string, merchantName: string}` | `null` | no | *\* Installments are available only to merchant users in Brazil.*\ *\*\* ZIP code is required only for merchant users in the USA.* ## Methods [Section titled “Methods”](#methods) | Name | Description | Parameters | Return Type | | ------- | ----------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `mount` | Initializes and renders the payment form. | JSON object with a [configuration](#configurations). | Returns object that contains three methods: `submit`, `unmount` and `update`.- `submit()` method will submit the form. - `unmount()` method will destroy the card. - `update({})` method will dynamically change some configurations, it accepts one argument which has to be an object with at least one of the following configuration keys: `checkoutId`, `email`, `amount`, `currency` or `installments`. | ## Alternative Payment Methods [Section titled “Alternative Payment Methods”](#alternative-payment-methods) Depending on the country a merchant is registered in, [Alternative Payment Methods (APMs)](/online-payments/apm) are available for accepting payments from your customers. Please note, the `show*` configuration properties from the [widget configurations](#configurations) do not apply to APMs. The APMs will only render fields applicable to the respective payment method. You can begin offering APMs to your customers, once you are onboarded as a merchant. Request assistance with getting onboarded for APMs through our [contact form](/contact). Note Installments are not applicable to Alternative Payment Methods. ## Custom Styling [Section titled “Custom Styling”](#custom-styling) Custom styling to most of the SumUp Payment Widget elements is enabled by the `data-sumup-id` attribute. To get all elements, query the DOM with `document.querySelectorAll('[data-sumup-id]')`. Here’s an example of updating styles for one of the elements: ```css 1 [data-sumup-id="widget__container"] { 2 color: red; 3 line-height: 18px; 4 } ``` You can also style child elements to those with the `data-sumup-id`, by chaining their tag or other uniquely identifiable attribute. Elements like Payment Selector have some additional items you can query to extend your customizations. To style a specific Payment Selector, you need to appoint the `data-sumup-item=${payment.id}`. ```css 1 [data-sumup-id="payment_option"][data-sumup-item="blik"] { 2 display: none; 3 } ``` ## Using Your Own Submit Button [Section titled “Using Your Own Submit Button”](#using-your-own-submit-button) If you need to use your own submit button, you can achieve this by following the example below: ```html 1 2 ``` ## Handling Strict Content Security Policies [Section titled “Handling Strict Content Security Policies”](#handling-strict-content-security-policies) Pages with strict [Content Security Policies](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (CSP) may experience issues with styles or images when rendering the SumUp Payment Widget. This section contains the necessary adjustments to render the Payment Widget properly. To confirm your issue is related to CSP, check your browser’s console for a similar error message: ```text 1 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' \*\*\* Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution. ``` ### Required Configurations [Section titled “Required Configurations”](#required-configurations) In order to properly render the card widget with CSP in place, you must whitelist the following URLs for your application: | Content Type | URL | | ------------ | ------------------------------------- | | SDK & API | ’https\://\*.sumup.com’ | | Images | ’data:’, ‘’ | Additionally, `nonce` is required to make inline styles work on your host page. For more information view [the CSP docs](https://content-security-policy.com/nonce/). Example implementation with `nonce`: ```js 1 const express = require("express"); 2 const app = express(); 3 const http = require("http"); 4 const server = http.createServer(app); 5 6 const port = process.env.PORT || 4000; 7 8 const crypto = require("crypto"); 9 10 // Resources 11 const apisToConnect = ["https://gateway.sumup.com", "https://api.sumup.com"]; 12 13 const imagesResources = [ 14 "data:", // inline icons 15 "https://static.sumup.com", 16 // For generated barcodes 17 18 "https://api.sumup.com", 19 ]; 20 21 const scriptsResources = [ 22 "https://gateway.sumup.com", 23 // PLUS nonce-$HASH 24 ]; 25 26 const stylesResources = [ 27 // nonce-$HASH 28 ]; 29 30 const framesResources = ["https://gateway.sumup.com"]; 31 32 app.get("/", (req, res) => { 33 const nonce = crypto.randomBytes(16).toString("base64"); 34 res.setHeader( 35 "Content-Security-Policy", 36 `default-src 'self';` + 37 ` connect-src 'self' ${apisToConnect.join(" ")};` + 38 ` img-src 'self' ${imagesResources.join(" ")};` + 39 ` script-src 'self' ${scriptsResources.join(" ")} 'nonce-${nonce}';` + 40 ` style-src 'self' 'nonce-${nonce}';` + 41 ` frame-src 'self' ${framesResources.join(" ")};`, 42 ); 43 44 // 45 res.send(` 46

Test CSP

47
Test using generated nonce: ${nonce}
48
49 59 See without nonce 60
Footer
61 `); 62 }); 63 64 server.listen(port, () => { 65 console.log("listening on:", port); 66 }); ``` If you continue to experience issues with rendering the Payment Widget, reach out to our support through this [contact form](/contact). # Hosted Checkout > Use the Swift Checkout SDK to add card payment, Apple Pay, and Google Pay to your website with minimal setup. ## About Hosted Checkout [Section titled “About Hosted Checkout”](#about-hosted-checkout) Hosted Checkout offers a complete checkout flow for payment collection. It’s called “Hosted Checkout”, because SumUp renders and hosts the entire checkout UI, which your customers can access via URL returned by our checkout API. The hosted checkout page aims at ease of integration, requiring little to no code, offering a summary of the checkout details, and providing a complete flow for handling payment collection. It covers the payment flows all the way to the success page. Hosted Checkouts is available to all SumUp merchants and getting started with it is really easy! ![A screenshot of the Hosted Checkout form showing available payment options, including Google Pay, Apple Pay, and card payment](/img/guides/hosted_checkout_landing_page.png) A screenshot of the Hosted Checkout form showing available payment options, including Google Pay, Apple Pay, and card payment ## Prerequisites [Section titled “Prerequisites”](#prerequisites) Hosted Checkout requires only the ability to create online checkouts via [SumUp checkout API](/api/checkouts/create), authorized by API key or access token (see the [Authorization Guide](/tools/authorization/authorization/) for details).​ ## Accessing Hosted Checkout [Section titled “Accessing Hosted Checkout”](#accessing-hosted-checkout) You can opt-in for Hosted Checkout by providing an extra parameter to your POST request payload. The parameter name should be `hosted_checkout` and the value should be an object with the following structure: `{ "enabled": true }`. The response includes the Hosted Checkout properties: * `hosted_checkout` is returned as provided in the request * `hosted_checkout_url` provides the URL of the page handling the payment flow 1. Send a request with the `"hosted_checkout": { "enabled": true }` in the body. ```bash 1 curl -X POST https://api.sumup.com/v0.1/checkouts \ 2 -H "Content-Type: application/json" \ 3 -H "Authorization: Bearer $SUMUP_API_KEY" \ 4 -d '{ 5 "amount": 12.00, 6 "checkout_reference": "b50pr914-6k0e-3091-a592-890010285b3d", 7 "currency": "EUR", 8 "description": "A sample checkout", 9 "merchant_code": "MCXXXXXX", 10 "hosted_checkout": { "enabled": true } 11 }' ``` The response body contains the `hosted_checkout` and `hosted_checkout_url` parameters: ```json 1 { 2 "amount": 12, 3 "checkout_reference": "b50pr914-6k0e-3091-a592-890010285b3d", 4 "checkout_type": "checkout", 5 "currency": "EUR", 6 "date":"2000-01-01T12:49:24.899+00:00", 7 "description": "A sample checkout", 8 "id": "64553e20-3f0e-49e4-8af3-fd0eca86ce91", 9 "merchant_code": "MCXXXXXX", 10 "merchant_country": "DE", 11 "merchant_name": "Sample Shop", 12 "purpose": "CHECKOUT", 13 "status": "PENDING", 14 "transactions": [], 15 "hosted_checkout": { "enabled": true }, 16 "hosted_checkout_url": "https://checkout.sumup.com/pay/8f9316a3-cda9-42a9-9771-54d534315676" 17 } ``` 2. Use the payment page provided under `hosted_checkout_url` to complete the flow you’re building. See [Configuring Hosted Checkout](#configuring-hosted-checkout) for more information. Note Each Hosted Checkout session lasts for 30 minutes, after which end users are presented with a “not found” page upon access attempts. ## Configuring Hosted Checkout [Section titled “Configuring Hosted Checkout”](#configuring-hosted-checkout) ### Redirecting Users After Successful Payment [Section titled “Redirecting Users After Successful Payment”](#redirecting-users-after-successful-payment) Hosted Checkout is meant to suit a broad range of use cases, from a simple self-contained payment solution, to a checkout step integrated within a longer flow. When creating a checkout, simply provide a `redirect_url` parameter to include a redirect link in the success page, under a “Redirect to merchant website” button. Note Differently from what’s stated in our [API docs](/api/checkouts/create), the absence of this parameter does not affect the availability of payment methods in Hosted Checkouts. ## Hosted Checkout Status Pages [Section titled “Hosted Checkout Status Pages”](#hosted-checkout-status-pages) With Hosted Checkout, your payment flow is covered from start to finish. All successful payments are presented with a success page, informing users of the completed payment. Hosted Checkout also accommodates other payment outcomes: * Successful payments. This page includes the “Back to merchant website” button only if the `redirect_url` was provided at checkout creation. ![A screenshot of the Hosted Checkout payment successful confirmation form]() A screenshot of the Hosted Checkout payment successful confirmation form * Failed payments include express checkout payment methods for a quick retry. ![A screenshot of the Hosted Checkout payment failed form]() A screenshot of the Hosted Checkout payment failed form * Expired session page is shown for all unpaid checkouts after session expiration or checkout expiration (currently 30 minutes). ![A screenshot of the Hosted Checkout session expiry form]() A screenshot of the Hosted Checkout session expiry form * Not found page is shown for all URLs that do not match any existing session in our system. ![A screenshot of the Hosted Checkout page not found form]() A screenshot of the Hosted Checkout page not found form Caution Hosted Checkout is currently in beta and may be subject to change. We’re currently working on new features, so keep an eye on this page as we continue to add features in the upcoming months! Feel free to reach out with feature requests via our [contact form](/contact). # React Native Payment SDK > Step-by-step guide for integrating the SumUp React Native Payment SDK, from prerequisites to checkout creation and mounting the payment sheet. SumUp’s React Native Payment SDK provides a payment sheet that is displayed on top of your app. It collects user payment details, confirms a payment, and saves a card for future usage. Moreover, it allows a user to use Apple Pay or Google Pay to process payments. ![Challenge screen](/img/guides/react_native_payment_sheet.png) Challenge screen ## Integration [Section titled “Integration”](#integration) ### Before You Begin [Section titled “Before You Begin”](#before-you-begin) Here are the things that you need in order to complete the steps in this guide: * You have a merchant account with [SumUp](https://me.sumup.com/login) and have already filled in your [account details](https://me.sumup.com/account). * For a **test account** reach out to our support team through this [contact form](/contact). * You have [registered your client application](/tools/authorization/register-app/) with SumUp. * You have a valid access token obtained via the [Authorization code flow](/tools/authorization/authorization/#authorization-code-flow). * The restricted `payment_instruments` scope is enabled for your client application. If it isn’t enabled, [contact us](/contact) and request it. * Review how to create a single payment [here](https://developer.sumup.com/online-payments/guides/single-payment/#before-you-begin). ### Create a Checkout [Section titled “Create a Checkout”](#create-a-checkout) Initializing the SDK works by passing it a `checkout_id`. To [create a checkout](/api/checkouts/create) on your backend make the following request: * cURL ```bash 1 curl --request POST \ 2 --url https://api.sumup.com/v0.1/checkouts \ 3 --header "Authorization: Bearer $SUMUP_API_KEY" \ 4 --header 'Content-Type: application/json' \ 5 --data '{ 6 "checkout_reference": "44ea5096-b83f-46e1-9323-fe82a8cb7eb5", 7 "currency": "SEK", 8 "amount": 9.99, 9 "description": "Order #1234", 10 "merchant_code": "MXXXXXXX", 11 "return_url": "https://example.com", 12 "redirect_url": "https://sumup.com" 13 }' ``` * Node.js ```ts 1 const checkout = await client.checkouts.create({ 2 checkout_reference: "44ea5096-b83f-46e1-9323-fe82a8cb7eb5", 3 amount: 9.99, 4 currency: "SEK", 5 merchant_code: "MXXXXXXX", 6 description: "Order #1234", 7 return_url: "https://example.com", 8 redirect_url: "https://sumup.com", 9 }); ``` * .NET ```csharp 1 var checkout = await client.Checkouts.CreateAsync(new CheckoutCreateRequest 2 { 3 CheckoutReference = "44ea5096-b83f-46e1-9323-fe82a8cb7eb5", 4 Amount = 9.99f, 5 Currency = Currency.Sek, 6 MerchantCode = "MXXXXXXX", 7 Description = "Order #1234", 8 ReturnUrl = "https://example.com", 9 RedirectUrl = "https://sumup.com", 10 }); ``` * Java ```java 1 var checkout = client.checkouts().createCheckout( 2 CheckoutCreateRequest.builder() 3 .checkoutReference("44ea5096-b83f-46e1-9323-fe82a8cb7eb5") 4 .amount(9.99f) 5 .currency(Currency.SEK) 6 .merchantCode("MXXXXXXX") 7 .description("Order #1234") 8 .returnUrl("https://example.com") 9 .redirectUrl("https://sumup.com") 10 .build() 11 ); ``` * Go ```go 1 description := "Order #1234" 2 returnURL := "https://example.com" 3 redirectURL := "https://sumup.com" 4 5 checkout, err := client.Checkouts.Create(ctx, sumup.CreateCheckoutBody{ 6 CheckoutReference: "44ea5096-b83f-46e1-9323-fe82a8cb7eb5", 7 Amount: 9.99, 8 Currency: "SEK", 9 MerchantCode: "MXXXXXXX", 10 Description: &description, 11 ReturnUrl: &returnURL, 12 RedirectUrl: &redirectURL, 13 }) ``` * Python ```py 1 from sumup.checkouts.resource import CreateCheckoutBody 2 3 checkout = client.checkouts.create( 4 CreateCheckoutBody( 5 checkout_reference="44ea5096-b83f-46e1-9323-fe82a8cb7eb5", 6 amount=9.99, 7 currency="SEK", 8 merchant_code="MXXXXXXX", 9 description="Order #1234", 10 return_url="https://example.com", 11 redirect_url="https://sumup.com", 12 ) 13 ) ``` * Rust ```rust 1 let checkout = client 2 .checkouts() 3 .create(Some(sumup::resources::checkouts::CheckoutCreateRequest { 4 checkout_reference: "44ea5096-b83f-46e1-9323-fe82a8cb7eb5".into(), 5 amount: 9.99, 6 currency: sumup::resources::checkouts::Currency::SEK, 7 merchant_code: "MXXXXXXX".into(), 8 description: Some("Order #1234".into()), 9 return_url: Some("https://example.com".into()), 10 redirect_url: Some("https://sumup.com".into()), 11 customer_id: None, 12 purpose: None, 13 id: None, 14 status: None, 15 date: None, 16 valid_until: None, 17 transactions: None, 18 })) 19 .await?; ``` * PHP ```php 1 $payload = [ 2 'checkout_reference' => '44ea5096-b83f-46e1-9323-fe82a8cb7eb5', 3 'currency' => 'SEK', 4 'amount' => 9.99, 5 'description' => 'Order #1234', 6 'merchant_code' => 'MXXXXXXX', 7 'return_url' => 'https://example.com', 8 'redirect_url' => 'https://sumup.com', 9 ]; 10 11 $customService = $sumup->getCustomService(); 12 $response = $customService->request('POST', '/v0.1/checkouts', $payload); ``` The SDK will process the checkout once a customer provides payment details. If payment details aren’t passed an error will be received. ## Set up SDK [Section titled “Set up SDK”](#set-up-sdk) Install the npm module by one of the following commands: * npm ```bash 1 npm i sumup-react-native-alpha 2 npm i react-native-webview ``` * yarn ```bash 1 yarn add sumup-react-native-alpha 2 yarn add react-native-webview ``` You need to install `react-native-localization` to automatically detect the user system language. * npm ```bash 1 npm i react-native-localization ``` * yarn ```bash 1 yarn add react-native-localization ``` If you don’t need it, please provide the language field in the `initPaymentSheet` function. ```javascript 1 await initPaymentSheet({ 2 checkoutId, 3 language: 'en', 4 }); ``` Next, install the native modules. ```bash 1 cd ios 2 pod install ``` SDK should be initialized by wrapping your payment screen into SumUpProvider. This component requires an `apiKey` that can be created [here](/protected/api-keys/). ```javascript 1 import { SumUpProvider } from 'sumup-react-native-alpha'; 2 3 export default function App() { 4 return ( 5 6 7 8 ); 9 } ``` ## Provide Payment Details [Section titled “Provide Payment Details”](#provide-payment-details) Before showing the payment sheet, it needs to be initialized. Call `initPaymentSheet` with the parameters like in example below: ```js 1 import React, { useEffect } from "react"; 2 import { View, Alert } from "react-native"; 3 import { useSumUp } from "sumup-react-native-alpha"; 4 5 export default function MainScreen() { 6 const { initPaymentSheet } = useSumUp(); 7 8 const initSumUpPaymentSheet = async () => { 9 const { error } = await initPaymentSheet({ 10 checkoutId: "...", 11 customerId: "...", 12 language: "en", // en or sv are supported 13 }); 14 15 16 if (error) { 17 Alert.alert( 18 error.status, 19 error.status === "failure" ? error.message : undefined 20 ); 21 } else { 22 Alert.alert("Payment Sheet was configured"); 23 } 24 }; 25 26 useEffect(() => { 27 initSumUpPaymentSheet(); 28 }, []); 29 30 ... ``` **Required** fields for `initPaymentSheet`: * `checkoutId` - described in section [Create a checkout](/online-payments/checkouts/react-native-sdk/#create-a-checkout). *Optional*: * `customerId` - used for saving cards for future usage. * `language` - English and Sweden are supported (if undefined, react-native-localization will be used to check user device language). ## Show Payment Sheet [Section titled “Show Payment Sheet”](#show-payment-sheet) After initialization a payment sheet can be shown. When a user presses a button, you can show it by calling `presentPaymentSheet()`. After a user completes a payment, this function will return a callback. If any errors take place, the callback will contain an error field with the details. ```js 1 ... 2 3 const showPaymentSheet = async () => { 4 const { error } = await presentPaymentSheet(); 5 6 7 if (error) { 8 Alert.alert( 9 error.status, 10 error.status === "failure" ? error.message : undefined 11 ); 12 } else { 13 Alert.alert("Payment successfully was processed"); 14 } 15 }; 16 17 18 return ( 19 20