Guides
Status PageDashboardBook a Demo

Secure Fields

Suggest Edits

Secure Fields creates a seamless and secure checkout flow on your website or app. With a set of prebuilt UI components available for Web, Android, and iOS, Secure Fields simplifies collecting and tokenizing card payment details.

Use the following buttons to check the Secure Fields SDK characteristics or to explore the integration guides.

Payment security

Payment workflow

Enroll a credit card while paying

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: You can customize the Secure Fields design to maintain your brand's look and feel.
  • Tailored Checkout Experience: Choose which fields to show customers, highlighting incomplete fields and errors.

Payment Security

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

  • PCI Compliance: Secure Fields follow PCI security standards.
  • Tokenization: Payment details are tokenized, so sensitive data never touches your server.
  • Data Protection: Prevents data breaches and ensures customer payment information security.

Payment workflow

The following steps describe the integration process of 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

First, create a customer. After you create a customer, you can associate payment methods to their account. You can skip this step if you already have a customer ID received from a previous customer creation.

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

Step 2: Create a checkout session

Next, create a checkout session. You have to create a new checkout session for every new payment. This session provides access to all available payment methods (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, you have to initialize the Secure Fields SDK to get a One-Time Token before creating the payment.

To initialize Yuno's Secure Fields SDK, you have to provide your API credentials and the checkout_session. Follow these steps to complete the process:

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

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, informing 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 is up-to-date with payment progress and status. Since the event notifications trigger automatically, your system won't need to perform recurrent requests to Yuno.

Enroll a credit card while paying

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

  • Set vault_on_sucess = true when using the Create Payment endpoint. You will receive the vaulted_token that corresponds to the card used by the customer payer 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 in 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 4 months ago