Creating Charges

This section assumes you've already implemented a solution for collecting and tokenizing your customers' cards. If you haven't, see Collecting Card Details before proceeding.

Xendit.js and your payment form alone do not create a charge. Combined, Xendit.js and the HTML form fulfill the first half of the payment process, but server-side code is also necessary to complete the workflow.

Once the token has been successfully created with either Xendit.js or mobile SDK, it must be submitted to your server where the card can be charged.

• After tokenization, the payment form should have a hidden field with the token ID, at which point the form should be submitted using JavaScript (as a reminder, the form's submission was prevented earlier so the script could wait for Xendit to tokenize the card details).
• All of the form's data will be sent as a POST request to the URL in the form's action. If you have other form elements, such as the user's email address, that will be submitted as usual.

After you've securely collected and tokenized your customer's card details using Xendit.js or mobile SDK, you can charge the card.

• Unlike collection, which occurs in the browser, charge attempts are made from your server, normally using our client library.
• On your server, grab the Xendit token in the POST parameters submitted by your form. From there, it's one simple API call to charge the card:

Shell

curl https://api.xendit.co/credit_card_charges -X POST \
  -u xnd_development_O46JfOtygef9kMNsK+ZPGT+ZZ9b3ooF4w3Dn+R1k+2fT/7GlCAN3jg==: \
  -d external_id=your-external-id \
  -d token_id=your-token-id \
  -d amount=17000

PHP

<?php
    require("vendor/autoload.php");

    $options['secret_api_key'] = "xnd_development_O46JfOtygef9kMNsK+ZPGT+ZZ9b3ooF4w3Dn+R1k+2fT/7GlCAN3jg==";

    $xenditPHPClient = new XenditClientXenditPHPClient($options);

    $external_id = "your-external-id";
    $token_id = "your-token-id";
    $amount = 17000; // Amount must match what was passed to createToken in the browser

    $response = $xenditPHPClient->captureCreditCardPayment($external_id, $token_id, $amount);
    print_r($response);
?>

Be sure to use your Secret API key instead of your Public API key here.

That's it! If the charge creation request succeeds, the card has been successfully charged.

For full API references you can check our API Reference .

Cards Payment Simulation

You can simulate a cards payment in development (test) mode using the test card numbers here

• If no expiry date is provided, you can use any date after today's date
• If the CVN/CVV is required and not provided, you can use any 3-digit combination

Next Steps

• Check out our other features: Multiple Charges or Refunds

Questions?

Still have more questions? We're always happy to help however we can. Shoot us an email or talk to us in live chat.