The Tokenization Form securely captures customer card details and generates a token for safe payment processing. By using this form, non-PCI compliant merchants can accept payments without directly handling sensitive credit card data, reducing risk and simplifying compliance requirements.

📘

If you're searching for documentation on older version of the Tokenization Form, please refer to our legacy section.

Tokenization Workflow

The following diagram illustrates the complete tokenization flow using the hosted form:

1. Customer clicks the payment button.
2. Merchant's website invokes the tokenization form from Bamboo.
3. Bamboo returns the hosted form to the browser.
4. The form is rendered on the page.
5. Customer enters card data.
6. Card data is securely sent to Bamboo.
7. Bamboo generates the token.
8. Token is returned to the merchant’s browser.
9. The merchant creates the purchase using the token.
10. Bamboo processes the payment and sends confirmation.
11. Customer receives confirmation.

Integrating the Hosted Tokenization Form

To integrate the Tokenization Form into your checkout flow, simply embed it in your web or mobile application. Once implemented, the form will handle all sensitive card data securely and return a token that you can use for payments through the Bamboo API.

Importing the JavaScript Library

To integrate the Tokenization Form into your website, it's necessary to include a script that points to the form's URL. This allows access to the BambooForm object containing the methods needed to render Bamboo forms.

Staging_

//STAGE - Test Environment:
<script src="https://capture.stage.bamboopayment.com/"
		integrity="sha256-MZTrPbIEEQfZsVKZ0X2W0WKWynw90m2ZnLsf+K4d4f8= sha384-lR7NrY3+mgbapfzO93PhsFYrm2qY2U9qDGSb5pvZnrrQ+UgcwIuX3AQPAt0GXhn/ sha512-dFeUYkspbL2fl9a7cKzz0GJK/inIXIxd687/jHFMVEIv+/QV9FfnWK+CqkS9Lyq2iucNRvAz11kxkhlr7x9OMg=="
		crossorigin="anonymous">
</script>

Production

//PRODUCTION:
<script src="https://capture.bamboopayment.com/"
		integrity="sha256-VjLXumZeKViFVhMpiaW5IUQZ213LOzPRw5DTde6AiVU= sha384-GRjWfO5d//CNj5CCFEo3xVfWn/rmZLZOvFkkdXsHE/PsECHSRWXDqjfJ930Bq4bM sha512-guivUBLq1cpFO5KnYnwIvM6UYAF6yA2rjLT0rBgniE+XZdgjN1//abizyKbyJ2y9j8MKmSJbKhLD3gmJVMh5ug=="
		crossorigin="anonymous"> 
</script>

Render the Hosted Form

Once the Script pointing to Bamboo forms is imported, you'll have access to the renderTokenizationForm method that renders the Tokenization Form in your application, allowing your users to securely enter their cards.

BambooForm.renderTokenizationForm(configuration);

Request Example

<script> 
BambooForm.renderTokenizationForm({
  containerId: 'MERCHANT_PAGE_CONTAINER_ID',
  metadata: {
    publicKey: 'MERCHANT_PUBLIC_KEY',
    targetCountryISO: 'UY',
    customer: {
      email: '[email protected]',
      cardHolderName: 'Juan Pérez'
    },
    locale: 'es',
    logoUrl: '<https://mieshop.com/logo.png>'
  },
  hooks: {
    onOperationSuccess: (token) => {
      console.log('Token received:', token);
    },
    onOperationError: (error) => {
      console.error('Error:', error);
    }
  }
});
</script>

Customize the Form

Customize your Tokenization Form | metadata object

You can customize the tokenization form with your logo and preferred language, besides pre-fill data already provided by your customer, or restrict the tokenization to specific cards.

Customer Information

Tokenization restricted to specific Cards

Handle customer interactions | hooks object

Successful tokenization | Token object

The token object is returned in the onOperationSuccess hook executed upon successful tokenization and contains the following parameters.

Response Example

{
  "TokenId": "OT__Vzt3fxGvyyTgbUbsPrMN__em6gAAHYAAA",
  "CardType": "CreditCard",
  "Installments": null,
  "AffinityGroup": null,
  "IdCommerceToken": 0,
  "Created": "2025-10-21T14:35:54.971",
  "Type": "OneTime",
  "Brand": "VISA",
  "Owner": "John Doe",
  "Last4": "0001",
  "Bin": "424242",
  "CardExpMonth": 12,
  "CardExpYear": 29,
  "IssuerBank": "Itaú",
  "Error": null
}

CVV Form

The CVV Form is specifically designed to capture the Card Verification Value (CVV) found on the back of the physical card. This form is used when it's necessary to validate a transaction with the CVV, generally in recurring payments or purchases where the card information has already been previously tokenized.

Typical use: When a customer has previously stored their credit card through the tokenization process but is asked to enter their CVV to validate or complete a transaction, providing an additional layer of security.

Method renderCVVForm

Once you've imported the script that points to the Bamboo forms, you'll have access to the renderCVVForm method, which renders a form dedicated exclusively to capturing the customer's CVV.

BambooForm.renderCVVForm(url, configurationCVV);

Configuration Parameters

Usage Example

<script>
BambooForm.renderCVVForm(
  '<https://api.stage.bamboopayment.com/v1/Capture/?key=FEdJ84hzdIKBY0gyC7-NDG_I56ONV7HQ&session_id=CA_51864eaf-1603-4fe8-8720-ae8c569ea702&paymentProfileId=375108&brand=MasterCard&lastFour=4008>',
  {
    metadata: {
      locale: 'es',
      logoUrl: '<http://www.example.com/>'
    },
    hooks: {
      onOperationSuccess: () => {
        console.log('Operation successful');
      },
      onOperationError: (error) => {
        console.error('Error in CVV validation:', error);
      }
    }
  }
);
</script>

Next Steps

After you obtain the token, you can pass it into Bamboo’s Purchase API instead of handling card details directly. This allows you to authorize, capture, or cancel transactions.