Guides
Status PageDashboardBook a Demo

Secure Fields

Suggest Edits

Secure Fields creates a secure and seamless checkout flow on your website or app. With a set of prebuilt UI components available for Web, Android, and iOS, Secure Fields simplifies the collection and tokenization of card payment details. This SDK is designed specifically for card payments and provides a PCI-compliant way to securely collect and process card information.

Explore below the Secure Fields SDK characteristics or follow our step-by-step integration guides to get started.

Characteristics

The Secure Fields SDK has the following characteristics:

  • Prebuilt UI components: Use the prebuilt UI to collect card information.
  • Automatic formatting and validation: Fields format and validate card data.
  • Customizable UI: Customize the Secure Fields design to maintain your brand's look and feel.
  • Tailored checkout experience: Choose which fields to display to customers, highlighting incomplete fields and errors.

Payment security

The Secure Fields SDK enhances your checkout experience by simplifying payment collection and improving security with the following features:

  • PCI compliance: Secure Fields complies with PCI security standards.
  • Tokenization: Payment details are tokenized, ensuring sensitive data never touches your server.
  • Data protection: Secure payment information prevents data breaches and ensures customer security.

Payment workflow

The following steps describe the integration process for the Secure Fields SDK to perform payments:

Secure Fields only accepts card payments

The Secure Fields SDK is designed to acept payments using cards. If you need to perform a payment using another payment method or a previously saved card, you need to choose use another Yuno integration:

Step 1: Create a customer (Optional)

To begin, create a customer. After creating the customer, you can associate payment methods with their account. If you already have a customer id from a previous customer creation, you can skip this step.

Use the Create Customer endpoint to create new customers and get a customer id. This id will be used in the following steps.

The customer_session parameter is optional.

You can skip this step if you already have a customer id and plan to provide it directly when creating the payment. Alternatively, you may choose to omit this step entirely.

Omit customer session step

When you choose to not use a customer_session, the payment will be created without a customer id, leaving it empty when creating the payment. As a result, the process will not use any stored customer date, such as pre-filled form fields or saved payment details.

While skipping the customer session can simplify integration, it removes features designed to streamline the user experience, which can improve conversion rates by reducing friction during checkout.

Step 2: Create a checkout session

Next, create a checkout session. A new checkout session must be created for each new payment. This session provides access to all available payment methods (whether previously enrolled or not) for a specific customer.

Use the Create Checkout Session endpoint and provide the customer id to get a new checkout_session.

Step 3: Display payment methods

Query the available payment methods using the Retrieve Payment Methods endpoint using the checkout_session. Show these methods to the customer so they can select their preferred payment method to execute the payment.

Secure Fields only accepts card payments. Therefore, if your customer chooses a payment method other than a card, you need to use another Yuno integration:

You're responsible for displaying the payment methods and capturing the customer's selection when using the Secure Fields SDK.

Step 4: Implement the SDK and get a one-time token

After the customer selects the payment method, initialize the Secure Fields SDK to generate a one-time token before proceeding with the payment.

Follow these steps to initialize Yuno's Secure Fields SDK:

  1. Include the library in your project.
  2. Initialize the SDK with your public API key.
  3. Start the checkout process by calling yuno.secureFields() with your configuration.
  4. Mount the Secure Fields SDK using the secureFields.create() function to display the checkout to your customers.
  5. Generate a one-time token by using secureFields.generateToken() or secureFields.generateTokenWithInformation().

For more information on how to initiate Yuno's SDK, refer to the corresponding platform guide:

Web

Step 5: Create the payment

With the one-time token, create the payment. This process gathers all order details, including customer specifics, total amount, currency, products, and shipping details. Use the Create Payment endpoint, providing the one_time_token.

Payment status

Use the payment status and sub_status as your primary reference for the payment's state during integration. Since a payment might have multiple associated transactions, concentrating on the payment status/sub_status ensures you're informed of the most recent state. This provides a clear basis for decision-making regardless of the number of transactions involved.

To display the current payment status for your clients, you can use the mountStatusPayment function.

Step 6: Receive payment result through webhook

Yuno also recommends configuring Webhooks in your dashboard. Webhooks are the best way to ensure your system stays updated with payment progress and status. Since the event notifications are triggered automatically, your system won't need to perform repeated requests to Yuno.

Enroll a credit card while paying

With Secure Fields SDK, you can save credit/debit cards for future purchases within the same payment request without the enrollment integration. You can obtain the vaulted token in two ways:

  • Set vault_on_success = true when using the Create Payment endpoint. You will receive the vaulted_token that corresponds to the card used by the customer in the response.
  • Set saveCard = true when creating the one-time token in Step 4. The SDK will display a checkbox for users to select if they want to save the card for future purchases. If the user checks the box, you will receive the vaulted_token.

You should only use one option to enroll a card.

To enroll alternative payment methods, see the Lite SDK (Enrollment) page.

After enrolling a payment method, you can use the vaulted token to perform payments. To access information about the payment methods enrolled by each user, you can use one of the following endpoints:

Updated 8 days ago