Stripe Payment gateway integration
Stripe supports 100+ currencies out of the box. In addition to credit and debit cards, Apple Pay, Android Pay, you can also easily support Bitcoin, Alipay, or Amex Express Checkout.
Two types of Stripe payment gateway integration using PHP
- Stripe checkout integration [ https://stripe.com/docs/checkout ]
- Stripe custom integration using stripe.js [ https://stripe.com/docs/custom-form ]
Strip checkout integration:
The easiest way to integrate Stripe is via Checkout, an embedded tool that takes care of building an HTML form, validating user input, and securing your customers’ card data. Using Checkout, sensitive credit card information is sent directly to Stripe, and does not touch your server. Stripe returns to your site a token representation of the card and this token can then be used in a charge request.
To see Checkout in action, click the button below, filling in the resulting form with:
- Any random, syntactically valid email address (the more random, the better)
- One of Stripe’s test card numbers, such as 4242424242424242
- Any three-digit CVC code
- Any expiration date in the future
Checkout in your site:
To get started- add the following code to your payment page:
<form action="" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="<?php echo $params['public_test_key']; ?>"
data-amount="999"
data-name="BringmeOnline"
data-description="Add fund"
data-image="https://member.bringme.online/ppc-banners/logo/logo.png"
data-locale="auto"
data-zip-code="true">
</script>
</form>Stripe custom integration using stripe.js
The above steps assume you have a typical HTML payment form.
<form action="/your-charge-code" method="POST" id="payment-form">
<span class="payment-errors"></span>
<div class="form-row">
<label>
<span>Card Number</span>
<input type="text" size="20" data-stripe="number">
</label>
</div>
<div class="form-row">
<label>
<span>Expiration (MM/YY)</span>
<input type="text" size="2" data-stripe="exp_month">
</label>
<span> / </span>
<input type="text" size="2" data-stripe="exp_year">
</div>
<div class="form-row">
<label>
<span>CVC</span>
<input type="text" size="4" data-stripe="cvc">
</label>
</div>
<input type="submit" class="submit" value="Submit Payment">
</form>Step 1: Collecting credit card information
To securely collect the credit card information, first include Stripe.js in your page:
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
In a separate script tag, after the above, set your publishable key:
<script type="text/javascript">
Stripe.setPublishableKey('pk_test_vqD0G3z3rhXGkY55bOAszuZs');
</script>Step 2: Create a single use token
The second step is to convert the payment details into a single-use representative token. This is done by interrupting the form’s submission and passing the payment details directly to Stripe (from the user’s browser).
$(function() {
var $form = $('#payment-form');
$form.submit(function(event) {
// Disable the submit button to prevent repeated clicks:
$form.find('.submit').prop('disabled', true);
// Request a token from Stripe:
Stripe.card.createToken($form, stripeResponseHandler);
// Prevent the form from being submitted:
return false;
});
});Step 3: Sending the form to your server
The third and final step to securely collect your customer’s payment details is to submit the received token to your server for final use. When your script receives the response from Stripe’s servers, the stripeResponseHandler function is called:
function stripeResponseHandler(status, response) {
// Grab the form:
var $form = $('#payment-form');
if (response.error) { // Problem!
// Show the errors on the form:
$form.find('.payment-errors').text(response.error.message);
$form.find('.submit').prop('disabled', false); // Re-enable submission
} else { // Token was created!
// Get the token ID:
var token = response.id;
// Insert the token ID into the form so it gets submitted to the server:
$form.append($('<input type="hidden" name="stripeToken">').val(token));
// Submit the form:
$form.get(0).submit();
}
};
0 Comments