How to generate Tokens without hard coding the Card Info?

[JetLi]

This is a code from the Stripe Genie below and thanks to alpha for making it very very easy to use Stripe.
'
'Category: Core Resources: Tokens
'Description: Create A Card Token
'
'Stripe API: Create a card token, Xbasic Example
'See: https://stripe.com/docs/api#create_card_token

on error goto StripeError

dim secretTestKey as c = "sk_test_BQokikJOvBiI2HlWgH4olfQ2"
Stripe::StripeConfiguration.SetApiKey(secretTestKey)

dim tokenService as ::Stripe::StripeTokenService
dim tokenOptions as ::Stripe::StripeTokenCreateOptions
dim cardOptions as ::Stripe::StripeCreditCardOptions

cardOptions.Number = "4242424242424242"
cardOptions.ExpirationYear = 2019
cardOptions.ExpirationMonth = 6
cardOptions.Cvc = "123"

tokenOptions.Card = cardOptions



My question is, Is it possible to use the built in Stripe UI to collect Payment using action java script to Enter the cardOptions.Number, cardOptions.ExpirationYear, cardOptions.ExpirationMonth and cardOptions.Cvc = "123". The main advantage of using the built in Stripe.js to collect payment is that we dont have to create on our own a UI to create tokens to gather card info without hard coding the card number , expiration and CVC which is suppose to be a not visible number.

Thanks very much!

[Davidk]

Re: How to generate Tokens without hard coding the Card Info?

Unsure what you're asking. Is it Stripe Checkout that you want to use? The doc for Stripe Checkout is excellent.

https://stripe.com/docs/checkout#integration-custom

Within the "handler" Javascript code for Checkout are these 2 commented lines...

// You can access the token ID with `token.id`.
// Get the token ID to your server-side code for use.

This means you have your token... with token.id... and that you pass it along to your server-side code for processing the payment... an Ajax Callback.

[JetLi]

Re: How to generate Tokens without hard coding the Card Info?

Thanks David for the reply. On the xbasic code Stripe Genie above there is a code to gather card information below
cardOptions.Number = "4242424242424242"
cardOptions.ExpirationYear = 2019
cardOptions.ExpirationMonth = 6
cardOptions.Cvc = "123"


My question is , is there a built in User Interface that Stripe made to Enter the Card info instead of Hard Coding, Just a reminder that the code above is not to collect payment and process it on stripe, it is just to create a token to be used in creating a customer because in creating a customer , there is an argument called customerOptions.SourceToken = "tok_mastercard"

Where should we get the tok_mastercard? that is the purpose of creating a token first before creating a customer in Stripe. But my main question is how to gather cardinfo without hard coding using a built in Stripe User Interface if it exist, because of course we can create a component in alpha and create text controls for Card number, exp date, CVC etc, the problem here is that the validation to validate the card is not automatically handled, I do hope I have explained well. Thanks!

[CharlesParker]

Re: How to generate Tokens without hard coding the Card Info?

I'm not completely sure of your process so count me out on good advice, but at the beginning of the page david posted the documentation says:

Just enable HTTPS on your checkout page, and we'll take over from there.

I beleive they handle the stuff your asking about...if I am wrong I am all ears and eager to learn!

[Davidk]

Re: How to generate Tokens without hard coding the Card Info?

Thanks David for the reply. On the xbasic code Stripe Genie above there is a code to gather card information below
cardOptions.Number = "4242424242424242"
cardOptions.ExpirationYear = 2019
cardOptions.ExpirationMonth = 6
cardOptions.Cvc = "123"


My question is , is there a built in User Interface that Stripe made to Enter the Card info instead of Hard Coding, Just a reminder that the code above is not to collect payment and process it on stripe, it is just to create a token to be used in creating a customer because in creating a customer , there is an argument called customerOptions.SourceToken = "tok_mastercard"

Where should we get the tok_mastercard? that is the purpose of creating a token first before creating a customer in Stripe. But my main question is how to gather cardinfo without hard coding using a built in Stripe User Interface if it exist, because of course we can create a component in alpha and create text controls for Card number, exp date, CVC etc, the problem here is that the validation to validate the card is not automatically handled, I do hope I have explained well. Thanks!

Thanks for the reminder... but there's no information in your post about creating a customer.

You can create a customer without a token... the token is optional. If you want to create a customer and attach a credit card to that customer then you will need a token. As I posted, you would use the Stripe Checkout process. Using Stripe Checkout, Stripe will pop up a form to fill in. Have a look at the Stripe Quickstart and at Stripe Checkout (Custom option).

The Stripe popup only collects billing related information. You will have already collected a Customer Name, Email, etc. You then pass the token created by Stripe in the popup, along with your Customer details, to an Ajax Callback... and create the customer in an XBasic call.

You will need to review the Stripe doc in order to get all this done. This is what the Stripe generated popup looks like...

StripePopup.PNG

[JetLi]

Re: How to generate Tokens without hard coding the Card Info?

The code below is copied from the Custom tab of the stripe checkout docs,
<script src="https://checkout.stripe.com/checkout.js"></script>

<button id="customButton">Purchase</button>

<script>
var handler = StripeCheckout.configure({
key: 'pk_test_Yl9ASLbTSTI6tMeJkmSjX5dx',
image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
locale: 'auto',
token: function(token) {
// You can access the token ID with `token.id`.
// Get the token ID to your server-side code for use.
}
});

document.getElementById('customButton').addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
name: 'Zebrafleet',
description: '2 widgets',
currency: 'hkd',
amount: 2000
});
e.preventDefault();
});

// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>



How can I make this work in a Freeform container?