Custom Checkout Using Tokenization

What is credit card tokenization?

WePay offers a custom checkout process where you tokenize the payer’s credit card so you can deliver your own branded, customized checkout experience. Credit card tokenization enables you to securely send credit card information to WePay, so you can charge the card.

Example

An accounting platform wants to allow customers to pay their small-business merchants on their site. The accounting platform wants 100% control and branding over the payment flow and are willing to do more work during the integration. They collect the credit card information in the browser and then send it to WePay, which gives them a credit_card_id they can use to charge the customer’s card. Using WePay’s JavaScript library allows the accounting platform to send credit card data directly to WePay, bypassing the platform’s server and mimimizing PCI exposure.

In this scenario, a small-business owner is the merchant and the customer is the payer and we’ll use those terms throughout this page.

The example below is a basic form that uses our custom APIs to process a payment.

How does it work?

There are 3 steps to using credit card tokenization:

  • Get approval for your app to use credit card tokenization.
  • Collect the payer’s credit card information and make the /credit_card/create call.
  • Send the credit_card_id to your server and make the /checkout/create call to charge the card.

Step 1:

The first step is to request approval for your app to use credit card tokenization. Because tokenization requires you to securely handle payer credit card information when transmitting it to WePay, it means you must adhere to certain regulations of PCI compliance. You’ll need to request approval and confirm that you have taken appropriate steps to comply with the PCI-DSS standard and secure payer information. You can apply for tokenization from the “API Keys” tab of your app dashboard.

Step 2:

To tokenize the credit card, you will have a form on your site where the payer can enter their credit card information. When the payer submits their data you will NOT send it to your server, but will instead make the /credit_card/create call from the browser using our Tokenization JavaScript library. We will respond with a credit_card_id that you can send to your server and use to charge the card.

Here is an example of how to collect credit card information, get back a credit_card_id securely, and then submit the credit_card_id to your server.

  • HTML

Step 3:

Now that you have the credit_card_id, you can use it to charge the card. To do so, make the /checkout/create call with the credit_card_id from step 1, and the merchant’s access_token and account_id.

  • PHP
  • cURL
  • Ruby
  • Python

Bank Account Tokenization

WePay also offers a Custom Checkout process, whereby you tokenize the payer’s bank account so that you can offer ACH as a payment method. You can find the complete guide on Bank Account Tokenization here.

Next Steps

Now that you’ve successfully charged a payer, your merchant will have money in their WePay payment account. The next step is to let the merchant verify their identity and link their bank account.